A performance e velocidade de carregamento web são temas muito populares no mundo do SEO, principalmente depois da atualização do Google que começou em junho de 2021. E com isso também ficaram famosos os Core Web Vitals, que são alguns sinais de uma boa experiência em uma página web.
Existem muitas maneiras de otimizar as métricas dos Core Web Vitals. Você pode encontrar mais informações nestas documentações:
Uma implementação muito comum e recomendada para otimizar a métrica LCP é o recurso lazy load. Logo explicarei do que se trata. Mas a ideia aqui é mostrar como verificar essa implementação. Então, se você também é mais ou menos como eu, que se arrisca em tentar fazer alguns scripts funcionarem, mesmo que você não seja um desenvolvedor ou desenvolvedora, aqui vou mostrar algumas dicas de como fazer testes de scroll em páginas que contêm lazy load implementado de alguma forma.
O que é lazy load?
Mas, primeiro, o que é lazy load? É uma forma de permitir, por exemplo, que as imagens que estão abaixo da dobra sejam carregadas apenas quando solicitadas pelos usuários. Isso significa que a página pode carregar mais rapidamente porque não precisa trazer todos os elementos de uma vez. Já que os usuários podem nem mesmo chegar a requisitar essa imagem, então por que solicitá-la agora?
Exemplos
Alguns exemplos para implementar este recurso são de forma nativa ou usando uma biblioteca como lazysizes.js.
Exemplo Nativo: aplicar o atributo loading com o valor lazy nas imagens que estão abaixo da dobra (não aplicar, por exemplo, na imagem em que o LCP é marcado):
<img src="imagen.jpg" loading="lazy" alt="..." width="400" height="200">
Exemplo usando uma biblioteca: adicionar o script às páginas, aplicar a classe “lazyload” nas imagens abaixo da dobra, e mudar o src para data-src:
<img data-src="imagen.jpg" class="lazyload" alt="..." width="400" height="200" />
O que é Puppeteer?
E agora o que é Puppeteer no título do texto? É uma biblioteca a qual você pode simular um navegador Chrome sendo um headless Chrome. Ou seja, podemos fazer comandos do navegador sem usar sua interface.
Como utilizar?
- Primeiro você precisa ter o Node.js instalado porque o Puppeteer é desenvolvido com essa biblioteca. Baixe e execute o arquivo.
- Você também pode instalar o VS Code para executar os comandos com mais facilidade.
- Faça também o download da pasta de exemplos de uso do Puppeteer e extraia o zip.
- Agora, no VS Code, abra a pasta que você baixou acima em ‘Open Folder…’:
- Abra o terminal de comandos em ‘New Terminal’:
- E então você verá o terminal na pasta examples-master:
- Então, no terminal, execute «npm i» para instalar o package.json:
- Por fim, execute o script com a URL que deseja testar como parâmetro, conforme coloquei no exemplo abaixo:
- Pronto! Pode demorar um pouquinho, mas quando terminar a execução, você verá uma mensagem no terminal mais ou menos assim, que informa se a página teve sucesso no teste ou se falhou.
Se notar que não está na pasta correta, pode executar o comando ‘cd’ e o caminho da pasta correta, no meu caso seria:
C:\Users\User\examples-master> cd C:\Users\User\examples-master
C:\Users\User\examples-master> npm i
Execute também o comando para checar a versão, para verificar se foi instalada:
C:\Users\User\examples-master> npm -v
C:\Users\User\examples-master> node lazyimages_without_scroll_events.js --url=https://www.searchenginejournal.com
Os resultados
E na pasta inicial, haverá um arquivo chamado ‘results’ com um html que mostrará os resultados do teste das duas renderizações, com e sem o scroll da página. Haverá também um arquivo page_diff.png com a diferença entre os dois testes.
O arquivo html retornará algo parecido com o screenshot abaixo, e você poderá dar uma olhada nas imagens que não puderam ser carregadas sem o scroll da página. Então, o que o puppeteer faz é carregar a página duas vezes, uma com e outra sem scrollar a página e comparar os elementos comuns e aqueles que não puderam ser carregados em uma das renderizações.
Por que é importante?
E por que fazer esse teste? Como o Puppeteer simula o carregamento de uma página no Chrome e o Googlebot usa Chromium para renderizar as páginas e indexá-las para os resultados da busca, estamos simulando o comportamento do robô. E como sabemos, o Googlebot não scrolla páginas, então você precisa ter certeza de que mesmo que o Google não requisite os elementos via scroll, ele conheça o seu conteúdo e as imagens estão abaixo da dobra.