Avaliando PageSpeed ​​Insights do Google

Se você é proprietário de uma empresa, está interessado em obter melhores classificações de pesquisa para seu site. Se você for um desenvolvedor, precisará atender às necessidades do cliente e criar um site capaz de classificar bem. O Google considera centenas de características quando determina a ordem dos sites em sua Search Engine Ranking Page (SERP).

A velocidade da página foi oficialmente citada como um importante atributo de classificação em meados de 2018. Neste artigo, explicaremos as pontuações de desempenho às quais os proprietários de empresas devem prestar atenção: PageSpeed ​​Insights. Iremos aprofundar alguns detalhes técnicos que ajudarão os desenvolvedores de software a fazer melhorias em casos complicados, como aqueles relacionados a aplicativos de página única.

Por que o teste do PageSpeed ​​Insights do Google é importante

Quando o Google introduziu o PageSpeed ​​Tools em 2010, a maioria dos proprietários de sites se familiarizou com ele. Aqueles que não o fizeram devem abrir o PageSpeed ​​Insights para verificar seus sites.

O serviço fornece detalhes sobre o desempenho de um site em navegadores para desktop e dispositivos móveis. É fácil perder o fato de que você pode alternar entre eles usando as guias Mobile e Desktop na parte superior da análise:

Como os dispositivos móveis são compactos e visam preservar a vida útil da bateria, seus navegadores da Web tendem a apresentar desempenho inferior aos dispositivos que executam sistemas operacionais de desktop, portanto, espere que a pontuação do desktop seja maior.

Grandes empresas de tecnologia não marcarão no vermelho em nenhuma área, mas sites menores com orçamentos mais apertados podem. Os proprietários de empresas também podem executar o PageSpeed ​​Insights nos sites de seus concorrentes e comparar os resultados com os seus próprios para ver se precisam investir na melhoria do desempenho.

Qual pontuação é suficiente para passar na avaliação do PageSpeed?

O PageSpeed ​​usa métricas do Core Web Vitals para fornecer uma avaliação de aprovação/reprovação.

Esta ferramenta tem três pontuações:

1. O PageSpeed ​​exibe com destaque a pontuação de desempenho em um círculo colorido na seção Diagnosticar problemas de desempenho. É calculado usando as máquinas virtuais integradas do PageSpeed ​​com características que correspondem ao dispositivo móvel ou desktop médio. Lembre-se de que esse valor é para carregamento de página e para a máquina virtual do PageSpeed ​​e não é considerado pelo mecanismo de pesquisa do Google.Essa figura é útil quando os desenvolvedores implementam alterações em um site, pois permite verificar o efeito das alterações no desempenho. No entanto, o mecanismo de busca do Google considera apenas as pontuações detalhadas.
2. As pontuações detalhadas para uma página específica — e para aquelas que o PageSpeed ​​considera semelhantes à página analisada — são calculadas a partir de estatísticas que os navegadores Chrome coletam em computadores reais e enviam ao Google. Isso significa que o desempenho no Firefox, Safari e outros navegadores não-Chromium não é levado em consideração.
3. O resumo de todas as páginas do site é obtido da mesma forma que a pontuação de página única. Para acessá-lo, selecione a guia Origem em vez da guia Este URL. A URL listada na barra de guias será diferente, pois o Origin exibirá a página principal do site (somente domínio).

O Google atualiza constantemente a lista de métricas consideradas pelo PageSpeed, portanto, a melhor fonte do que é importante é a seção Experience / Core Web Vitals no Google Search Console, supondo que você já tenha adicionado seu site lá.

Para passar na Avaliação do Core Web Vitals, todas as pontuações devem ser verdes:

Para que os valores sejam verdes, a página precisa pontuar pelo menos 75% no teste e muitos usuários precisam experimentar valores iguais ou melhores. O limiar difere para cada pontuação e é significativamente maior para FID.

Para entender melhor os valores, clique no título da pontuação:

Isso vincula a uma postagem de blog explicando os limites para a categoria especificada com mais detalhes.

Os dados são acumulados por 28 dias e há duas outras diferenças importantes em relação ao que os usuários reais podem estar enfrentando:

1. O desempenho de dispositivos reais e as velocidades da Internet variam, portanto, esse teste produz resultados diferentes dos resultados da máquina virtual do PageSpeed.
2. As classificações detalhadas são calculadas durante toda a vida útil da página, tomando os piores valores de cada intervalo de cinco segundos em que a página é aberta.

Se muitos dos usuários de um site moram em regiões com acesso lento à Internet e usam dispositivos desatualizados ou com baixo desempenho, a diferença pode ser surpreendente. Esta não é uma das recomendações de melhoria do PageSpeed ​​Insights. À primeira vista, não é óbvio como lidar com esse problema, mas tentaremos explicar mais tarde.

Como melhorar as pontuações usando as recomendações do PageSpeed ​​Insights

A parte principal da classificação vem de como a maioria dos usuários abre a página. Apesar do fato de que nem todos os usuários visitam um site por um longo período de tempo, e a maioria visita um site ocasionalmente, todos os usuários são considerados nas classificações, portanto, melhorar a velocidade de carregamento da página, que afeta a todos, é um bom ponto de partida.

Podemos encontrar recomendações na seção Oportunidades abaixo dos resultados da avaliação.

Podemos expandir cada item e obter recomendações detalhadas para melhorias. Há muita informação, mas aqui estão as dicas mais básicas e importantes:

• Melhore a velocidade de resposta do servidor. Por exemplo, se você estiver usando hospedagem compartilhada, atualize seu plano ou migre para um servidor virtual privado (VPS) ou até mesmo um servidor dedicado. Além disso, nem todos os hosts são iguais. Tente escolher uma hospedagem confiável com boas garantias de hardware e tempo de atividade.
• Reduza o volume de tráfego necessário para abrir seu site. Para conseguir isso, você pode substituir as imagens por outras otimizadas: alterar seu formato, ajustar a resolução e compactação, substituir imagens animadas por estáticas, se necessário, etc. Os sistemas populares de gerenciamento de conteúdo têm plug-ins que simplificam esse processo.
• Cache mais dados. A maneira mais simples de fazer isso é usar uma rede de entrega de conteúdo (CDN) como a Cloudflare para conteúdo estático (imagens, estilos, scripts, páginas que não mudam). Você pode configurar regras de cache para otimizar o desempenho.

Agora vamos dar uma olhada em fatores mais complicados, onde um programador experiente pode ajudar.

Como depurar pontuações durante a vida útil da página

Conforme mencionado, o Google Search Console considera as pontuações médias obtidas de navegadores baseados em Chromium nos últimos 28 dias e também inclui valores para toda a vida útil da página.

A incapacidade de ver o que acontece durante a vida útil da página é um problema. A máquina virtual do PageSpeed ​​não pode explicar o desempenho da página depois de carregada e os usuários interagindo com ela, o que significa que os desenvolvedores de sites não terão acesso a recomendações de melhorias.

A solução é incluir a biblioteca Google Chrome Web Vitals na versão do desenvolvedor de um projeto de site para ver o que está acontecendo enquanto um usuário interage com a página.

Várias opções de como incluir esta biblioteca estão em seu arquivo README.md no GitHub. A maneira mais simples é adicionar o seguinte script. Ele é ajustado para exibir valores ao longo do tempo de vida da página no modelo principal <head>:

<script>
    (function() {
        var script = document.createElement('script');
        script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js';
        script.onload = function() {
            // When loading `web-vitals` using a classic script, all the public
            // methods can be found on the `webVitals` global namespace.
            webVitals.getCLS(console.log, true); // CLS supported only in Chromium.
            webVitals.getLCP(console.log, true); // LCP supported only in Chromium.
            webVitals.getFID(console.log, true);
            webVitals.getFCP(console.log, true);
            webVitals.getTTFB(console.log, true);
        }
        document.head.appendChild(script);
    }())
</script>

Observe que o cálculo Cumulative Layout Shift (CLS) e Largest Contentful Paint (LCP) está disponível apenas para navegadores baseados em Chromium, incluindo Chrome, Opera, Brave (desative Brave Shields para fazer a biblioteca funcionar) e a maioria dos outros navegadores modernos, exceto Firefox , que é baseado em um mecanismo Mozilla e no navegador Safari da Apple.

Depois de adicionar o script e recarregar a página, abra as ferramentas de desenvolvedor do navegador e alterne para a guia Console.

Para ver como esses valores são calculados para a versão móvel, alterne para o dispositivo móvel usando a barra de ferramentas Dispositivo. Para acessá-lo, clique no botão Toggle Device Toolbar nas ferramentas de desenvolvedor do seu navegador.

Isso ajudará a identificar problemas. Expandir a linha no console mostrará detalhes sobre o que acionou a mudança de pontuação.

Na maioria das vezes, o aviso automático para outras pontuações é suficiente para se ter uma ideia de como melhorá-las. No entanto, o CLS muda depois que a página é carregada com interações do usuário e simplesmente pode não haver recomendações, especialmente para aplicativos de página única. Você pode ver uma pontuação perfeita de 100 na seção Diagnosticar problemas de desempenho, mesmo que sua página não passe na avaliação dos fatores considerados pelo mecanismo de pesquisa.

Para aqueles de nós que lutam com o CLS, isso será útil. Expanda o registro de log e, em seguida, entradas, entrada específica, fontes, fonte específica e compare currentRectcom previousRect:

Agora que podemos ver o que mudou, podemos identificar algumas maneiras de corrigi-lo.

Reduzindo a mudança cumulativa de layout

De todas as pontuações, o CLS é o mais difícil de entender, mas é crucial para a experiência do usuário. A mudança de layout ocorre quando um elemento é adicionado ao modelo de objeto do documento (DOM) ou o tamanho ou a posição de um elemento existente é alterado. Isso faz com que os elementos abaixo desse elemento mudem e o usuário sinta que não pode controlar o que está acontecendo, fazendo com que saia do site .

É relativamente fácil lidar com isso em uma página HTML simples. Defina os atributos de largura e altura das imagens para que o texto abaixo delas não seja deslocado durante o carregamento. Isso provavelmente resolverá o problema.

Se sua página for dinâmica e os usuários trabalharem com ela como em um aplicativo, considere as seguintes etapas para resolver problemas de CLS:

1. Defina a página para mostrar o conteúdo 500 milissegundos depois que o usuário clicar em um botão ou link sem acionar o CLS.
2. Altere os parâmetros que não fazem com que outros elementos DOM mudem: plano de fundo, cor, etc.
3. Certifique-se de que outros elementos não se desloquem ao alterar o tamanho ou a posição de um elemento.

Recomendações mais detalhadas estão disponíveis na página do Google Developers Optimize CLS.

Como 500 milissegundos podem reduzir o CLS

Para ilustrar como usar o limite de 500 milissegundos, usaremos um exemplo envolvendo um upload de imagem.

Normalmente, quando um usuário carrega um arquivo, o script adiciona um <img>elemento ao DOM e, em seguida, o navegador do cliente baixa a imagem do servidor. A busca de uma imagem de um servidor pode levar mais de 500 milissegundos e pode causar uma mudança de layout.

Mas há uma maneira de obter a imagem mais rapidamente, pois ela já está no computador cliente e, assim, criar o <img>elemento antes que o prazo de 500 milissegundos termine.

Aqui está um exemplo universal de ECMAScript puro sem bibliotecas que funcionarão na maioria dos navegadores modernos:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <input type="file" id="input">
    <img id="image">
<script>
document.getElementById('input').addEventListener('change', function() {
    var imageInput = document.getElementById('input');
    if (imageInput.files && imageInput.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (event) {
            var imageElement = document.getElementById('image');
            imageElement.setAttribute('src', event.target.result);
        }
        fileReader.readAsDataURL(imageInput.files[0]);
    }
});
</script>
</body>
</html>

Como vimos anteriormente, corrigir esses tipos de problemas pode exigir agilidade mental. Com dispositivos móveis, especialmente os mais baratos, e com internet móvel lenta, a arte dos anos 90 de otimização de desempenho se torna útil e abordagens de programação web antigas podem inspirar nossa técnica. Ferramentas modernas de depuração do navegador ajudarão com isso.

Atualizar o Google Search Console

Depois de encontrar e eliminar problemas, o mecanismo de pesquisa do Google pode levar algum tempo para wp-signup.php as alterações. Para atualizar os resultados um pouco mais rápido, informe ao Google Search Console que você corrigiu os problemas.

Selecione a página em que você está trabalhando usando a caixa de propriedades de pesquisa no canto superior esquerdo. Em seguida, navegue até Core Web Vitals no menu de hambúrguer à esquerda:

Clique no botão Abrir relatório no canto superior direito do relatório móvel ou desktop. (Se você teve problemas com ambos, lembre-se de repetir as mesmas ações para o segundo relatório mais tarde.)

Em seguida, vá para a seção Detalhes no gráfico e clique na linha com o aviso de validação com falha.

Em seguida, clique no botão Ver detalhes para este problema.

E, finalmente, clique em Iniciar nova validação.

Não espere resultados imediatos. A validação pode levar até 28 dias.

A otimização é uma luta contínua

A otimização de SEO é um processo contínuo, e o mesmo vale para a otimização de desempenho. À medida que seu público cresce, os servidores recebem mais solicitações e as respostas ficam mais lentas. O aumento da demanda geralmente significa que novos recursos são adicionados ao seu site e podem afetar o desempenho.

Quando se trata do aspecto custo/benefício da otimização de desempenho, é necessário encontrar o equilíbrio certo. Os desenvolvedores não precisam atingir os melhores valores em todos os sites, o tempo todo. Concentre-se no que causa os problemas de desempenho mais significativos; você obterá resultados mais rapidamente e com menos esforço. As grandes corporações podem investir muitos recursos e obter todas as pontuações, mas esse não é o caso das pequenas e médias empresas. Na realidade, uma pequena empresa provavelmente só precisa igualar ou superar o desempenho de seus concorrentes, não de pesos pesados ​​​​da indústria como a Amazon.

Os proprietários de empresas devem entender por que a otimização do site é fundamental, quais aspectos do trabalho são mais importantes e quais habilidades buscar nas pessoas que contratam para fazê-lo. Os desenvolvedores, por sua vez, devem manter o desempenho em mente o tempo todo, ajudando seus clientes a criar sites que não apenas pareçam rápidos para os usuários finais, mas também tenham uma boa pontuação no PageSpeed ​​Insights.