Home Artigos técnicos O núcleo de Web Vitals
Download
Applications

About The Author

Outline

Introdução

Desde sua introdução em maio de 2020, o pacote Core Web Vitals (CWVs) do Google tornou-se uma métrica importante para medir o desempenho do site. Dado que o Google considera esses valores como parte de seu algoritmo de classificação de página, maximizar o desempenho do seu site em termos de CWVs não só melhora a experiência para seus usuários, mas melhora o ranking do seu motor de busca. este artigo irá explorar dicas e técnicas para ajudar a melhorar as pontuações da sua página, aumentar a satisfação do usuário e aumentar o seu resultado final.

O que são Core Web Vitals?

Como tantas outras coisas na tecnologia, os Web Vitals do Google são um enxame de acrônimos de três letras, cada um representando algum aspeto mensurável do desempenho de um site. Para definir o estágio, vamos definir as três principais métricas que definem os Core Web Vitals:

Maior Contentful Paint

Maior Contentful Paint (LCP): Mede a velocidade de carga percebida , concentrando-se na quantidade de tempo que leva para o conteúdo visível acima da dobra para carregar. Para proporcionar uma experiência de usuário ideal, o LCP deve ser acionado dentro de 2,5 segundos na linha do tempo de carregamento da página.

Primeiro Atraso de Entrada

First Input Delay (FID): Mede a capacidade de resposta da página medindo o atraso entre as ações do usuário e a resposta da página. Para proporcionar uma experiência de usuário ideal, as páginas devem ter um FID de 100 milissegundos ou menos.

Mudança de esquema cumulativa

Deslocamento de layout cumulativo (CLS): Mede a estabilidade visual usando uma medição composta de deslocamentos de layout na página à medida que ela é renderizada. Para proporcionar uma experiência de usuário ideal, as páginas devem manter um CLS de 0,1 ou menos; tudo entre 0,1 e 0,25 é considerado moderado e maior que 0,25 é ruim.

… e por que eles são importantes?

Para muitas empresas, o desempenho do site tem uma correlação direta com o sucesso do negócio. A pesquisa indica que sites com pontuação de VOC passando podem desfrutar de até 37% mais visibilidade nos resultados de pesquisa em comparação com páginas que não (Beus); e que as pontuações de VOC melhoradas podem aumentar tanto a receita por visitante quanto a taxa de conversão (Duong et al.).

Enquanto trabalha com Akira, Uma boutique de moda feminina, Edgio foi capaz de melhorar os CWVs do site, trazendo os tempos de carregamento da primeira página de 5 segundos para cerca de 1 segundo, melhorando as medições da VOC e, finalmente, proporcionando um aumento de 30% no tráfego orgânico, uma melhoria de 61% nas iniciações de checkout e um aumento de 37% na taxa de conversão.

Simplificando, sites mais rápidos tornam melhores rankings de SEO e usuários mais felizes – especificamente dentro do contexto de sites de comércio eletrônico; estes se combinam para diminuir as taxas de rejeição e aumentar as conversões.

Então, como podemos melhorá-los?

Primeiro Atraso de Entrada

Vamos começar com a fruta baixa: Primeiro Atraso de Entrada. A boa notícia é que os sites têm pontuação FID mais frequentemente do que não, o que é ótimo para ver! Se, no entanto, não for esse o caso, muitas vezes, o culpado são os scripts de terceiros carregados no início do ciclo de vida do site, o que pode bloquear a execução principal do thread necessária para receber a entrada do usuário. As ferramentas que capturam erros e executam a gravação de tela são os principais candidatos para escrutínio adicional.

Na verdade, qualquer coisa que bloqueie o thread de execução principal pode contribuir para um desempenho ruim do FID. Fique de olho nas tarefas de JavaScript que consomem muitos recursos ou que executam muito tempo, e considere refatorar código não relacionado à interface do usuário para um web worker, bem como usar técnicas de carregamento lento e divisão de código para garantir que apenas o JavaScript necessário seja carregado e somente quando for necessário.

Além disso, embora tecnicamente não seja um elemento central dos CWVs, vale a pena mencionar outra métrica relacionada: Interaction to Next Paint (INP). O INP mede o tempo entre interagir com uma página e a atualização subsequente da página refletindo essa interação. Enquanto o INP e o FID medem a capacidade de resposta geral da página, o INP está preocupado com todas as interações da página em vez da primeira interação, com o objetivo de garantir que a página permaneça responsiva durante toda a sessão, não apenas com as interações iniciais. O INP rastreia o pior desempenho de interação na experiência de um usuário e relata isso para crux. É muito provável que em breve o INP substitua o FID como uma medida de resposta da página, por isso vale a pena ficar de olho.

Maior Contentful Paint

Indiscutivelmente, a métrica mais importante e impactante para o desempenho da página é o LCP. Um pouco previsivelmente, o exemplo mais comum do maior Contentful Paint é uma imagem “herói” – uma imagem ou vídeo grande, geralmente ocupando toda a largura da janela de visualização acima da “dobra”. Embora as técnicas para otimizar este elemento sejam as mesmas que qualquer outro recurso de página, o tempo que leva para que esse recurso renderize é de grande importância porque este é o primeiro elemento principal que um usuário experimentará.

A aguardar na fila
Quebrar o tempo de solicitação para o elemento LCP é tremendamente útil na otimização de seu desempenho. Qualquer solicitação feita por um navegador começa com a fila. Cada solicitação LCP gasta na fila é de um milissegundo que contribuirá para a pontuação LCP, então se você achar que esses elementos estão gastando uma quantidade desproporcional de tempo na fila do navegador, investigue o que está sendo solicitado antes dela e por que, e tomar medidas para priorizar os recursos do LCP. Talvez os recursos estejam abaixo da dobra, ou outros scripts que podem ser carregados com preguiça ou adiados. A ordem das operações é fundamental.

A aguardar no servidor
Depois de iniciar a solicitação de rede, o cliente do navegador precisa esperar que o servidor receba, processe e responda a essa solicitação. Essa métrica é chamada de tempo até o primeiro byte (TTFB). Se o servidor estiver lento para responder à solicitação, sua pontuação LCP será afetada. Essa é uma das áreas em que ter uma CDN pode impactar significativamente a melhoria da velocidade, já que os CDNs podem manter uma cópia em cache do recurso em um local geograficamente próximo aos usuários finais e responder com esse recurso mais rapidamente do que um único servidor de aplicativos. Outros grandes aspetos do uso de uma CDN incluem o WAFS de segurança incorporado e a capacidade de responder a grandes picos de tráfego. Se você está indo para a velocidade, você deve estar usando uma CDN.

Largo no fio
Nesse ponto, espero que o navegador solicite os recursos LCP no início do ciclo de vida da página, e o servidor deve estar respondendo a eles rapidamente. O próximo elemento a considerar é o tamanho geral do recurso solicitado. Cada byte que tem que viajar “pelo fio” para o navegador levará algum tempo, e quanto mais desses bytes houver, mais tempo levará para a solicitação ser concluída. Portanto, deve-se ter cuidado para garantir que os recursos sejam tão pequenos quanto razoavelmente possível para minimizar o tempo gasto transferindo-os. Isso pode incluir o uso de serviços de otimização de imagem e hospedagem de terceiros, como kraken.io ou imgix.com, que podem otimizar e servir arquivos de mídia em formatos “NextGen”, como WebP, reduzindo ainda mais o tamanho.

Ajude o navegador a sair
Além das otimizações de tamanho, considere usar <tags de imagem> , o que permitirá que o navegador escolha o recurso certo para solicitar o dispositivo de forma mais inteligente. Um navegador de desktop pode ter grandes faixas de propriedades de tela para exibir imagens de alta resolução; no entanto, esses mesmos recursos vão reduzir um dispositivo móvel com uma tela menor. Usando recursos otimizados e consultas de mídia CSS, você pode garantir que o navegador solicite o recurso certo para seu tipo de dispositivo e reduza o tempo gasto na transferência de bytes do servidor para o cliente.

Além disso, você pode dar ao navegador uma ajuda pedindo-lhe para pré-carregar recursos LCP e especificar uma prioridade de busca. Isso dará ao navegador pistas para priorizar os principais recursos à frente dos menos críticos. Quanto mais rápido chegar ao navegador, mais rápido eles podem ser renderizados, e quanto mais rápido o LCP acontece, melhor.

Mudança de esquema cumulativa

Nós vemos isso o tempo todo. Depois de enviar seu navegador para buscar um site, a página começa a carregar; enquanto a página se constrói, você vê a peça em que está interessado e se move para clicar nela quando de repente a página inteira muda e o link que você pensou que estava prestes a clicar é de repente em outro lugar! Este fenômeno é chamado de mudança de layout. É irritante para todos, geralmente auto-infligido, e devemos nos esforçar para minimizá-lo para o bem da humanidade.

Os suspeitos habituais
Os culpados típicos para pontuações CLS mais altas são:

  • Colhedores aderentes
  • Banners promocionais ou “Herói” carregados e renderizados do lado do cliente
  • Avisos de boletim informativo, Cupom e GPDR
  • Outras integrações de terceiros que são injetadas dinamicamente na página

Defina alguns limites
Lembra-se do <elemento de imagem> que referenciamos ao discutir o LCP? Não se esqueça de adicionar dimensões aos vários elementos contidos nele. Omitir esses valores leva você para fora do assento do motorista ao dirigir o navegador sobre como renderizar esses elementos. Ao definir as dimensões, o navegador pode reservar a quantidade correta de espaço em que a imagem será pintada, reduzindo o deslocamento.

O mesmo acontece com qualquer conteúdo que possa ser adicionado dinamicamente à página. Anúncios, <iframe>ou outro conteúdo adicionado dinamicamente podem contribuir para o CLS. O conteúdo da página mudará menos reservando espaço para esses itens antes do tempo. Além disso, evite adicionar o conteúdo acima do conteúdo da página existente, pois isso fará com que a página inteira mude abaixo.

Ajudar o navegador a esculpir o espaço antes do tempo reduzirá o CLS, mas pode vir à custa da experiência geral do usuário, pois o usuário espera que essas partes da página em branco se tornem preenchidas com conteúdo útil. Como meio-termo, implementar esqueletos de carregamento de elementos pode ser uma técnica útil para comunicar ao usuário que há mais por vir, dando a impressão de uma experiência mais rápida enquanto o navegador faz o resto do trabalho pesado para coordenar o conteúdo adicional da página. O que é mais é que eles podem e devem ser implementados usando animações CSS em vez de GIFs animados, o que significa que apenas algumas linhas de CSS podem ser usadas para implementar essa técnica em todo o seu site.

Atamento

Na superfície, o Core Web Vitas pode parecer as últimas peças do algoritmo lendário e sombrio do Google para determinar a classificação da página dentro dos resultados de pesquisa – e, em certa medida, isso pode estar correto. No entanto, mais do que isso, os Core Web Vitals representam uma estrutura mais concreta para medir o desempenho da página e estabelecer uma linha de base para descrever coisas que importam em termos de experiência do usuário. Embora não sejam exaustivas, as técnicas acima mencionadas devem ajudar a dar uma vantagem ao solucionar problemas e otimizar o desempenho do seu site, resultando em melhorias na experiência do usuário, classificação de página e receita.