Experiência na página do Google: atualização de classificação

Este artigo foi publicado pela primeira vez em maio de 2020 e atualizado em abril de 2021.

Os estudos do Google e pesquisas do setor mostraram que os usuários preferem sites com uma ótima experiência de página. O Google está sempre analisando os fatores a serem considerados nos resultados de classificação, como velocidade de carregamento da página e compatibilidade com dispositivos móveis. A próxima atualização da experiência da página leva em consideração vários fatores que colocam o usuário na frente e no centro. Esses 'princípios vitais da web' ajudarão o Google a oferecer aos usuários o melhor conteúdo.

Experiência de página e principais Web Vitals

Os Core Web Vitals são um conjunto de métricas para ajudar os proprietários de sites a medir as dimensões da experiência do usuário, como tempo de carregamento, interatividade e estabilidade do conteúdo à medida que ele é carregado. O Google agora forneceu detalhes de uma próxima mudança de classificação de pesquisa que incorporará essas métricas de experiência na página.

Um novo sinal está sendo apresentado de que o Google diz que 'combina o Core Web Vitals com nossos sinais existentes de experiência de página para fornecer uma imagem holística da qualidade da experiência de um usuário em uma página da web'.

Essas mudanças estão sendo implementadas em junho de 2021.

Além disso, outros sinais de experiência de página serão incorporados anualmente à medida que as expectativas do usuário evoluem e a capacidade do Google de medir mais aspectos aumenta.

Classificação da experiência na página

Então, qual é a ideia por trás disso? Essencialmente, ter uma boa experiência permite que as pessoas alcancem o que desejam, e uma experiência ruim pode impedir que alguém encontre a informação que está procurando. O Google quer continuar a ser o local de referência para as pessoas que procuram informações e, portanto, precisa fornecer a melhor experiência de pesquisa.

Ao adicionar experiência de página à mistura com todos os outros sinais, o objetivo é tornar mais fácil para as pessoas que usam sites encontrarem o que estão procurando.

Métricas de página de nível superior

Os três principais componentes da experiência da página são:

• Quão rápido a página carrega?
• Com que rapidez a página reage aos usuários?
• Quão estável é a página (os elementos pulam conforme ela é carregada)?

Agora podemos percorrer algumas das métricas de nível superior para decodificar o que elas significam. (Os 3 primeiros são chamados de 'core web vitals'.)

Principais Vitais da Web

• Maior pintura de conteúdo (LCP) - esta métrica procura a maior imagem ou bloco de texto. Ele mede quanto tempo leva para carregar esse item na viewport. Pode ser uma imagem principal ou uma grande seção de texto. (Idealmente, isso deve ser menor ou igual a 2,5 segundos.)

• Mudança de layout cumulativa (CLS) - esta métrica mede a estabilidade visual. Em outras palavras, ele mede o quanto o conteúdo muda à medida que a página é carregada, dificultando a leitura ou visualização do conteúdo. (Você quer que isso seja menor ou igual a 0,1.)

• Atraso da primeira entrada (FID) - refere-se à rapidez com que a página responde a um usuário (após o clique de um botão, por exemplo). Menor ou igual a 100ms é ideal para este.

As seguintes métricas também devem ser consideradas como medidas úteis da eficácia de uma página:

• Primeira pintura de conteúdo (FCP) - essa métrica mede quanto tempo leva para o texto acima da dobra carregar. Este é o conteúdo que você vê sem precisar rolar. Muitas fontes e arquivos de fontes grandes afetarão essa pontuação. Como irá diminuir o carregamento de fontes de recursos externos.

• Índice de velocidade (SI) - esta métrica registra quando o visual muda acima da dobra. Isso significa que vídeos e imagens de heróis afetam a pontuação do índice de velocidade.

• Tempo para interação (TTI) - essa métrica mede quanto tempo leva para a página ficar pronta para a entrada do usuário. Aplicativos de carregamento tardio e scripts de rastreamento ou análise afetarão essa métrica.

• Tempo total de bloqueio (TBT) - essa métrica é semelhante ao TTI, mas mede a quantidade total de tempo de bloqueio na página. Isso se refere ao usuário não poder clicar em elementos ou rolar a página.

É importante lembrar que esses princípios vitais da web não são de forma alguma a única maneira de seu site ser julgado. Existem muitos, muitos fatores levados em consideração pelo Google ao avaliar suas páginas. Embora a ênfase aqui seja certamente a experiência do usuário, o Google disse que ter um ótimo conteúdo ainda será a consideração mais importante: ele buscará classificar as páginas com as melhores informações gerais, mesmo que a experiência da página não seja a melhor das melhores.

O Google não disse quanto cada fator é ponderado, mas eles confirmaram que 'uma boa experiência de página não substitui um conteúdo excelente e relevante'. No entanto, se todos os outros fatores forem iguais, a experiência na página pode ser o fator decisivo para sua visibilidade.

Atualização do Search Console

O Google adicionou uma nova seção ao Search Console chamada 'Core Web Vitals', que relata o desempenho do seu site em relação a essas novas métricas de 'Experiência de página'. Este relatório lhe dirá onde você precisa melhorar e como implementar essas melhorias.

O Google atualizou suas ferramentas, como Lighthouse e PageSpeed ​​Insights, para permitir que os proprietários de sites meçam melhor seu próprio desempenho e melhorem a experiência da página para seus visitantes. Nosso artigo sobre auditorias de velocidade do site oferece uma boa visão geral das diferentes ferramentas que você pode usar, além de seus benefícios e limitações em termos de avaliação do seu site.

Como se preparar para os principais Web Vitals (nem todos aplicáveis ​​às lojas da Shopify)

1 maior pintura de conteúdo (LCP)

Problema potencial: tempos de resposta lentos do servidor

Soluções

a) Ativos de cache - se seu HTML for estático, armazená-lo em cache pode impedir que seja recriado quando não for necessário, reduzindo o uso de recursos.

b) Encaminhar usuários para uma CDN - uma rede de entrega de conteúdo usa servidores em vários locais ao redor do mundo, o que elimina o problema de usuários terem um site mais lento por estarem distantes de um único servidor.

Problema em potencial: tempos de carregamento de recursos lentos

Soluções

a) Otimize e comprima suas imagens usando tinypng - reduz o tamanho dos arquivos sem sacrificar a qualidade, para que eles carreguem mais rapidamente, mas ainda com boa aparência.

b) Use um CDN de imagem - isso diminuirá a carga útil da imagem, fornecerá imagens personalizadas para cada dispositivo que o solicitar e enviará imagens da borda da rede.

Problema potencial: renderização do lado do cliente

Soluções

a) Minimize seu JavaScript e adie JavaScript não utilizado

b) Utilize a renderização do lado do servidor, se isso for possível

Problema em potencial: JavaScript e CSS

Soluções

a) Minimize seu CSS - arquivos CSS geralmente contêm caracteres para facilitar a leitura, mas que não são necessários para o navegador. Minimizá-los os remove e limpa para melhorar o tempo necessário para renderizar a página.

b) Faça o download e forneça a quantidade mínima de JavaScript necessária para os usuários. Reduzir a quantidade de JavaScript de bloqueio significa uma renderização mais rápida e, portanto, um LCP melhor.

2 Mudança de layout cumulativa (CLS)

Problema potencial: mudanças inesperadas de layout

Soluções

a) Inclua atributos de tamanho em ativos como vídeo e imagens, para que o navegador aloque a quantidade apropriada de espaço para o objeto antes que ele seja carregado.

b) Certifique-se de que o conteúdo injetado dinamicamente seja inserido apenas abaixo do conteúdo existente para que não acione mudanças inesperadas de layout.

3 Atraso da primeira entrada (FID)

Problema potencial: o navegador não responde rapidamente ao usuário (provavelmente porque ainda está executando o JavaScript)

Soluções

a) Divida o código de longa duração em tarefas menores. Tarefas longas deixam a página sem resposta enquanto ela lida com as tarefas. Dividi-los em partes mais gerenciáveis ​​pode ajudar a reduzir o atraso de entrada.

b) Reduza ainda mais o tempo de execução do JavaScript adiando JS não utilizado. Se o navegador não precisar do código para renderizar a página, adie-o - isso significa que a página está pronta para a interação do usuário mais rapidamente.

Se você precisar de suporte para garantir que seu SEO, conteúdo ou site esteja seguindo as diretrizes mais recentes, entre em contato e nossos especialistas em design, desenvolvimento e SEO da Shopify terão prazer em falar sobre como podemos ajudar.