Como melhorar suas pontuações do Google Core Web Vitals?

(23 de agosto de 2020)

Próxima era no desempenho da página da web

Já faz alguns meses que estou trabalhando sobre estratégias para melhorar o desempenho da página da web nos sites de minha empresa e, para ser honesto, é um trabalho muito interessante para compartilhar com vocês.

Eu entendo que trabalhar no desempenho da página da web não é novo coisas e pessoas vieram com muitas ideias e truques para aumentar a velocidade de carregamento da sua página. Mas agora parece que isso “não é mais o suficiente e você precisa passar para o próximo nível !!

Como vocês devem saber sobre a importância do SEO (Search Engine Optimization) e trazer os resultados da sua página da web não apenas na primeira página de resultados do Google, mas no topo da mesma primeira página é realmente um ótimo negócio! Resumindo a história – deixe-me garantir que daqui em diante o Google Core Web Vitals será um dos maiores contribuintes para a classificação de SEO dos resultados de pesquisa do Google.

Short & Explicação simples sobre Google Core Web Vitals

Core Web Vitals, apresentado no primeiro trimestre deste ano, é um conjunto de métricas relacionadas à velocidade, capacidade de resposta e estabilidade visual de sua página da web.

O Google os definiu como os principais pontos vitais da web:

  • Pintura com maior conteúdo : o tempo que leva para o conteúdo principal de uma página carregar. Uma medição LCP ideal é 2,5 segundos ou mais rápida.
  • Atraso da primeira entrada : o tempo que uma página leva para se tornar interativa. Uma medição ideal é inferior a 100 ms .
  • Mudança cumulativa de layout : a quantidade de mudança inesperada de layout do conteúdo visual da página. Uma medida ideal é menor que 0,1 .

Este conjunto de métricas foi projetado para ajude os proprietários de sites a medir a experiência do usuário que eles fornecem em relação ao carregamento, interatividade e estabilidade visual.

De modo geral, a partir de agora o desempenho da sua página será classificado como abaixo.

Lista completa de métricas consideradas para métricas de desempenho de página.

A próxima seção fala basicamente sobre as idéias ou métodos para melhorar o desempenho do carregamento de sua página e as pontuações CWV.

Dicas para melhorar suas pontuações principais do vitals da web

Abaixo estão alguns métodos que me ajudou a melhorar drasticamente minhas pontuações do Core Web Vitals e também melhorou o desempenho geral da página.

  1. Utilize o navegador e o cache CDN de maneira eficaz (melhora o FID e o LCP)
    Esta é uma abordagem muito simples ch para melhorar suas pontuações FID e LCP. Certifique-se de que seus ativos estáticos sejam servidos por um CDN (se for AWS, você pode armazená-lo em cache no Cloudfront). Portanto, isso resulta em obter os recursos rapidamente em seus navegadores. Para melhorar o segundo carregamento de tempo, certifique-se de que os ativos alcançados no lado do cliente estejam armazenados em cache no seu navegador.
    cache-control: max-age=120 – significa que o recurso retornado é válido por 120 segundos, após os quais o navegador deve solicitar uma versão mais recente.
    Você também pode armazenar em cache suas páginas dinâmicas também em seu CDN com o valor TTL adequado com base no comportamento de seu aplicativo.
  2. Defina atributos de tamanho exato ou dimensões para sua mídia e anúncios (melhora o CLS)
    Isso é algo muito importante para melhorar sua pontuação CLS. Certifique-se de ter um height:XXpx; width: YYpx adequado definido para sua imagem ou qualquer marca de mídia. Novamente, isso é muito importante, pelo menos para os componentes que estão acima da dobra. Um atalho para isso é que, se você está ficando sem ideias para obter a altura exata da imagem, pode definir como height:auto;, o que realmente me ajudou. Além da mídia, se o seu site exibe anúncios, certifique-se de ter definido os locais de anúncios adequados com as dimensões adequadas, pois empurrar para cima ou para baixo os componentes na página certamente derrubará sua pontuação CLS. Portanto, fique de olho nos anúncios também!
  3. Carregamento lento de imagens de resolução correta com base no tipo de dispositivo (melhora o LCP)
    Esta é realmente uma vitória rápida para você! Existem muitos pacotes de carregamento lento no mundo que você pode usar em sua página da web para carregar lentamente todas as imagens em sua página.Isso reduzirá o peso geral da página e o tempo de carregamento para renderizar sua página no navegador. Outra peça importante é que, pré-defina a resolução da imagem que deseja carregar com base no tipo de dispositivo. Você não deve carregar as mesmas imagens de resolução em diferentes tipos de dispositivos.
  4. Use SSR e CSR de maneira eficaz em sua página da web (melhore o FID & LCP)
    Você deve saber que o Google promove e incentiva as páginas renderizadas do lado do servidor (SSR) para obter bons valores de SEO. Mas, idealmente, é uma compensação com o desempenho de carregamento de página de SEO x. Se sua página for muito grande em termos de conteúdo e se você decidir renderizar a página inteira no servidor, definitivamente vai demorar mais para carregar a página inteira, bem como a página o peso também será alto. Resumindo a história – minha recomendação é que é melhor fazer a renderização SSR para os componentes de sua página que aparecem acima da dobra e renderizar o resto dos componentes do lado do cliente que aparece abaixo da dobra. Desta forma, o usuário carrega a página acima da dobra e o resto da página é renderizado de forma assíncrona sem prejudicar a experiência do usuário.
  5. Use o código A divisão & divide seus ativos em blocos (melhora o FID & LCP)
    Nem sempre é uma boa ideia ter recursos enormes (qualquer coisa acima de 100 KB é enorme) (arquivos JS especialmente) em seu aplicativo. Portanto, é melhor usar pacotes como “webpack” para dividir recursos pesados ​​em pequenos pedaços que irão carregar seus recursos de forma assíncrona em seu navegador (se você ativar o protocolo h2). Você também pode aproveitar os recursos de divisão de código para dividir os componentes da página em arquivos separados, em vez de empacotá-los em um único arquivo HTML.
  6. Comprima todos os seus ativos estáticos com a compressão Brotli (melhora o LCP)
    Eu encorajo o uso do Brotli para comprimir seus ativos estáticos, o que oferece uma co taxas de compressão em comparação com outras bibliotecas no mercado. Ao mesmo tempo, lembre-se de que, ao usar o Brotli com uma taxa de compactação mais alta, isso definitivamente aumentará o tempo de construção e pacote na jornada do pipeline de DevOps. Para mim, não havia problema em sacrificar o tempo de construção do aplicativo, pois estou obtendo um valor melhor em termos de desempenho de carregamento da página.
  7. Otimize a solicitação de API e conteúdo de resposta (melhora o FID & LCP)
    Isso é muito importante ser considerado, pois cada byte é importante aqui quando falamos sobre desempenho da página. Acredito que você não se arrependerá de voltar e verificar suas & respostas de solicitações de API para preencher sua página. Certifique-se de receber apenas os dados de que precisa para sua página ser processado a partir das respostas da API. Outra coisa idiota que você pode cometer é que suas chamadas de API são invocadas internamente em vez de usar endpoints públicos ou via Internet – porque é sempre caro em termos de tempo quando você estão invocando suas APIs pela Internet quando você tem suas APIs hospedadas na mesma sub-rede ou pelo menos na mesma rede!
  8. Reduza a página / documento geral size (melhora o LCP)
    Idealmente, se sua página de destino for pesada (eu classificaria qualquer página com> 80 KB como pesada), isso definitivamente contribuirá mal para a pontuação do LCP pois isso aumentará proporcionalmente a velocidade de busca e download de sua página. Portanto, certifique-se de que você não está obtendo grandes blocos de dados não utilizados do lado do servidor e carregue apenas os dados necessários para renderizar sua página.
  9. Use formatos de imagem NEXT-GEN (melhora o LCP)
    JPEG 2000, JPEG XR e WebP são formatos de imagem que têm compressão superior e características de qualidade em comparação com seus antigos JPEG e Homólogos PNG. Codificar suas imagens nesses formatos em vez de JPEG ou PNG significa que elas carregarão mais rápido e consumirão menos dados do celular. Você pode usar qualquer tipo de ferramenta no mercado para converter as imagens em imagens formatadas NEXT-GEN ou pode até mesmo construir um serviço de imagem em tempo de execução que pode fazer uma conversão de imagem em tempo real de JPEG para WebP e servir no navegador.
  10. Habilite fallback para as fontes nativas suportadas pelo navegador (melhora o FID)
    Está provado que as fontes pode realmente derrubar suas pontuações de desempenho se o navegador atrasar para carregar a fonte personalizada que é usada em seu aplicativo, a menos que seja uma fonte padrão compatível com o navegador. Neste caso, uma vitória rápida para você é ter uma abordagem alternativa no carregamento sua fonte com as fontes que são suportadas por padrão pelo navegador. Abaixo está um trecho de código de amostra em ter uma abordagem alternativa com outras fontes.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Todas as dicas fornecidas acima podem ser implementadas de forma incremental em seu aplicativo e, novamente, conforme mencionado antes que as pontuações do Core Web Vitals sejam desenvolvidas a partir do usuário real dados e não mais de quaisquer dados “Lab”. Portanto, leva tempo para refletir as melhorias em sua pontuação, que geralmente leva 28 dias para refletir. Você ainda pode usar a ferramenta PageSpeed do google – https://developers.google.com/speed/pagespeed/insights/ para obter sua pontuação CWV.

Espero que ajude e muito sucesso em seus trabalhos! Saúde!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *