Lazy loading of images 
Autor: John W.
Besucht 2311,
Followers 2,
Geteilt 0
Thank you, Paul M for showing me where to find the lazy loading command for images.
Reference this post:
https://helpcenter.websitex5.com/de/post/229932#2
Gepostet am
Autor
I just checked the speed index in the Google Lighthouse tool, and it went way up for my home page by making
all images under the first row of images set to lazy load.
Any brownie points that can be earned with Google are definitely a plus.
Autor
Hey, Paul. Kind of a glitch with this lazy loading. When you select a graphic to lazy load, it adds this code into
the HTML at the end of a DIV block:
<script>document.write(x5engine.settings.imLoadingAnimation);</script>
Seems like the Google Lighthouse thing is throwing a big hissy fit with document.write()
It says do not use it. Now the lazy loading will definitely improve page speed, that is real good.
But why is Google crying about the document.write() script?
Hello John,
Good question. You might get differing views on this but in my humble opinion this is no big deal. I'll try and explain why.
Google probably doesn't like the fact that document.write() is an inline script which can halt rendering of the page until the script is executed. This can make the page load more slowly, especially for visitors who are already on a slow internet connection.
However, here is why I personally feel this is a minor issue, in your specific case.
These page speed tools are great, I use them myself from time to time, but my personal opinion is that server hardware and configuration are of equal or even greater importance. It's possible to shave seconds off page load time with fast processors, solid state disks, lots of RAM, clever use of cache, and a fast uncontested upload speed, etc. - at the end of the day page load time is what really counts, and a fast page load time will put you high up on any search engine ranking.
Kind regards,
Paul
Search the WebSite X5 Help Center
Autor
Thanks, Paul. I looked up more info this morning and it seems like the simple HTML code of having
loading="lazy" within the img attribute would ask the image to lazy load without a script.
<img src="myimage.jpg" loading="lazy" alt="..." />
Do you think that is correct? I found two sources saying the same thing. If it is that simple, is there a way I
could just add an HTML element in a cell with an image and just add loading="lazy"
I am becoming more aware that Lighthouse seems to be more of an alarm system than a help system.
And all this emphasis on page speed is making a lot of us try to create smaller pages, thus less data.
Then you get the analysis robots yelling at you for having to click too deep into a site to find what you need,
because you are making the pages smaller. Seems like a merri-go-round of nonsense.
I do agree on speed. We do not find many people on 2 or 3G, or on dial up modems. And those who are, they
know that they need to wait to see a page. The 4G is fast because I do occassionally look at my pages on a
phone instead of just squeezing the browser window narrower. And I use Fios with clock speeds of 83 to 93 Mbs.
So I don't even remember what a slow connection is. There is very little lag with Fios.
But please do let me know what you think of that HTML tag of loading="lazy"
Thanks,
I don't know if I'm qualified to answer definitively, John, but this is my opinion for what it's worth.
To create each image manually would be a lot more work for what I personally feel would not be much gain, and might in fact be a retrograde step.
When you allow WebSite X5 to set up the images you can also benefit from the many extras which the software takes care of on your behalf (such as tooltips, mouseover effects, ShowBoxes, image processing and effects, etc.) - there isn't really much if any extra overhead for all this, because the scripts/jQuery are already loaded. You could of course code any or all of these manually, but it's tedious and prone to error.
There won't be much (if any) working difference in the actual lazy loading of the two methods. So your only real 'benefit' is getting rid of the JavaScript:
<script>document.write(x5engine.settings.imLoadingAnimation);</script>
But this is a tiny script (all it does is display a simple spinner placeholder until the real image appears) and it will only be loaded once, after which the browser will make subsequent requests virtually 'for free' from the cache. And it's a nice touch to have if a visitor really is on a slow connection, as it makes them realise the otherwise 'empty space' will soon be replaced by an image.
So, if it was my choice and I really, really wanted to get rid of the JavaScript, I would export the website to disk in Step 5, and manually remove each occurrence from the page(s) in question. Then upload to the server. To my mind that would be the quickest and cleanest way, whilst retaining the benefits of WebSite X5 image handling and lazy loading.
Autor
You're qualified.
Thanks,
Autor
Hey Paul,
Any idea how to lazy load images that are part of the shopping cart cards?
Autor
And what about images in the footer section of the page? Any way to trigger graphics way down there to lazy load?
You could lazy load images in the footer using HTML Code Objects in the Template Content section in Step 2... as per your example above... <img src="myimage.jpg" loading="lazy" alt="..." />
It wouldn't make much sense though, as again the image(s) will only be downloaded once, after which they'll be read from the browser cache. And of course the footer is usually the same for each website page.
There would be more benefit in lazy loading the Shopping Cart images. Unfortunately this wouldn't be straightforward in WebSite X5, at least not for the time being. The Shopping Cart images are loaded as CSS background images as opposed to using simple <img> tags. So it would be necessary to use JavaScript to detect where the visitor was on the browser page, then trigger an interaction with CSS at the crucial moment.
Basically you would need to block the default imProductListImage class until the page has been scrolled, then apply the class to trigger loading of the images.
A detailed description of this technique can be found here:
https://imagekit.io/blog/lazy-loading-images-complete-guide/#lazy-loading-css-background-images
Implementing a method such as that should in theory be clean and trouble free as it shouldn't mess with Incomedia's own code. That's always my prime consideration when adding custom code.
I had hoped to find time to experiment on your behalf with this, John, but I must apologise that so far this has eluded me. I became a grandfather for the first time last week and things have been hectic, but in a good way!
Autor
Well, congratulations, Gramps.
Thanks for the help. Most of my pages seem to score fairly well in that Lighthouse tool, until I start messing with them. Push one button, dial goes the other way. And depending upon the time of day you do the test, results can change by 5 to 10 points even with no changes to the page. So I think the best thing to do, is just to try to get loads more people to the web pages. You are right about the fast connections. Even if the page took the 8 to 10 seconds to load like Lighthouse is saying, the customer has already taken 10 seconds to read the part on the screen already, and the rest should be there. Now on a cell phone a bit different, but we really need people on cell phones to learn some more patience.
So I will continue to tweak my intro pages and lazy load the easy graphics to change within the program. I will ignore all of Googles Document.write BS. And who is Google to tell me how to size my images. Images are sized so they look good on the overall page. If Google has a hissy fit with it, too bad. I have never had a customer complain and say my logo looks too larger or too small on the screen.
Enjoy your upcoming babysitting duties....