Corrigir conteúdo com carregamento lento

Adiar o carregamento de conteúdo não crítico ou não visível, processo também conhecido como "carregamento lento", é uma prática recomendada comum de UX e de desempenho. Para ver mais informações, consulte o guia para carregamento lento de imagens e vídeos no Fundamentos da Web. No entanto, se essa técnica não for implementada de forma correta, talvez o conteúdo não seja exibido no Google. Este documento explica como garantir que o Google possa rastrear e indexar conteúdo com carregamento lento.

Carregar conteúdo quando ele estiver na janela de visualização

Para garantir que o Google detecte todo o conteúdo da página, confira se a implementação de carregamento lento abrange todo o conteúdo relevante sempre que ele está na janela de visualização. Veja alguns exemplos de como você pode fazer isso:

Teste sua implementação.

Compatibilidade de carregamento paginado com rolagem infinita

Se você estiver implementando uma experiência de rolagem infinita, a compatibilidade com o carregamento paginado será necessária. O carregamento paginado é importante para os usuários porque permite que eles compartilhem e interajam novamente com seu conteúdo. Ele também permite que o Google mostre um link para um ponto específico no conteúdo em vez do topo de uma página de rolagem infinita.

Para que haja compatibilidade com o carregamento paginado, forneça um link exclusivo para cada seção que os usuários podem compartilhar e carregar diretamente. Recomendamos usar a API History para atualizar o URL quando o conteúdo for carregado dinamicamente.

Teste

Depois de configurar sua implementação, confira se ela funciona corretamente. Uma maneira de fazer isso é usando um script Puppeteer para testar localmente sua implementação. Puppeteer é uma biblioteca do Node.js que controla a versão headless do Chrome. Para executar o script, o Node.js será necessário. Use os seguintes comandos para verificar e executar o script: 

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

Depois de executar o script, analise manualmente as capturas de tela criadas para garantir que elas tenham todo o conteúdo que você quer que o Google detecte e indexe.

Você também pode usar a Ferramenta de inspeção de URL no Search Console para ver se todas as imagens foram carregadas. Verifique a captura de tela e o HTML renderizado para garantir que suas imagens sejam carregadas.