What is LazyLoad?
LazyLoad is a script which defers the loading of images in a page until you scroll down.
The basic idea is to load images or iframes only when the users need to display them. In this way, (s)he won’t have to wait for all the elements in the page to be loaded and therefore, can start using the web page sooner. The user will be seeing only the images above the fold. The rest will come as soon as (s)he scrolls.
In terms of performance, this feature will decrease the number of HTTP requests during the first page load from the user.
How does it work?
LazyLoad stores all the images and iframes in a page, then sets up transparent covers with the same dimension of the real images, as a placeholder.
Do you remember those old photo albums where every picture in the page was protected by a veil of tissue paper? LazyLoad is “hiding” images and iframes in the same way: so every time the user scrolls down the page, requesting the images below the fold, the script will remove the “tissue paper veil” and serve the real image.
Lazy Load Use :
Now open the Console of your browser to inspect the activity of the page (right-click on a webpage and choose “Inspect”). Here is a simple comparison of the same page loaded with and without LazyLoad:
Without LazyLoad, all the images in the page are loaded together. Once the page is loaded, all its elements – images included – are there:
If you want to see LazyLoad, just choose a page containing many images and where the script is activated (WP Rocket has a LazyLoad option, or there are specific LazyLoad WordPress plugins you can use. If you are a developer you can integrate a LazyLoad script yourself).
0 Please Share a Your Opinion.: