![]() That is unless you lazy load all of the images. They read an HTML document from top to bottom and assume that images found higher in the document are more important and start downloading them sooner. They need to load as quickly as possible so the page feels complete and ready to be interacted with.īrowsers are pretty smart about prioritizing assets in their download queue. Typically, this means don’t download it until the user scrolls the page far enough that it seems likely the image will be seen.īy contrast, images at the top of the page-logos in the header, hero and product images-are immediately visible. So lazy loading says to the browser, don’t download this footer image until it is needed. If that footer image starts downloading immediately, it may delay assets that are more important. The benefit of lazy loading is telling the browser to defer images and other assets that aren’t immediately needed.įor example, someone may never scroll down far enough on a page to see an image located in the footer. They want to build fast sites so they lazy load all of the images.īut when you lazy load all of the images, you defeat the purpose of lazy loading. It seems like many developers have heard that lazy loading images is good for performance. Lazy loading every image does more harm than good ![]() to Lazy loading every image does more harm than good If anything, we should consider preloading the image. It is the most important image on the page. There are four data attributes and an entire noscript block used to hide this image from the browser’s pre-loader so that the image isn’t download early and is instead lazy loaded.īut this is the main product image. The page uses a JavaScript-based carousel to display multiple product images. This is the markup associated with the Supergoose’s main product image: Code language: HTML, XML ( xml ) If we look at the DOM, we’re seeing what the browser knows after CSS and JavaScript have been processed. We want to know what the browser can see when it downloads the initial HTML document. It is important to view the source of the page, not look at the current DOM in developer tools. One of the first things I do when investigating why an image is loading so late is to view the source of the page to find the code for the image. Largest Contentful Paint is one of the Core Web Vitals that Google promotes and uses in its search engine page ranking algorithm. This image is not only the most important image for customers, but it is also the image that will count towards the Largest Contentful Paint measure. But for now, let’s focus on the main product image which takes over 14 seconds to appear. The page takes 44 seconds to finish loading. There’s a lot of performance issues here. This network speed is what Google’s Lighthouse and Page Speed Insights tools uses to measure performance. ![]() In this test, the main product photo takes 14.39 seconds to load on a simulated Fast 3G / Slow 4G connection. The video below captures how the page loads: Let’s use their amazing, retro Supergoose bike as our example page. I can’t talk about the client site in detail so I found another site, Mongoose Bikes, using the same Shopify theme. They saw a significant drop in conversion after they launched a new design and wanted to know why.ĭigging into the network waterfall chart, I noticed that the product image-the most important image on the page-took 16 seconds to appear on a fast 3G connection. You’re better off not implementing lazy loading at all than implementing it incorrectly.įor example, a former client of ours asked us to look at the performance of their product page. It impacts user experience, Core Web Vitals, and by extension search engine optimization. I see a recurring performance problem on many ecommerce sites- the most important images on the page are being lazy loaded when they shouldn’t be.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |