Recursos do Google PageSpeed: melhor classificação do site e classificação da pesquisa

O material, cuja tradução publicamos hoje, é dedicado à classificação de velocidade do site, que pode ser calculada usando o Google PageSpeed ​​Insights.

Não é segredo que a velocidade de um site em nossos dias se tornou uma de suas características mais importantes. Quanto mais rápido o site carrega e se prepara para o trabalho, maior pode ser a renda que ele traz para o proprietário. Acelerar um site significa reduzir o número de usuários que, por mal visitarem o site, o deixam, cansado de esperar pelo download de seus materiais. De particular importância para o desempenho do site é o fato de que agora os indicadores do Google PageSpeed ​​são usados ​​como um dos fatores que classificam os sites nos resultados de pesquisa. Como resultado, muitas organizações hoje prestam muita atenção à velocidade de seus sites.

Alterações nos algoritmos de classificação do site

No ano passado, o Google fez duas grandes mudanças em seus algoritmos de indexação e classificação de sites.

• Em março, a indexação passou a ser baseada na versão móvel da página, e não no desktop.
• Em julho, o algoritmo de classificação do SEO foi atualizado . Ao calculá-lo para páginas para celular e publicidade, eles começaram a usar a classificação de velocidade da página.

Esses fatos nos permitem tirar as seguintes conclusões:

• A velocidade da versão móvel do site afetará sua classificação geral de SEO.
• Se as páginas do site forem carregadas lentamente, isso reduzirá o índice de qualidade do anúncio e os anúncios custarão mais.

Eis o que o Google diz sobre isso: “Sites mais rápidos não apenas aprimoram a experiência do usuário; dados recentes mostram que aumentar a velocidade do site também leva a uma redução no custo de seu suporte. Nós realmente apreciamos a velocidade. O mesmo pode ser dito sobre nossos usuários. Por isso, decidimos que, ao calcular os indicadores de classificação de pesquisa, também levaremos em consideração a velocidade do site. ”

Para entender como essas mudanças afetam nossos projetos em termos de otimização de desempenho, precisamos entender as tecnologias subjacentes à avaliação da velocidade do site. O PageSpeed ​​5.0 é uma versão totalmente revisada deste sistema. Agora, ele é baseado no Lighthouse e no CrUX (Chrome User Experience Report).

Além disso, esta atualização trouxe um novo algoritmo de pontuação, o que complica bastante a tarefa de obter uma pontuação alta no PageSpeed.

O que mudou no PageSpeed ​​5.0?

Antes da versão 5.0, a ferramenta PageSpeed ​​verificava a página, analisando sua conformidade com um conjunto de regras heurísticas. Se houver imagens grandes e não compactadas na página, o PageSpeed ​​poderá aconselhar o desenvolvedor da Web a compactar essas imagens. Sem cabeçalhos de cache? O sistema poderia aconselhá-los a adicionar.

As recomendações estavam vinculadas a essas verificações de página. Seguir as recomendações pode levar a um melhor desempenho da página. Mas as regras heurísticas eram bastante superficiais, não tinham como objetivo explorar quais impressões a página de carregamento e renderização de uma página causaria a um visitante real de um site.

No PageSpeed ​​5.0, as páginas são carregadas em um navegador Chrome real, que o Lighthouse controla. O Lighthouse registra as métricas obtidas no navegador, aplica o modelo de pontuação a elas e exibe uma pontuação geral de desempenho. Recomendações para melhorar o desempenho são dadas com base nos pontos marcados na página estudada para indicadores individuais.

O Lighthouse, como o PageSpeed, possui um sistema de classificação de desempenho do site. No PageSpeed ​​5.0, a avaliação de desempenho é obtida diretamente do Lighthouse. A pontuação de desempenho gerada pelo PageSpeed ​​agora é a mesma pontuação que o Lighthouse produz.


A classificação de desempenho do PageSpeed ​​é baseada na classificação gerada pelo Lighthouse

Agora que sabemos de onde vem a pontuação do PageSpeed, vamos falar sobre como essa pontuação é calculada e o que pode ser feito para melhorar a velocidade do site.

O que é o Google Lighthouse?

O Lighthouse é um projeto de código aberto, gerenciado por uma equipe especial, escolhida entre os desenvolvedores do Google Chrome. Nos últimos anos, o Lighthouse se tornou a ferramenta gratuita padrão para analisar o desempenho do site.

O Lighthouse usa o Protocolo de depuração remota do Chrome (Protocolo de depuração remota do Chrome) para ler informações sobre solicitações de rede, medir o desempenho do código JavaScript e verificar a conformidade com os padrões de acessibilidade do conteúdo da página. Essa ferramenta mede indicadores de tempo focados na percepção da página pelos usuários. Entre eles, por exemplo, Primeira pintura com conteúdo , Tempo para interativo e Índice de velocidade.

Se você está interessado em Lighthouse - dê uma olhada neste material do repositório oficial do projeto, dedicado à descrição geral de sua arquitetura.

Cálculo da classificação de desempenho do site em Lighthouse

Como parte de um estudo de desempenho da página, o Lighthouse escreve muitas métricas que se concentram em avaliar o que o usuário vê e o que experimenta ao trabalhar com a página. Aqui estão seis métricas usadas para obter uma pontuação geral de desempenho:

• Tempo para interação (TTI, tempo de download para interação).
• Índice de velocidade.
• Primeira pintura com conteúdo (FCP, Tempo de download do primeiro conteúdo).
• Primeira CPU inativa.
• Primeira pintura significativa (FMP, tempo de download para conteúdo suficiente).
• Latência de entrada estimada.

Cada um desses indicadores é avaliado em uma escala de 0 a 100. A avaliação é realizada obtendo os percentis 75 e 95 para páginas móveis do arquivo HTTP e usando a função log normal .

Seguindo esse algoritmo e considerando os dados usados ​​para calcular o TTI, você pode ver que se a página se tornar “interativa”, adequada para a interação do usuário, em 2,1 segundos, o TTI será igual a 92/100.


TTI

Depois que cada um dos indicadores é calculado, um determinado peso é atribuído a ele, que é usado como um modificador no cálculo do indicador total. Aqui estão os pesos atribuídos às várias métricas.

Os pesos indicam como cada um dos indicadores afeta a experiência do usuário móvel com a página.

No futuro, esse conjunto poderá ser expandido para incluir indicadores extraídos do conjunto de dados do Relatório de experiência do usuário do Google Chrome relacionado às percepções dos sites pelos usuários.

Você pode estar interessado em aprender como o uso de pesos afeta a classificação final de desempenho. Se assim for, dê uma olhada nesta tabela criada pela equipe do Farol. Depois de analisá-lo, você pode entender melhor esse processo.


Fragmento de uma tabela demonstrando o cálculo da classificação de desempenho da página

Se você alterar a métrica interactive no exemplo acima (é o que chamamos de TTI aqui) de 5 segundos para 17 segundos (ou seja, para o nível da TTI média global para páginas para celular), a classificação da página cairá para 56% ( isto é - ela receberá 56 pontos em 100 possíveis).

Se você definir o first-contentful-paint indicador de first-contentful-paint para 17 segundos, a classificação cairá para 62%.

Como resultado, podemos concluir que a métrica TTI tem o maior impacto na classificação final do site. Segue-se que, para obter uma página PageSpeed ​​altamente classificada, você precisa demonstrar uma TTI decente.

Melhoria TTI

Se considerarmos amplamente o problema de melhorar a ITT, podemos dizer que existem dois fatores que afetam fortemente esse indicador:

• A quantidade de código JavaScript carregado na página.
• O tempo necessário para concluir várias tarefas JavaScript no encadeamento principal.

Aqui você pode encontrar detalhes sobre o TTI, mas se desejar, rapidamente, sem a necessidade de pesquisas adicionais, melhorar o TTI do seu site, recomendamos a redução da quantidade de código JavaScript.

Sempre que possível, remova o código JavaScript não utilizado ou tente garantir que a página carregue apenas os scripts usados ​​nesta página. O cumprimento desta recomendação pode significar eliminar os polyfills antigos ou substituir as bibliotecas de terceiros por alternativas mais compactas e modernas.

É importante lembrar que o que é chamado de " preço do JavaScript " não é apenas o tempo necessário para o download do código. O navegador precisa descompactar, analisar, compilar e, finalmente, executar o código JavaScript carregado. Todas essas operações podem levar um tempo considerável. Especialmente em dispositivos móveis.

Entre as medidas eficazes para reduzir a quantidade de código JS usado pelas páginas, pode-se observar o seguinte:

• Análise dos polyfills usados ​​e rejeição daqueles que não são mais necessários para o seu público.
• Descobrir o "custo" de cada uma das bibliotecas de terceiros usadas. Para aprender sobre o tamanho das bibliotecas usadas no projeto, você pode usar ferramentas como o webpack-bundle-analyzer e o source-map-explorer .
• As ferramentas modernas de JavaScript (como o webpack) podem dividir aplicativos JS grandes em conjuntos de pequenos pacotes configuráveis, que são carregados automaticamente conforme necessário. Em particular, quando um usuário passa de página para página de um site. Essa abordagem para otimizar o desempenho do site é conhecida como divisão de código . Seu uso tem um efeito muito bom no TTI.
• Use operadores de serviço que armazenam em cache o bytecode resultante da análise e compilação de scripts. Se você pode incluir esses mecanismos de armazenamento em cache no seu projeto, os recursos do sistema dos visitantes do site serão gastos na análise e compilação do código somente quando você acessa o recurso pela primeira vez. Em visitas repetidas ao site, os materiais necessários serão retirados do cache.

Monitoramento TTI

Para explorar com êxito como o site é percebido pelos usuários, recomendamos o uso de sistemas de monitoramento de desempenho do site, como o Caliber . Em particular, estamos falando do fato de que os sites são testados em pelo menos dois dispositivos - em um computador desktop rápido e em um telefone celular, cujo desempenho é no nível de dispositivos lentos da classe média.

Com essa abordagem, você terá dados para a melhor opção para trabalhar com seu site e para a pior. Ao mesmo tempo, você terá que se acostumar com o fato de os visitantes do seu site não usarem os mesmos dispositivos poderosos que sua equipe usa.

Perfil manual cuidadoso

Para obter o máximo do perfil de desempenho do código JS, as páginas de teste são testadas em dispositivos móveis com lentidão especialmente reduzida. Se você tem um telefone antigo na gaveta da mesa, a realização dessa idéia pode proporcionar uma maravilhosa segunda vida.

Um bom substituto para dispositivos reais são os recursos das Ferramentas para Desenvolvedor do Chrome. Aqui está o material para criação de perfil do React Applications usando essas ferramentas.

Outras métricas

Métricas como Índice de velocidade, Primeira pintura com conteúdo e Primeira pintura significativa são baseadas em como o navegador renderiza a página. Eles são influenciados por fatores semelhantes aos de que já falamos. O impacto sobre esses fatores geralmente leva a uma melhoria em todos esses indicadores.

Objetivamente, melhorar essas métricas é mais fácil que o TTI. O fato é que a base para seu cálculo é a velocidade de renderização da página pelo navegador. Essas métricas podem ser aprimoradas seguindo exatamente as diretrizes fornecidas após a análise da página usando o Lighthouse.

Se você não estiver pré-carregando as fontes ou otimizando a página, levando em consideração as características das consultas críticas, poderá começar a melhorar o desempenho de renderização do seu site nessas duas direções. Neste artigo, você pode encontrar informações detalhadas sobre como o navegador carrega e exibe os recursos críticos usados ​​na formação de páginas da web.

Resultados: no monitoramento de sites e na melhoria tangível de seu trabalho

O console de pesquisa do Google atualizado, o Lighthouse e o PageSpeed ​​Insights são excelentes ferramentas que permitem avaliar instantaneamente o desempenho geral do site. No entanto, eles não são adequados para equipes que precisam monitorar e melhorar continuamente o desempenho de seus projetos.

O monitoramento contínuo do desempenho é uma parte essencial de um fluxo de trabalho que visa manter constantemente o desempenho do site em um nível alto. Com essa abordagem, a equipe do projeto aprende instantaneamente sobre problemas de desempenho. Com o teste de desempenho manual, a dispersão inesperada dos resultados é possível. Como resultado, sem criar um ambiente de teste especializado, é quase impossível testar o desempenho do site usando diferentes dispositivos ou simular outros parâmetros variáveis ​​dos sistemas de usuários em potencial.

A velocidade da página se tornou um fator crítico no ranking de SEO da página. Essa afirmação é especialmente forte hoje em dia, quando quase 50% do tráfego da Web é gerado por dispositivos móveis.

Para impedir que seu site perca sua posição nos resultados de pesquisa, tente usar versões modernas de ferramentas para analisar o desempenho de suas páginas mais importantes e manter sua velocidade em um nível adequado a você.

Caros leitores! Você otimiza seus projetos da web levando em consideração a melhoria dos indicadores que influenciam as notas do Google PageSpeed?