O Google está sempre pensando em como melhorar a experiência do usuário tanto com relação às pesquisas quanto com o acesso às páginas que o buscador entrega, principalmente aquelas melhor posicionadas. Por isso, as Core Web Vitals são tão importantes para quem tem um domínio. A partir daqui, vamos entender o que são essas métricas e como melhorar o desempenho dos websites.
O que são as Core Web Vitals?
Criadas em 2020, as Core Web Vitals são um subconjunto de métricas importantes do Google que ajudam a mensurar a experiência do usuário nas páginas e se concentram em três pilares: Largest Content Paint (LCP), Input Delay (FID) e Cumulative Layout Shift (CLS).
Ter domínio dessas métricas é de fundamental importância para profissionais de SEO, UX e Desenvolvimento, assim como quem trabalha com SEO Técnico. Afinal, além de ajudar a melhorar o posicionamento nas buscas, servem para entender de forma profunda a experiência dos usuários da sua página.
Leia também: Tudo sobre SEO Técnico
LCP
O recurso LCP (Largest Content Paint, ou Maior Renderização de Conteúdo em português) é utilizado para calcular a velocidade do carregamento e o desempenho da página. O ideal para que o usuário tenha uma boa experiência é que o LCP ocorra com menos de três segundos depois do início do carregamento do site.
FID
O First Input Delay (FID), como o próprio nome em português indica, mede o atraso da primeira entrada, ou seja, a interatividade da página. Para que o usuário tenha uma boa experiência, o site deve ter um FID de, no máximo, 100 milissegundos.
CLS
A estabilidade visual da página é mensurada pelo Cumulative Layout Shift (CLS) ou Mudança Cumulativa de Layout, em português. O site precisa manter um CLS de, no máximo, 0,1 para que o usuário tenha uma boa experiência.
Como mensurar essas métricas?
Agora que conhecemos e entendemos o que são as Core Web Vitals e quais são suas métricas, vamos nos aprofundar em sete ferramentas importantíssimas para mensurar os dados.
Google Search Console
Anteriormente chamado de Webmaster Tools, o Search Console (GSC) é um recurso do Google que ajuda os proprietários de páginas a acompanhar como os sites são classificados, rastreados e indexados nas buscas, a partir de relatórios atualizados, bem elaborados que identificam os erros que prejudicam o desempenho da página.
Ele disponibiliza um relatório específico para as Core Web Vitals. A partir dele é possível saber quais páginas estão aprovadas ou reprovadas e assim partir para as ações de correção, caso necessário.
Leia também: Google Search Console: O que é e como utilizar
Page Speed Insights
O PageSpeed Insights (PSI) é um recurso que aponta as otimizações necessárias para que a página performe bem nas principais métricas que os mecanismos de busca exigem. A ferramenta desenvolve relatórios, tanto para desktop quanto para dispositivos móveis, apresentando uma visão ampla sobre a experiência dos usuários.
Chrome Dev Tools
Integrando no Google Chrome, o Chrome DevTools é uma ferramenta que reúne diversos recursos que permitem uma avaliação do HTML (DOM) compilado, assim como a atividade de rede das páginas do seu site.
Chrome UX Report
O Chrome UX Report (CrUX), por sua vez, é um arquivo público composto com dados sobre a experiência dos usuários com o site.
A ferramenta é uma espécie de agregado das métricas de Core Web Vitals, com manuseio de pessoas reais.
Dessa forma, é possível compreender de maneira mais profunda e realista a usabilidade da sua página ou dos concorrentes dela.
O que está por trás das Core Web Vitals?
As Core Web Vitals são consideradas tão importantes porque os desenvolvedores conseguem entender melhor o comportamento do usuário.
E, a partir disso, é possível mensurar a experiência do internauta para, assim, garantir uma busca mais assertiva e qualitativa para o mesmo. Ou seja, as CWV buscam fornecer uma orientação única a respeito das qualidades fundamentais para uma melhor usabilidade dos websites.
Segurança (SSL)
O SSL (Secure Sockets Layer ou Camada de Soquete Seguro, em português) é um certificado digital que garante segurança ao usuário, como uma espécie de selo de qualidade do site. O protocolo cria um link criptografado entre um domínio de site e um navegador web.
Boa experiência (Carregamento)
O tempo de carregamento de um site é uma das principais métricas do Google para indicar se a experiência de um usuário é boa ou não na página.
De acordo com pesquisas mais aprofundadas, a grande maioria das pessoas espera que o site abra em até dois segundos. Além disso, em um mercado tão competitivo e um mundo com informação chegando tão rapidamente, uma demora pode ser fatal para que o internauta desista da sua página.
Não utilização de conteúdo intrusivo
O conteúdo intrusivo obstrui a visualização dos usuários e pode até tirar a paciência deles, que buscam por alguma informação atrativa e não conseguem acessá-la.
Dessa forma, mesmo que seu conteúdo seja de qualidade, caixas de diálogo inadequadas podem dificultar a compreensão deles e, dessa forma, atrapalhar a experiência dos internautas. Portanto, caso precise utilizá-las, tenha bom senso.
O que fazer para melhorar as métricas?
Através das Core Web Vitals podemos medir e melhorar a experiência do usuário.
Mas como fazer esses ajustes para que o visitante possa acessar de maneira adequada a página? Alguns recursos do CWV são bem importantes. Vamos entender como usá-los melhor?
LCP
O LCP, como dito anteriormente, mede a velocidade e o desempenho da página, calculando quanto tempo o conteúdo principal da página terminou de ser renderizado na tela. Os motivos mais comuns de uma LCP ruim estão atrelados à renderização, seja pelo lado do cliente ou pelos JavaScript e CSS que promovem bloqueios.
Para reduzir o tempo de bloqueio de JavaScript, baixe e forneça apenas a quantidade mínima necessária aos usuários. Para isso, minifique e comprima arquivos JavaScript, adie aquele não utilizado e minimize polyfills também não usados. Já para certificar-se de que somente a quantidade mínima de CSS necessária esteja bloqueando a renderização da sua página, faça a minificação de CSS; adie aquele que não é crítico e embuta o crítico no site.
Por outro lado, para a renderização do lado do cliente, tenha atenção a otimizações importantes como JavaScript crítico minimizado; usar renderização lado-servidor e pré-renderização. Além disso, podemos adicionar a causas para LCP ruim problemas como tempos de resposta lentos do servidor e tempos lentos de carregamento de recursos.
Com relação ao servidor, busque melhorar como e onde o servidor da sua página lida com seu conteúdo. A métrica Time to First Byte – TTFB (Tempo Até o Primeiro Byte, em português) é importante para calcular os tempos de resposta do servidor. Ademais, é possível otimizar o seu servidor e direcionar usuários para um CDN próximo. Servir páginas HTML usando cache-first, ativos de cache e trocas assinadas, bem como estabelecer conexões de terceiros antecipadamente são algumas maneiras de melhorar o LCP.
Por fim, para melhorar o tempo de carregamento de recursos, otimizar e comprimir as imagens é uma grande saída. Além disso, pré-carregar recursos importantes, compactar arquivos de texto, entregar diferentes ativos com base na conexão de rede e ativar cache através de um service worker são de fundamental relevância para combater esse problema.
Quer entender mais sobre LCP? Veja a documentação do web.dev sobre LCP
FID
O FID, como explicamos no início, mensura a primeira impressão de um usuário com relação à capacidade de resposta e à interatividade de um site, medindo o tempo que leva para um usuário interagir ao acessar pela primeira vez uma página até o instante em que o navegador reage à essa essa interação.
Como é preciso uma uma interação real do usuário para calcular esse atraso da resposta, é recomendável usar a métrica Total Blocking Time – TBT (Tempo Total de Bloqueio, em português). Geralmente, o principal motivo de uma FID ruim é um JavaScript pesado. Portanto, é preciso otimizar o processamento, assim como a compilação e execução do recurso no seu site.
Entre as ações indicadas estão a divisão de tarefas longas, a otimização de sua página para a prontidão de interação e a redução do tempo de execução do JavaScript. Outra dica é usar um web worker, que possibilita a execução de JavaScript em uma thread em segundo plano.
Quer entender mais sobre FID? Veja a documentação do web.dev sobre FID
CLS
Outra métrica importante das Core Web Vitals é o CLS, que tem pontuações para calcular a instabilidade do conteúdo com relação aos deslocamentos nas alterações de layout que não ocorrem dentro de 500 ms da interação do usuário.
As razões mais comuns para um resultado ruim são imagens, anúncios, incorporações e iframes sem dimensões exatas; ações que aguardam uma resposta da rede antes de atualizar o DOM; conteúdo injetado dinamicamente; e fontes que causam FOIT (Flash of Invisible Text ou Flash de Texto Invisível, em português) e FOUT (Flash of Unstyled Text ou Flash de Texto Sem Estilo, na tradução literal).
Quer entender mais sobre CLS? Veja a documentação do web.dev sobre CLS
Conclusão
De fato é muito importante ter a parte tecnológica atualizada. No entanto, de nada adianta ter uma página altamente tecnológica se o conteúdo dela não for útil para o usuário.
Ou seja, antes de ter qualidade e ser bonito visualmente, ele precisa ser acessado.
Um site em que o visitante não consegue encontrar, clicar ou até mesmo demorar a entrar no que busca não está de acordo com as Core Web Vitals e, consequentemente, não será recomendado pelo Google.
