- Use cases
- Customer Success
- LOG IN
- Start free trial
Lazy loading is a technique to increase page speed by deferring the loading of big elements–like images–that are not needed immediately. Instead, these elements are loaded later, if and when they become visible.
Typically, elements that are not in the viewport (that is, anything below the fold when the page first loads), are good candidates for lazy loading. They won’t be seen until the user scrolls them into view. If they don’t load immediately, the user’s experience of the page is not affected.
In fact, in their Lighthouse documentation, Google subtly recommends using lazy loading for images below the fold to improve page load time.
Lazy loading includes infinite scroll, a method of continually loading more content every time a user reaches the end of the current content on the page. This is one way to replace pagination on feeds, social networks, product lists, or other very long pages.
As it is often the case in SEO, the answer is “yes—but it depends.”
Google has repeatedly confirmed that it does index content that it can successfully render. This includes lazy load content.
Like other crawlers, googlebots implement strategies to handle lazy loading.
— Natzir Turrado (@natzir9) October 17, 2018
The jury is still out on scrolling.
A Yoast user’s test with Fetch and Render (now the URL Inspection Tool) in Google Search Console showed in August 2018 that images are correctly loaded when using lazy loading with WP Rocket. Yoast answers the user’s question and reports that Google handles lazy loading using scroll-and-wait strategies but doesn’t cite sources for its description of Google’s behavior, which leaves room for doubt.
In October 2018, Gary Illyes announced at PubCon that Googlebots do not scroll.
This announcement seemed to be pretty cut-and-dry. However, John Mueller had announced earlier that he “think[s] we do scroll a bit” based on the fact that when he’d tested it, additional page views were being indexed per page with infinite scroll.
The results of John Mueller’s tests might be explained—for certain implementations of lazy loading—by the increasing height of the viewport used by Googlebots: around 10,000 pixels for desktops, and slightly taller for mobiles.
Attribution: J.R Oakes
J.R. Oakes measured the actual viewport sizes used by googlebots last year as 431 pixels wide by 12,140 pixels high on mobile and 768 pixels wide by 9,307 pixels high for desktop.
Despite conflicting information, it seems that Google often ignores the <noscript> tag, but might use content within it for indexing images.
— Dawn Anderson (@dawnieando) October 17, 2018
Google published a long-awaited developer guide in November 2018 on the subject.
This guide covers three main recommendations:
1. Load content when it’s visible in the viewport
In the October 30th Google Webmasters Hangout, just before the developer guide was published, Martin Splitt covered the question of how to trigger lazy loading.
Specifically, he advised against relying exclusively on scroll events, despite the fact that scroll events are one of the most common lazy loading triggers.
He listed the following reasons not to use scroll events as your only trigger:
2. Support paginated loading for infinite scroll
With mounting evidence for Google not scrolling pages during crawls, infinite scroll might look like something to avoid.
However, there are ways to implement infinite scroll to allow Google to index the lazy load content below the fold. The guide mentions paginating loading, which also allows Google to link to a point within the page.
Google suggests using the History API, which dynamically updates the URL in the browser as additional pages are loaded and scrolled into view.
3. Test your implementation, particularly in Chrome
You can do this programmatically using the Puppeteer script to pilot Chrome—or, more precisely, Chromium, the browser Chrome is based on.
You can also use:
Yes, OnCrawl supports lazy loading!
The OnCrawl bot not only uses a 10,000-pixel viewport height, but we also use the scroll-and-wait technique to make sure we’ve seen all of your content.
This makes use of the maximum height supported by Chromium, which is both the OpenSource browser behind Chrome as mentioned earlier, and the browser that the OnCrawl bot’s rendering ability is based on.
Although this may or may not be a behavior that Google employs, we do our best to trigger scroll events in case you’re using an event listener for that.
If you’re using or considering OnCrawl to crawl your site and are concerned about support for your particular lazy loading implementation, reach out to us for more details on our crawl strategies for lazy loading.
We make our users’ configurations a priority when addressing crawler limitations, so even your unique and creative lazy-loading technique may be something we’re able to work with.
To recap, the extensive variety of lazy loading scripts, libraries, and techniques make lazy loading a sticky point for many crawlers. If you’re optimizing a site that makes use of lazy loading, use techniques that are accessible to crawlers.
Based on what we know about Google’s crawling and indexing, here are our top five tips for implementing lazy loading in the best possible way for SEO.
And a bonus: keep up with the news!
Native <img> lazy-loading is coming to the web! https://t.co/LgF7F1iMgR <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75 https://t.co/4gR7lvx4zx pic.twitter.com/luCHEfLkKD
— Addy Osmani (@addyosmani) April 7, 2019
In the words of Google’s Martin Splitt:
— Martin Splitt @ 🇩🇪 #smx #muc (@g33konaut) October 31, 2018