Introduction to Lazy Loading
Lazy loading is a technique used to improve the performance of websites by delaying the loading of non-essential resources until they are needed. However, when applied incorrectly, it can have negative effects on website performance and search engine optimization (SEO). In a recent episode of Google’s Search Off the Record podcast, Martin Splitt and John Mueller discussed the pros and cons of lazy loading and how it can impact website performance.
How Lazy Loading Works
Lazy loading works by delaying the loading of images and other resources until they are needed. This can improve website performance by reducing the amount of data that needs to be loaded initially. However, when applied to hero images or other above-the-fold content, it can delay the Largest Contentful Paint (LCP) and cause layout shifts.
The Impact of Lazy Loading on LCP
LCP measures the time it takes for the largest text or image in the initial viewport to be painted. When lazy loading is applied to hero images, it can delay the LCP and cause layout shifts. This is because the browser’s preload scanner finds the hero image early and fetches it with high priority, but when lazy loading is applied, the image is treated as lower priority and the browser waits until layout and other work progress before requesting the image.
SEO Risks Associated with Lazy Loading
Some lazy loading libraries can hide image URLs in non-standard attributes, which can prevent Google from indexing the images. This is because Google renders the HTML and looks for image URLs in the src or srcset attributes. If the real URL is not in one of these attributes, Google may not pick it up.
How to Check Your Pages
To check if your pages are affected by lazy loading, you can use Search Console’s URL Inspection to review the rendered HTML and confirm that above-the-fold images and lazy-loaded modules resolve to standard attributes. You can also check the screenshot, but it’s not always accurate.
Best Practices for Lazy Loading
To get the most out of lazy loading, you should keep hero and other above-the-fold images eager with width and height set. You should also use native loading="lazy" for below-the-fold images and iframes. If you rely on a library for previews, videos, or dynamic sections, make sure the final markup exposes real URLs in standard attributes and confirm in rendered HTML.
Ranking Impact
The ranking impact of lazy loading is modest. Core Web Vitals contribute to ranking, but it’s a tiny minute factor in most cases. However, it’s still important to optimize your website for Core Web Vitals to improve user experience and search engine rankings.
Conclusion
Lazy loading can be a useful technique for improving website performance, but it needs to be applied selectively. By keeping hero and other above-the-fold images eager and using native loading="lazy" for below-the-fold images and iframes, you can improve your website’s performance and SEO. It’s also important to verify your implementation with rendered HTML and monitor your LCP trends over time to ensure that lazy loading is not having a negative impact on your website’s performance.