4/25/2023 0 Comments Lazy loading![]() ![]() Lighthouse assumes the network is idle after 5s of no activity, so pushing back the extra image requests will improve Time to Interactive. One easy workaround would be to increase the delay from 5s to 10s. Time to Interactive doesn't matter in either case. I care about user experience and the Core Web Vitals Google uses for search engine rankings. ![]() The initial render was a lot quicker, but Time to Interactive went up because more network activity was moved to later in the page load process, keeping the network active for longer. One thing that happened when I enabled image lazy loading and later removed the loading attribute is that my Lighthouse Performance score went down. The trade-off here is bandwidth consumption: on a mobile plan with limited traffic users may prefer not loading images that they aren't going to see. The images will then be downloaded right away, but without having affected the initial page load. To avoid that you can remove the loading attribute from the img tags after the initial page load. When images are lazy loaded they'll be missing once the reader scrolls down the page. If you're writing a long blog post readers might prefer to load it on their phone and then read it when they don't have an internet connection. What if my user loads an article and then wants to read it offline? You can use the Intersection Observer API to check whether the image is in the viewport. You can check if the image is near the viewport and then either modify the style attribute directly or add a class with a background-image defined in a CSS file. The loading=lazy attribute doesn't work for background images, so you'll need to use JavaScript to achieve the same effect. Request waterfall with lazy loaded LCP image How do you lazy load a background image? In this waterfall you can see a long request chain for the LCP image. This is especially noticeable if the LCP image is lazy loaded. If the browser starts scrolling down it may take a while before images show up. Using a library to lazy load images means that you first need to load JavaScript code before starting to load the image. Why is native image lazy loading better than using a library? If a browser doesn't support the loading attribute the images will be downloaded as soon as the user opens the page. Firefox and Safari don't support the loading attribute on iframes yet. Native lazy loading is currently supported by Chrome, Safari, Edge, and Firefox support it. What browsers support the loading="lazy" attribute? (The filmstrip makes it look like the above-the-fold image loads later than before, but this is only minor variation, not an effect of the lazy loading change.) The Largest Contentful Paint goes from 1.6s to 0.8s. ![]() The below-the-fold images are now deprioritized, and the browser loads the background image much earlier. That avoid unnecessary downloads and helps the browser focus on the most important requests. Setting the loading attribute to lazy can defer fetching images and iframes until the user scrolls near the element. What does the HTML loading="lazy" attribute do? īy default, all images on a page are loaded as soon as the user opens the page. Most of this is allocated to the below-the-fold images, but the browser is also loading some JavaScript code before loading the hero background image. The darker areas show when data for that request is received, so you can see what requests the browser is spending bandwidth on. The right-most part of each request shows the response body being downloaded. Before that the browser loads several large below-the fold images, using up the available bandwidth. The request for the background image is only made relatively late. Why does it take so long? We can find out by looking at the detailed request waterfall. Before that a plain blue background is used. The filmstrip above shows that the background image of the hero section only loads after about 1.6s. This article explains how to use the loading="lazy" HTML attribute to make your website render more quickly. I recently made some performance improvements to the DebugBear homepage.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |