Se você tem interesse em posicionar bem suas páginas web no ranking do Google, e aos mesmo tempo procura desenvolver sites que carregam rápido você precisa conhecer sobre o Core Web Vitals. Principalmente se você se preocupa em criar interfaces que promovam boas experiências do usuário.
Isso porque em 2021, o Google anunciou um novo fator de classificação para 2021: a experiência da página. E isso é que discutiremos por aqui.
Além de todos aqueles fatores imagináveis que nos empenhamos em aprimorar para que nossas páginas sejam bem classificadas, agora a experiência do usuário se tornou um fator que, a gigante de buscas, considera fundamental para que um site possa almejar melhores posições.
Não basta mais pensar só em SEO. Não basta mais pensar em Performance.Agora é importante pensar também em UX.
Mas você deve estar curioso para saber como o Google vai conseguir definir quais sites oferecem uma boa experiência ao usuário. E aí entram os Core Web Vitals que são compostas pelas Métricas LCP, FID e CLS.
Venha comigo conhecer essas novas métricas!!!
O que são os Core Web Vitals?
Os Core Web Vitals são indicadores que visam melhorar tanto a experiência de interação nas páginas web, quanto da experiência de busca, onde o Google, através de métricas específicas que conseguem avaliar o desempenho do carregamento, a capacidade de resposta a interação, e estabilidade visual das páginas, fatores esses que influenciam na experiência do usuário.
É lógico que ainda temos que considerar outros fatores porque os Core Web Vitals não funcionam isoladamente. Elas são um subconjunto de uma iniciativa do Google denominada Web Vitals, e que fornece orientação unificada em relação a sinais de qualidade essenciais que visam proporcionar uma ótima experiência ao usuário na web.
Os Core Web Vitals ajudam os proprietários a focarem nas métricas que mais importam para seus sites.
Importância de cumprir as diretrizes dos Core Web Vitals
É importante ressaltar que uma ótima pontuação de experiência na página não o levará magicamente ao primeiro lugar no Google. Isso porque o conteúdo continua sendo o Rei, e os fatores de classificação relacionados a eles ainda estão presentes.
Mas um trabalho executado para melhoria dos Core Web Vitals vai influenciar muito nos resultados em termos de SEO e performance. Ainda mais que sites com ótima usabilidade e bens resolvidos em outras questões de uso, melhoram a experiência de uso e de consumo dos conteúdos, e isso reflete em uma maior retenção, possibilitando assim que se atinjam os objetivos de conversão dos sites.
Sabendo disso podemos conhecer agora as três métricas dos Core Web Vitals.
Quais são as métricas que constituem o Core Web Vitals?
Os indicadores dos Core Web Vitals são focados em três pilares da experiência de página são:
- Desempenho de carregamento (com que rapidez as coisas aparecem na tela?)
- Capacidade de resposta (quão rápido a página reage à entrada do usuário?)
- Estabilidade visual (as coisas se movem na tela durante o carregamento?)
Com isso as três métricas que medem esses aspectos são chamadas de LCP, FID, CLS.
Largest Contentful Paint (LCP)
Largest Contentful Paint mede quanto tempo leva para a maior parte do conteúdo aparecer na tela. Pode ser uma imagem ou um bloco de texto. Está métrica relacionada com o desempenho de carregamento.
A seguir um exemplo de quando a maior parte do conteúdo aparece:
Uma boa nota dá aos usuários a sensação de que o site carrega rápido. E caso a maior parte do conteúdo demorar para parecer, resulta assim na percepção de um site lento pelo usuário, prejudicando a experiência.
Segundo Google, para que o usuário tenha uma boa experiência de navegação, o LCP deve ser de até 2,5 segundos.
Fatores que afetam a métrica LCP
A LCP é afetada principalmente por quatro fatores:
- Tempos de resposta lentos do servidor;
- JavaScript e CSS que bloqueiam a renderização;
- Tempos de carregamento de recursos;
- Renderização do lado do cliente;
Otimização da Largest Contentful Paint
Segue algumas ações para otimização da Largest Contentful Paint:
- Otimização do seu servidor;
- Direcionando os usuários para um CDN próximo;
- Usando ativos de cache;
- Servindo páginas HTML usando cache-first;
- Estabelecendo conexões de terceiros antecipadamente (dns-prefetch, preconnect);
- Reduzindo o tempo de bloqueio de CSS;
- Minificação de CSS;
- Adiando o CSS que não for crítico;
- Embutindo na página o CSS crítico;
- Reduzindo o tempo de bloqueio de JavaScript.
First Input Delay (FID)
First Input Delay mede quanto tempo leva para o site reagir à primeira interação do usuário na interface. Isso pode ser um toque em um botão, por exemplo. Esta métrica está relacionada com a capacidade de resposta.
Uma boa nota aqui dá ao usuário a sensação de que um site é rápido para reagir ao comando dele. E caso a reação for demorada, resulta assim na percepção de um site lento pelo usuário, prejudicando a experiência.
Para fornecer uma boa experiência ao usuário, as páginas devem ter um FID de 100 milissegundos ou menos.
Fatores que afetam a métrica FID
A First Input Delay é afetada principalmente esses fatores:
- Código de terceiros que bloqueia o thread principal;
- Tempo de execução do Javascript;
- Altas contagens altas de recursos ou grandes tamanhos de transferência.
Otimização da First Input Delay
Segue algumas ações para otimização da First Input Delay:
- Divida Tarefas Longas;
- Otimize sua página para a prontidão de interação;
- Use um web worker;
- Reduza o tempo de execução do JavaScript;
- Adie o JavaScript não utilizado;
- Minimize polyfills não utilizados.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift mede a estabilidade visual do seu site. Ela verifica se as coisas se movem na tela enquanto estão carregando e com que frequência isso acontece. Essa métrica está relacionada com a estabilidade visual.
Uma boa nota aqui dá ao usuário que nada atrapalha quando uma interação acontece durante o carregamento da página. E caso alguma coisa apareça justamente no ponto onde ele iria interagir (clicar em um botão quando um anúncio de carregamento lento aparece naquele local), resulta em uma má experiência.
Para fornecer uma boa experiência ao usuário, as páginas devem manter um CLS de 0.1. ou menos.
Fatores que afetam a métrica CLS
A Cumulative Layout Shift é afetada principalmente esses fatores:
- Imagens sem dimensões;
- Anúncios, incorporações e iframes sem dimensões;
- Conteúdo injetado dinamicamente;
- Fontes da Web que causam FOIT/FOUT;
- Ações que aguardam uma resposta da rede antes de atualizar o DOM.
A seguir um exemplo de anúncio sem espaço reservado (Clique para ver o vídeo):
Otimização da Cumulative Layout Shift
Segue algumas ações para otimização da Cumulative Layout Shift:
- Garanta que quaisquer mudanças de layout que ocorram sejam esperadas.
- Garanta que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem ou vídeo é carregado. Para isso inclua atributos de tamanho em suas imagens e elementos de vídeo ou reserve o espaço necessário usando algo como caixas estilizadas com CSS.
- Nunca insira conteúdo acima do conteúdo existente, exceto em resposta a uma interação do usuário.
- Anime as transições de uma forma que forneça contexto e continuidade de um estado para outro.
Ferramentas para medir Core Web Vitals
Existem ferramentas populares para medir os Core Web Vitals.Elas estão divididas em ferramentas de campo e ferramentas de laboratório. Aqui, vou destacar as mais importantes.
Ferramentas de campo para medir os Core Web Vitals
- Relatório de experiência do usuário Chrome;
- PageSpeed Insights;
- Console de Busca (relatório Core Web Vitals).
Destaque especial vai para o Relatório de experiência do usuário Chrome coleta dados anônimos de medição de usuários reais para cada Core Web Vital e além de servir a ferramentas como o PageSpeed Insights e o relatório Core Web Vitals do Console de Busca.
Ferramentas de laboratório para medir as Core Web Vitals
Segundo o site da Web Vitals, a medição em laboratório é a melhor maneira de testar o desempenho dos recursos durante o desenvolvimento, antes de serem lançados aos usuários.
Conclusão – Como os Core Web Vitals podem impactar o seu SEO?
Como já citei neste artigo, o conteúdo de qualidade ainda reina soberano e os fatores relacionados a ele ainda são fundamentais para o SEO.
Mas cada vez mais a experiência do usuário é uma preocupação do Google, e convenhamos a experiência para o usuário se dá tanto pelo conteúdo útil ou encantador, quanto por uma interface útil, prática e fácil de usar.
Portanto, podemos concluir que os Core Web Vitals, sendo um projeto do Google, é um caminho a ser considerado para termos melhores resultados em SEO e também para que nossos usuários fiquem cada vez mais satisfeitos em suas interações.
E você já sabia ou conhecia a importância do Core Web Vitals?
Deixe um comentário abaixo.
Ed Francisco
Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.
Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.
Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).
Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.