Plugin "Lazyload" loads images and iframes only when they are visible to the user. This reduces the number of HTTP requests and shortens the site load time.
For an example of how it works, see our demo site.
- Speed up website loading
- Improve PageSpeed Insights by fixing the "Delay loading hidden images" metric. More...
- The weight of the script is only 4kb
- Support for LQIP (low quality image placeholders), which can reduce the size of images during loading by about 10 times and not get a jump in site content. (it is possible to automatically create lqip using the plugin Responsive Images PRO)
- Uses relatively new technology “Intersection Observer API”, so older browsers and IE are not supported
- For Iframe, it is possible to use lazy loading with a facade. More ...
- When used with a plugin Responsive Images PRO Lazy load must be installed after it
- Prohibiting work on certain pages
- Exclude selected images
- Configuring element preloading
- Working with HTML tags and background images added via CSS
- Autodescribing image dimensions after upload
In the plugin settings, click "Activate plugin" - the plugin is ready to use.
After activating the plugin, you need to check the correctness of displaying images, for those images that are not displayed correctly, you must disable lazy loading.
Plugin operation and recommendations:
When other JS-scripts affect images and iframes, the plug-in's algorithm may be broken, in which case the plug-in is not guaranteed to work.
The plugin does some manipulation of images and iframes, so the load on the server increases slightly, but by performing lazy loading this is fully compensated.
The plugin is most effective when the largest number of images and iframes are outside the primary scope (first screen), then PageSpeed Insights can increase significantly.
3 ways to test the work:
- Go to any of the pages of the Store application. Open your browser console and find images (html img tag). The data-loaded = "true" attributes should be added as the page scrolls.
- Go to any of the pages of the Store application. Open the browser console, go to the "Network" fold, select the "Images" type, the list of images in the console should expand as you scroll the page.
- Analyze the site with PageSpeed Insights, the "Delay loading hidden images" metric should be green.
- Technical support is provided at: firstname.lastname@example.org
- Working hours (Moscow time): 10:00 - 18:00 Mon-Fri on Russian working days
- Technical support includes: consultations on configuration, answers to questions about the plugin, configuring the plugin according to your instructions
- We will be glad to hear your: wishes, ideas, comments on the plugin operation