With the development of technology, the volume and quality of images increases. They take up a lot of memory space, the site stops responding quickly to requests, and it takes a lot of traffic to load the page. All this can be solved using Lazy Load technology.
What is Lazy load
Its operating principle is to load all the images as needed relative to the visible fragment of the web page, and not all at once.
Works slightly ahead of scrolling. The user scrolls the page, and at this time images are loaded that are not yet visible, but are already approaching the visibility area.
If the user has viewed everything up to the middle of the page, then all the images above and those slightly below will be loaded, the rest below will not be loaded.
If you check the site in the PageSpeed Insights resource, this item is called “Delay loading hidden images.”
Why is this important
When loading the site, beyond the visibility of the first screen, there are many pictures that are not visible until you go down. So why load them right away, wasting time?
It also wastes time contacting the server for each individual file. It's faster to upload a 10MB image than 10 1MB images. Lazy Load allows you to reduce the number of requests to the server.
By setting up LazyLoad you will increase site speed and reduce client waiting time. The site will load faster, since time will not be wasted loading images that are outside the visible area. Visitors will save traffic.
As a result, your site will be highly ranked by search engines.
What will happen if you don't
If the Internet connection is weak, the pictures may not open at all. Simultaneous loading takes up a lot of memory space and your page will freeze. The 21st century client, who is used to doing everything quickly, will not wait and will immediately go to your competitors’ website.
What is included in the service
I DO NOT work with plugins, as they themselves slow down the site. I do it not just to make it happen, but to speed it up.
I manually include a compressed version of the LazyLoad script at the very end of the code so that it does not affect the speed of drawing the site. Then I edit the code of all the necessary images in the site template so that lazy loading technology is applied to them.