# 懒加载内容修复

> 来源：Google Search Central (https://developers.google.com/search/docs/crawling-indexing-javascript-lazy-loading.txt)

---

* Ranking and search appearance
  ** Visual Elements gallery  **
  ** Title links  **
  ** Snippets  **
  ** Images  **
  ** Videos  **
  ** Structured data  **
  ** Favicons  **

  * Site-specific guides
  ** Ecommerce  **
  ** International and multilingual sites  **

  * Data analysis
  ** Get started with Search Console  **
  ** Debug traffic drops  **
  ** Using Search Console and Google Analytics data for SEO  **
  ** Get started with Google Trends  **

[ Support ](https://developers.google.com/search/help) [ Blog ](https://developers.google.com/search/blog) [ What's new ](https://developers.google.com/search/news)

  ** All updates  **
  ** Documentation updates  **
  ** Ranking updates  **
  ** New YouTube videos  **
  ** Recent podcast episodes  **

[ Events ](https://developers.google.com/search/events) [ Case studies ](https://developers.google.com/search/case-studies)

`/`

  * English
  * Deutsch
  * Español
  * Español – América Latina
  * Français
  * Indonesia
  * Italiano
  * Polski
  * Português – Brasil
  * Tiếng Việt
  * Türkçe
  * Русский
  * العربيّة
  * हिंदी
  * ภาษาไทย
  * 中文 – 简体
  * 中文 – 繁體
  * 日本語
  * 한국어

Sign in

  ** Documentation **

[Search Console](https://goo.gle/searchconsole)

[ ](https://developers.google.com/search)

  ** Google Search Central **

  ** Documentation  **
    * More 
  ** Support  **
  ** Blog  **
  ** What's new  **
    * More 
  ** Events  **
  ** Case studies  **

  **Introduction**
  * Search Essentials

    **Overview**
    **Technical requirements**
    **Spam policies**

  * SEO fundamentals

    **SEO Starter Guide**
    **How Google Search works**
    **Creating helpful, reliable, people-first content**
    **Do you need an SEO?**
    **Maintaining your site's SEO**
    **Developer's guide to Search**
    **Get your website on Google**
    **Guidance on using generative AI**

  * Crawling and indexing

    **Overview**
    **File types Google can index**
    **URL structure**
    **Links**
    * Sitemaps

      **Learn about sitemaps**
      **Build and submit a sitemap**
      **Manage sitemaps with sitemap index file**
      * Sitemap extensions

        **Image sitemaps**
        **News sitemaps**
        **Video sitemaps and alternatives**
        **Combining sitemap extensions**

    * Crawler management

      **Ask Google to recrawl your URLs**
      **Troubleshoot crawl errors**
      * Google crawlers

        **List of Google crawlers**
        **Googlebot**
        **Reduce the Google crawl rate**
        **Verifying Googlebot and other Google crawlers**

    * robots.txt

      **Introduction to robots.txt**
      **How Google interprets the robots.txt specification**

    * Canonicalization

      **What is URL canonicalization**
      **How to specify a canonical URL with rel="canonical" and other methods**
      **Fix canonicalization issues**

    **Mobile site and mobile-first indexing**
    * AMP

      **AMP on Google Search guidelines**
      **Understand how AMP works in search results**
      **Enhance AMP content**
      **Validate AMP content**
      **Remove AMP content**

    * JavaScript

      **Understand the JavaScript SEO basics**
      **Fix search-related JavaScript problems**
      **Fix lazy-loaded content**
      **Dynamic rendering as a workaround**

    * Page and content metadata

      **Page metadata**
      * Meta tags

        **Meta tags and HTML attributes that Google supports**
        **Robots meta tag, data-nosnippet, and X-Robots-Tag**
        **noindex**

      **rel attributes**

    * Removals

      **Control what you share with Google**
      **Page removals**
      **Image removals**
      **Redacted information**

    * Site moves and changes

      **Redirects and Google Search**
      * Site moves

        **Changing your hosting**
        **Move a site with URL changes**

      **A/B testing**
      **Temporarily pause or disable a website**

  * Ranking and search appearance

    **Overview**
    **AI features**
    **Byline dates**
    **Favicons**
    **Featured snippets**
    **Flexible Sampling**
    **Google Discover**
    **Images**
    * Local features

      **Business details**
      **Top Places List**
      **Opting out of local search results**

    * Page experience

      **Understanding page experience**
      **Core Web Vitals**
      **Interstitials and dialogs**
      **Get started with signed exchanges on Google Search**

    **Preferred sources**
    * Ranking systems

      **A guide to Google Search ranking systems**
      **Reviews system**

    * Ranking updates

      **List of ranking updates**
      **Core updates**
      **Spam updates**

    **Site names**
    **Sitelinks**
    **Snippets**
    * Structured data

      **Understand how structured data works**
      **Structured data general guidelines**
      **Enriched search results**
      **Generate structured data with JavaScript**
      * Feature guides

        **All structured data features**
        **Article**
        **Book actions**
        **Breadcrumb**
        **Carousel**
        **Course list**
        **Dataset**
        **Discussion forum**
        **Education Q&A**
        **Employer aggregate rating**
        **Fact check**
        **Event**
        **FAQ**
        **Image metadata**
        **Job posting**
        **Local business**
        **Math solver**
        **Movie carousel**
        **Organization**
        * Shopping

          **Overview**
          **Product snippet**
          **Merchant listing**
          **Variants**
          **Loyalty program**
          **Merchant return policy**
          **Merchant shipping policy**

        **Profile page**
        **Q&A**
        **Recipe**
        **Review snippet**
        **Software app**
        **Speakable**
        **Subscription and paywalled content**
        **Vacation rental**
        **Video**

    **Title links**
    * Translated features

      **Translated results**
      **Ad networks and translation-related Google Search features**

    **Videos**
    **Visual Elements gallery**
    * Web Stories

      **Enable Web Stories on Google**
      **Best practices for creating Web Stories**
      **Web Story content policy**

    * Early Adopters Program

      **Package tracking**
      **Structured data carousels (beta)**

  * Monitoring and debugging

    **Debug drops in Search traffic**
    * Monitor with Search Console

      **Get started with Search Console**
      **Improve SEO with a bubble chart**
      **Using Search Console and Google Analytics data for SEO**

    * Debug with search operators

      **Overview**
      **site: search operator**
      **Google Images search operators**

    * Preventing and monitoring abuse

      **Overview**
      **Prevent user-generated spam**
      **Malware and unwanted software**
      **Prevent a malware infection**
      **Social engineering (phishing and deceptive sites)**
      **Google Safe Browsing Repeat Offenders Policy**

    **Get started with Google Trends**

  * Site-specific guides

    * Ecommerce

      **Overview**
      **Where content can appear**
      **Share product data**
      **Include structured data**
      **Launch a new website**
      **Write high quality reviews**
      **Design a URL structure**
      **Ecommerce site structure**
      **Pagination, incremental page loading, and Search**

    * International and multilingual

      **Overview**
      **Managing multi-regional and multilingual sites**
      **Tell Google about localized versions of your page**
      **How Google crawls locale-adaptive pages**

    * Explicit content

      **Guidelines for sites with explicit content**
      **What to do if your site is incorrectly flagged as explicit**

  * SEO fundamentals 
  ** Introduction  **
  ** Search Essentials  **
  ** SEO Starter Guide  **
  ** How Google Search Works  **
  ** Do you need an SEO?  **
  * Crawling and indexing 
  ** Sitemaps  **
  ** robots.txt  **
  ** Meta tags  **
  ** Crawler management  **
  ** Removals  **
  ** Canonicalization  **
  ** Redirects  **
  ** JavaScript SEO  **
  * Ranking and search appearance 
  ** Visual Elements gallery  **
  ** Title links  **
  ** Snippets  **
  ** Images  **
  ** Videos  **
  ** Structured data  **
  ** Favicons  **
  * Site-specific guides 
  ** Ecommerce  **
  ** International and multilingual sites  **
  * Data analysis 
  ** Get started with Search Console  **
  ** Debug traffic drops  **
  ** Using Search Console and Google Analytics data for SEO  **
  ** Get started with Google Trends  **

  ** All updates  **
  ** Documentation updates  **
  ** Ranking updates  **
  ** New YouTube videos  **
  ** Recent podcast episodes  **

  ** Home **
  ** Search Central **
  ** Documentation **

Send feedback 

# Fix lazy-loaded content

Deferring loading of non-critical or non-visible content, also commonly known as "lazy-loading", is a common performance and UX best practice. For more information, see [web.dev's resources on lazy-loading images and video](https://web.dev/fast#lazy-load-images-and-video). However, if not implemented correctly, this technique can inadvertently hide content from Google. This document explains how to make sure Google can crawl and index lazy-loaded content. 

## Load content when it's visible in the viewport

To ensure that Google sees all content on your page, make sure that your lazy-loading implementation loads all relevant content whenever it is visible in the viewport. Here are a few methods to implement lazy-loading:

  **Browser built-in lazy-loading** for images and iframes
  **IntersectionObserver API** and [a polyfill](https://github.com/GoogleChromeLabs/intersection-observer)
  * A JavaScript library that supports loading data when it enters the viewport

The methods mentioned don't rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.

Don't add lazy-loading to content that is likely to be immediately visible when a user opens a page. That might cause content to take longer to load and show up in the browser, which will be very noticeable to the user.

Make sure to test your implementation.

## Support paginated loading for infinite scroll

At a high level, infinite scroll is a technique that loads more content, more distinct pages, as the user scrolls down a long page. This could be one long article that's split into multiple chunks, or a collection of items that's similarly split into chunks. To implement infinite scroll in an indexable way, make sure your website supports paginated loading of these chunks by doing the following: 

  * Give each chunk its own persistent, unique URL.
  * Ensure that the content shown on each URL remains the same every time it's loaded in a browser. One way this can be done is to use absolute page numbers in the URL, for example by using `?page=12` as a query parameter.
  * Avoid using relative elements like `?date=yesterday` in these URLs. This allows search engines and users to consistently find the same content under a given URL, making it easier for search engines to properly index the content, and allowing users to share and reengage with that part of your content.
  * Link sequentially to the individual URLs so that search engines can discover the URLs in a paginated set. Find out more about [best practices when implementing pagination](/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading#best-practices-when-implementing-pagination).
  * When a new page chunk is loaded in response to the user scrolling, and it becomes the primary visible element for the user, update the displayed URL using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). This allows the user to refresh, share, and link to the current URL displayed in the browser.

## Test

After you set up your implementation, make sure it works correctly. You can use the [URL Inspection Tool](https://support.google.com/webmasters/answer/9012289) in Search Console to see if all content was loaded. Check the rendered HTML to make sure your content is in the rendered HTML by looking for it in URL Inspection Tool. If your image or video URLs appear in the `src` attribute on the `<img>` or `<video>` elements in the rendered HTML, your setup works correctly. 

Send feedback 

Except as otherwise noted, the content of this page is licensed under the [Creative Commons Attribution 4.0 License](https://creativecommons.org/licenses/by/4.0/), and code samples are licensed under the [Apache 2.0 License](https://www.apache.org/licenses/LICENSE-2.0). For details, see the [Google Developers Site Policies](https://developers.google.com/site-policies). Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-10 UTC.

Need to tell us more?  [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-12-10 UTC."],[],["Lazy-loading should load content when visible in the viewport using methods like browser built-in loading, IntersectionObserver API, or JavaScript libraries, avoiding reliance on user actions. For infinite scroll, each content chunk needs a unique, persistent URL (e.g., `?page=12`), and avoid relative elements, also link sequentially to these URL. Update the URL with the History API. Finally, verify implementation with the URL Inspection Tool in Search Console to check if content is present in rendered HTML.\n"]] 

  ** LinkedIn  **

Join us on LinkedIn

  ** YouTube  **

Watch our videos

  ** Blog  **

Subscribe to our RSS feed

  ** Podcast  **

Listen to Search Off the Record

  ** X (Twitter)  **

Join us on X (Twitter)

  * ### Get support

    ** Go to the help forum **
    ** Submit a question for office hours **
    ** Report spam, phishing, or malware **
    ** More support resources **
  * ### Resources

    ** Do you need an SEO? **
    ** SEO Starter Guide **
    ** Status of Search systems **
    ** Search Console documentation **
    ** Case Studies **
  * ### Tools

    ** Search Console **
    ** Rich Results Test **
    ** PageSpeed Insights **
    ** AMP Test **

[ ](https://developers.google.com/)

  ** Android **
  ** Chrome **
  ** Firebase **
  ** Google Cloud Platform **
  ** Google AI **
  ** All products **

  ** Terms **
  ** Privacy **
  * Manage cookies 

  * English
  * Deutsch
  * Español
  * Español – América Latina
  * Français
  * Indonesia
  * Italiano
  * Polski
  * Português – Brasil
  * Tiếng Việt
  * Türkçe
  * Русский
  * العربيّة
  * हिंदी
  * ภาษาไทย
  * 中文 – 简体
  * 中文 – 繁體
  * 日本語
  * 한국어
