Como analisar resultados do Google PageSpeed ​​Insights

Como o Google vai dar um impulso de classificação para sites que são rápidos, você provavelmente está interessado em entender mais sobre os insights do Google PageSpeed?

…E não estou surpreso porque é confuso!

Este artigo vai ajudar.

Por que a velocidade da página do site é importante?

O Google quer fornecer a melhor experiência de usuário possível aos usuários.

Se o seu site for lento, isso frustrará os usuários e criará uma experiência ruim para o usuário. É simples assim. O desempenho impacta a experiência.

O Google anunciou recentemente que os principais web vitals serão usados ​​como parte de seu algoritmo de classificação em 2021. Esses principais web vitals são indicadores de velocidade e da rapidez com que as pessoas podem interagir com sua página.

Basicamente para esta tabela abaixo você não pode ser 'vermelho'

O que é o Google PageSpeed ​​Insights?

É uma ferramenta gratuita fornecida pelo Google que permite inserir um URL de página da web e executar rapidamente um teste para verificar as diversas métricas relacionadas ao desempenho.

A ferramenta então dá à sua página uma pontuação que varia de 0 a 100 pontos. A pontuação não é realmente sobre a velocidade. Você pode obter uma pontuação melhor se tiver usado as recomendações típicas do Google sobre como melhorar a velocidade.

Ele também mostra os parâmetros exatos que estão deixando sua página mais lenta, bem como sugestões sobre como melhorá-la.

É aqui que as coisas ficam técnicas e os resultados um pouco difíceis de entender.

Como você interpreta os resultados?

A primeira coisa que você vê depois de executar um teste é a pontuação de desempenho (desktop e mobile) para a página analisada.

Este será um número entre 0 e 100.

• 0 a 49 – Isso é ruim, você não quer que sua pontuação seja 49 ou menos
• 50 a 89 – Isso é bom, mas há espaço para melhorias
• 90 a 100 – Se você está nessa escala, está nos bons livros.

Ao rolar para baixo, você verá o que está causando uma pontuação alta ou baixa:

Nota: Veja os indicadores de cores antes de cada seção:

• Verde significa rápido
• Laranja significa moderado
• Vermelho significa lento

Isto é o que cada uma dessas seções significa:

Primeiro conteúdoPintura completa

Este é o tempo que leva da navegação para uma página do navegador até o momento em que o conteúdo começa a ser renderizado.

Basicamente, é um indicador de que a página está começando a carregar.

Por exemplo, pode ser apenas uma mudança de cor que é a cor de fundo da página, uma imagem exibida ou um pedaço de texto.

Isso é importante porque, quando um usuário vê alguma ação, é mais provável que espere até que a página seja totalmente carregada.

Diretriz:

Tempo para interativo

Este parâmetro mostra a rapidez com que uma página se torna interativa.

Isso significa página mostrando elementos suficientes na tela para que os usuários possam realmente interagir com ela, por exemplo, clicar em um botão de menu.

Às vezes, os sites podem se concentrar na visibilidade, ou seja, exibir tudo antes que você possa interagir com o conteúdo, o que pode ser frustrante para o usuário.

Diretriz:

Tempo total de bloqueio

Há uma lacuna entre o momento em que o visitante do site vê o conteúdo na tela e o momento em que ele pode interagir com ele.

Este é o tempo total de bloqueio!

É bom saber se as pessoas não podem fazer coisas como clicar no mouse, tocar na tela ou pressionar palavras-chave antes que o site seja interativo.

Tarefas longas são tarefas que bloqueiam você por mais de 50ms.

Qualquer coisa acima de 50ms é considerado tempo de bloqueio.

Se não houver tarefas longas, você verá 0 tempo de bloqueio, que é o que você vê nas estatísticas acima.

Mudança de layout cumulativa

Uma mudança de layout ocorre quando um elemento visual é exibido na tela, mas depois se move.

Por exemplo, você está lendo as notícias e há uma mudança de layout para que o local onde o artigo de notícias está alterado.

Este é um comportamento inesperado da perspectiva de um usuário.

Quanto maior a pontuação, pior é.

Índice de velocidade

Isso é complicado de entender, mas valioso.

Então imagine 2 sites que carregaram em 1,5 segundos.

Se você navegasse nos 2 sites mostrados na imagem acima, qual deles carregaria mais rápido?

Ambos totalmente carregados em 1,5 segundos, mas como o primeiro site começou a mostrar alguns elementos mais cedo, parecia ser mais rápido para o usuário.

Se você apenas medir o tempo para carregar, eles são os mesmos.

O índice de velocidade é uma pontuação calculada com base em quão 'rápido' um site carrega totalmente.

Uma gravação de vídeo da carga é usada para mostrar visualmente quando os bits são carregados.

Em vários intervalos, a quantidade de conteúdo visível na tela (acima da dobra) é comparada ao conteúdo exibido em um site totalmente carregado para calcular a porcentagem de conteúdo exibida naquele momento específico.

Este processo é repetido algumas vezes.

O tempo é baseado apenas no que o usuário pode ver na tela (a viewport). Não importa o que está abaixo da dobra.

Então... é bom tentar com diferentes viewports.

Se você tiver 2 sites e um mostrar elementos visuais antes do outro, terminará com uma pontuação de índice de velocidade mais baixa.

Quanto mais baixo melhor.

Maior pintura de conteúdo

Este é o tempo que leva para o maior elemento da página ser totalmente renderizado.

À medida que a página carrega, o primeiro elemento se torna o maior elemento, mas ele é substituído à medida que elementos maiores são adicionados.

O último elemento de uma página pode ser o maior elemento da página (por exemplo, uma imagem grande) ou pode não ser.

Nota: não estamos falando de quanto espaço ocupa na tela.

Aqui estão 2 exemplos.

O tempo de quando o site começou a ser exibido até o momento em que a última imagem da página foi exibida seria considerada a maior pintura de conteúdo. Isso ocorre porque a imagem ocupa mais espaço na página!

Mas…

No caso abaixo, a imagem do 'Instagram' foi a maior imagem exibida, portanto, a maior pintura de conteúdo é quando a penúltima tela foi carregada.

A última tela é descontada. Tudo o que foi adicionado a essa tela foi o 'botão Google play' que era uma imagem menor que a do 'Instagram'.

De acordo com o Google, se você deseja fornecer uma boa experiência ao usuário, o LCP deve acontecer dentro de 2,5 segundos após o início do carregamento da página.

Diretriz:

Oportunidades

A seção Oportunidades mostra as sugestões que podem ajudar a melhorar o tempo de carregamento da página.

Cada sugestão também mostra a redução estimada no tempo de carregamento da página se você implementou a recomendação.

Diagnóstico

O diagnóstico destaca as práticas recomendadas no desenvolvimento da Web que você deve considerar a implementação.

No entanto, mesmo que você faça essas melhorias, elas não afetarão diretamente a pontuação de desempenho da sua página.

Resumo

Melhorar a velocidade do seu site tem tudo a ver com fornecer aos visitantes uma experiência melhor. Ter um site que carrega rapidamente deixa os usuários e os mecanismos de pesquisa mais felizes, mas também afeta sua capacidade de converter visitantes em clientes.

Uma ferramenta como o Google PageSpeed ​​Insights é incrivelmente útil porque mostra por onde começar e quais problemas focar para aumentar o desempenho do seu site.

Espero que este artigo tenha ajudado você a entender como essa ferramenta funciona e o que os resultados do teste realmente significam para que você possa começar a otimizar suas páginas da web para criar uma experiência incrível para seus visitantes.