Build your lazy loading social media platform website with Instapage

Native lazy loading of images and iframes is a straightforward method to lazy load content when a user scrolls the web page. You just need to add the loading=lazy attribute to your images and iframes. As you can see, no JavaScript, no dynamic swapping of the src attributeʼs value, just plain old HTML.

Approach: To use Lazy Loading, use the loading attribute of image tag in html. Here are the supported values for the loading attribute: auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.

The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them. Tip: Add loading=lazy only to images which are positioned below the fold.

Enable Native Lazy Loading Through the Browser Popular browsers like Chrome, Firefox, and Opera support native image lazy loading. You only need to add the loading attribute to the targeted images and videos to enable it automatically.

Lazy Loading Files using JavaScript Async Script: The first tag uses the async attribute, which tells the browser to load and execute the script asynchronously. Defer Script: The second tag uses the defer attribute, which ensures the script is executed only after the HTML is fully parsed.

A practical example would be when you land on the home page of an e-commerce site with a link to a cart page/section, and none of the cart pageʼs resources (such as JavaScript, CSS, and images) are downloaded until you navigate there.

This works as follows: Replace with to avoid an eager load in unsupported browsers. If the loading attribute is supported, swap data-src for src . If loading isnʼt supported, load a fallback from lazysizes and initiate it, using the lazyload class to indicate which images to lazy-load:

Lazy loading can harm SEO if it prevents Googlebot from crawling content, especially important elements like text and images. Google can now handle lazy-loaded content, but only if itʼs implemented with proper techniques like using loading=``lazyʼʼ or IntersectionObserver.