Page speed is one of the most important ranking factors in today’s search engine optimization.
For beginners, the fastest and simplest way to speed up the web page is to optimize large resources (like images), minimize the size, and thus reduce the load time.
I hope you like it and help me spread the world.
Originally Published Nov 28 2017, updated Jan 11 2023
Native Lazy Loading
For Chrome users, you can use the native lazy loading feature to lazy load web resources in the modern web app.
loading attribute which brings native
<iframe> lazy-loading to the web:
<!-- Lazy-load an offscreen image when the user scrolls near it --> <img src="unicorn.jpg" loading="lazy" alt=".."/> <!-- Load an image right away instead of lazy-loading --> <img src="unicorn.jpg" loading="eager" alt=".."/> <!-- Browser decides whether or not to lazy-load the image --> <img src="unicorn.jpg" loading="auto" alt=".."/> <!-- Lazy-load images in <picture>. <img> is the one driving image loading so <picture> and srcset fall off of that --> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" loading="lazy"> </picture> <!-- Lazy-load an image that has srcset specified --> <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy"> <!-- Lazy-load an offscreen iframe when the user scrolls near it --> <iframe src="video-player.html" loading="lazy"></iframe>
1. Responsive Image Lazy Load JS Library – lazysizes
lazysizes is an easy yet robust JS library used to delay the loading of images (iframes, scripts, etc) until they come into view, as well as loading the appropriate sources according to the breakpoints defined in the markup to fit any screen size.
2. Performant Element lazy Load Library – Lozad
4. Lightweight Retina Ready JS Image Lazy Load Library – Layzr.js
5. Easy Image Lazy Loading with blazy.js
A lightweight & easy-to-use script to delay the load of images until they enter the viewport. Helpful to save the bandwidth and reduce the server requests.
6. Modern Retina-ready Image Lazy Loader – lazyestload.js
7. Small Image/Video/Iframe Lazy Loader – yall.js
A small accessible image lazy load library that works with the <a> link and supports responsive image delivery.
For jQuery users, don’t forget to check out our another list of 10 best lazy load plugins.