Create your lazy loading about me website

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.

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.

Yes, as of WordPress 5.5, lazy loading is enabled by default automatically upon installation. However, there are some ways to customize the experience that are pretty straightforward and intuitive.

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.

Lazy loading is commonly applied to images and video content, which are often the largest files on a webpage, and can significantly slow down page load times. How to apply: Images: Use the loading=lazy attribute in the tag to defer loading of images until they are near the viewport.

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.

Images far below the device viewport are only fetched when the user scrolls near them. Chromiumʼs implementation of lazy loading tries to ensure that offscreen images are loaded early enough that they finish loading by the time the user scrolls to them by fetching them well before they become visible in the viewport.