Hello - reaching out here as a first step (second after realizing I don't know how to do this myself). Has anyone had luck with website load time optimization?
When running our pages through the Google tool, we can see that there is a lot of 3rd party code weighing our pages down (HS code is part of it) but we also have a lot of images weighing our pages. Have you had luck with lazy loading?
Lazy loading requires you to add a js lib to your pages and modify a little the code of your images while editing it.-- view source code and change the src with data-src and add the class lazy to your classes. here is and example
Lazy loading requires you to add a js lib to your pages and modify a little the code of your images while editing it.-- view source code and change the src with data-src and add the class lazy to your classes. here is and example
@prosa@MiaPV This is technically correct but you're actually both still wrong. You can use `loading="lazy"` that all modern browsers no support and check with javascript if the native behavior is there + polyfill it. It's called progressive enhancements.... or cutting the mustard if you want to be old school.
That's how you actually do this. Given the lack of development experience I'm sensing I'm going to presume that's unclear or potentially complex: So, here's a breakdown
<img loading="lazy" class="target class for polyfill if needed" data-src="image source" <--- you add this. browsers that support it are now happy>
Way down at the end of the body....
if native feature is available swap attributes: polyfill target -> src
if not inject polyfill for loading.
once polyfill is loaded, if required by library, initialize it.
Honestly, just google it. I'm not typing the code out.
How it should really be done is not being such a crappy CMS and having everything below the fold automatically having the native attribute added for you instead of an ad-hoc mess of case by case image adjustments.
Thank you! I figured there would be something like this that can be done. Another community post said the following:
"For a simpler solution, you could get rid of the javascript library, revert the image markup back to normal (replace the `data-src` back to just `src`) and add the `loading="lazy"` attribute to your images. This uses the native browser lazy loading functionality that was recently introduced in Chrome. More info here:https://addyosmani.com/blog/lazy-loading/
Example image:
<img src="example.com" loading="lazy">
It makes lazy loading super simple and quick but the only downside is it doesn't yet work in all major browsers. "
If the js requires you to add extra code to your images anyway (class="lazy") would this be an easier(ish) solution? I feel like no matter what I'll have to go back and update all of our images. Or is the benefit of doing it the way you suggested be that it works with all browsers?
