Blog – ES

El performance y la velocidad de carga web son temas muy populares en SEO, principalmente después de la actualización de Google que ha empezado en junio de 2021. Con eso también quedaron famosos los Core Web Vitals, que son algunas señales de una buena experiencia de usuario en una página web.

Existen muchas maneras para optimizar las métricas de los Core Web Vitals. Puedes encontrar más información en estas documentaciones:

Optimizar LCP

Optimizar FID

Optimizar CLS

Una implementación muy común y recomendada para optimizar la métrica LCP es el recurso lazy load. Luego les explicaré de qué se trata. Pero la idea aquí es mostrarles cómo verificar esta implementación. Entonces, si sos también más o menos como yo, que se arriesga intentando hacer funcionar algunos scripts, aunque no seas desarrollador o desarrolladora, les mostraré algunos tips de cómo hacer pruebas de scroll para hacerle pruebas a tus páginas que contienen lazy load implementado.

¿Qué es Lazy Load?

Es una manera que les permite que, por ejemplo, las imágenes que están debajo del pliegue sean cargadas solamente cuando son solicitadas por los usuarios. Es decir que la página puede cargar más rápidamente porque no necesita traer todos los elementos a la vez. Ya que los usuarios pueden no llegar a solicitar aquella imagen, ¿por qué hacerlo ahora?

Ejemplos

Algunos ejemplos para implementar este recurso son de manera nativa, o usando una librería como «lazysizes.js».

Ejemplo Nativo: aplicar el atributo «loading» con el valor «lazy» en las imágenes que están below the fold (no aplicar en la imagen la cual el LCP es marcado):

<img src="imagen.jpg" loading="lazy" alt="..." width="400" height="200">

Ejemplo usando una biblioteca: agregar el scripten las páginas, aplicar la clase “lazyload” a las imágenes «below the fold», y cambiar el «src» para «data-src»:

<img data-src="imagen.jpg" class="lazyload" alt="..." width="400" height="200" />

¿Qué es Puppeteer?

¿Y ahora qué es Puppeteer en el título del texto? Es una librería con la cual podés simular un navegador Chrome siendo un «headless». Es decir, podemos hacer comandos del navegador sin usar su interfaz.

¿Cómo utilizarlo?

1. 1. Primero tenés que tener instalado el Node.js porque Puppeteer está desarrollado con esa biblioteca. Bajar y ejecutar el archivo descargado.
   2. ambién podés instalar el VS Codepara ejecutar los comandos más fácilmente.
   3. Haz también el download de la carpeta de ejemplos de uso de Puppeteer y extraiga el zip.

1. 1. Ahora, en el VS Code, abra la carpeta que descargaste arriba en ‘Open Folder…’:

1. 1. Abra el terminal de comandos en ‘New Terminal’:

1. 1. Y luego vas a ver el terminal en la carpeta examples-master:

Si notas que no estás en la carpeta correcta, podés ejecutar el comando ‘cd’ y el camino de la carpeta correcta, en mi caso sería:

C:\Users\User\examples-master> cd C:\Users\User\examples-master

1. 1. Entonces en el terminal, ejecutar «npm i» para instalar el package.json:

C:\Users\User\examples-master> npm i

Ejecutar también el comando para verificar la versión, para comprobar que se instaló:

C:\Users\User\examples-master> npm -v

1. 1. Por fin, ejecutar el script con la URL que quieras probar como parámetro, como puse en el ejemplo abajo:

C:\Users\User\examples-master> node lazyimages_without_scroll_events.js --url=https://www.searchenginejournal.com

1. 1. ¡Listo! Puede tardar un poquito, pero cuando termine de ejecutar, en el terminal verás un mensaje más o menos así, que indica si la página tuvo éxito en la prueba o si ha fallado.

Resultados

En la carpeta inicial, habrá un archivo llamado ‘results’ con un html que te va a mostrar los resultados de la prueba de las dos renderizaciones, con y sin el scroll de la página. También habrá un archivo page_diff.png con la diferencia entre las dos pruebas.

El archivo html te va a retornar algo como el screenshot abajo, y vas a poder echar un vistazo en las imágenes que no pudieron ser cargadas sin el scroll de la página. Entonces, lo que hace el Puppeteer es cargar la página dos veces, una con y una sin scroll y comparar los elementos comunes y los que no pudieron ser cargados en una de renderizaciones.

¿Por qué hacer esta prueba es importante?

El Puppeteer simula una carga de página en Chrome y Googlebot usa Chromium para renderizar las páginas e indexarlas para los resultados de búsqueda. Con esta prueba estamos simulando el comportamiento del robot y cómo sabemos, Googlebot no scrolla páginas. Luego tenés que asegurarte que aunque Google no llegue a solicitar los elementos vía scroll, él pueda conocer el contenido y las imágenes que tenés below the fold.

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:

Otimizar LCP

Otimizar FID

Otimizar CLS

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?

1. Primeiro você precisa ter o Node.js instalado porque o Puppeteer é desenvolvido com essa biblioteca. Baixe e execute o arquivo.
2. Você também pode instalar o VS Code para executar os comandos com mais facilidade.
3. Faça também o download da pasta de exemplos de uso do Puppeteer e extraia o zip.



4. Agora, no VS Code, abra a pasta que você baixou acima em ‘Open Folder…’:



5. Abra o terminal de comandos em ‘New Terminal’:



6. E então você verá o terminal na pasta examples-master:



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

7. Então, no terminal, execute «npm i» para instalar o package.json:

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

8. Por fim, execute o script com a URL que deseja testar como parâmetro, conforme coloquei no exemplo abaixo:

C:\Users\User\examples-master> node lazyimages_without_scroll_events.js --url=https://www.searchenginejournal.com

9. 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.



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.