Core Web Vitals é um conjunto de métricas que o Google usa para avaliar a qualidade do seu site. Otimizar seu site para essas métricas é absolutamente essencial. A otimização dessas métricas para uma boa pontuação não apenas fornece ao seu site uma experiência do usuário (UX) sólida , mas a experiência do usuário combinada com uma velocidade de carregamento rápida e alto desempenho também aumenta as classificações do mecanismo de pesquisa . Basicamente, para ter um bom desempenho em relação ao Google Page Speed ​​Insights, seu Core Web Vitals precisa estar em ótima forma.

Compreendendo Core Web Vitals

A primeira coisa que devemos abordar é a definição de Core Web Vitals. Isso é o que o Google diz que eles são:

Web Vitals é uma iniciativa do Google para fornecer orientação unificada para sinais de qualidade essenciais para proporcionar uma ótima experiência ao usuário na web. [. . .] Core Web Vitals são o subconjunto de Web Vitals que se aplicam a todas as páginas da web, devem ser medidos por todos os proprietários de sites e serão exibidos em todas as ferramentas do Google. Cada um dos vitais essenciais da Web representa uma faceta distinta da experiência do usuário, é mensurável no campo e reflete a experiência do mundo real de um resultado crítico centrado no usuário .

Em um inglês mais claro, o Google reuniu um conjunto de métricas quantificáveis ​​e mensuráveis ​​que indicam a experiência do mundo real do seu site, em vez de uma resposta simulada nas melhores condições. Eles agrupam tudo isso no que chamam de experiência de página .

A coisa mais fundamental que você precisa entender sobre eles é que, se os usuários acharem seu site difícil de usar ou frustrante, não importa quão bom seja seu conteúdo. O Google não quer que as pessoas fiquem frustradas.

O objetivo do Core Web Vitals é colocar os usuários e sua experiência no site em primeiro lugar, não os detalhes técnicos.

Quais são as métricas do Core Web Vitals?

Os reais Core Web Vitals que o Google considera mais importantes podem mudar com o tempo. Conforme a tecnologia da Internet evolui, também evoluem as expectativas do usuário. No momento, os insights de velocidade da página do Google e as métricas do CWV levam em consideração as seguintes métricas. Abaixo, você encontrará breves visões gerais de todas as métricas que o Google avalia, e fornecemos links para guias detalhados sobre como obter insight e compreensão sobre como medir, otimizar seu site e maximizar sua pontuação para cada uma.

Atraso para primeira interação

O Atraso da Primeira Entrada (FID) também é conhecido como Tempo Total de Bloqueio e mede o tempo em milissegundos entre a primeira ação do usuário e o tempo de resposta do navegador. Você pode ver em várias análises de velocidade do site um erro que menciona “recursos de bloqueio de renderização”. É a isso que se refere.

Se você tiver um site que carrega determinados scripts primeiro, todo o site irá travar e parar de carregar até que seja concluído. Alguns elementos não podem ser carregados simultaneamente. Quando isso acontece, há um bloqueio para o novo conteúdo a ser exibido (bloqueio de renderização), bem como a entrada do usuário (o navegador e o servidor comunicam a entrada porque os processos estão paralisados ​​ou pausados).

Atualmente, o Google considera o FID / TBT como o mais importante dos Core Web Vitals e atribui a ele 30% do peso geral ao determinar a pontuação do Page Speed ​​Insights de seu site.

Primeira impressão com conteúdo

First Contentful Paint (FCP) é quando o primeiro elemento DOM é exibido, que geralmente é uma imagem ou texto. Essa métrica não mede elementos em branco (ou sem conteúdo), como cores de fundo sólidas ou uma tela em branco.

O FCP é uma métrica bastante interessante, pois não indica a velocidade geral do site. Ele reflete a velocidade percebida do site da perspectiva do usuário. O FCP mede o tempo em que um usuário verá o primeiro bit do seu site aparecer. Quando o usuário vê qualquer conteúdo do site aparecer rapidamente, sua percepção indica um site de carregamento rápido, mesmo que o restante do site demore um pouco mais para carregar.

A maior impressão com conteúdo

A maior impressão do conteúdo (LCP) de um site é o tempo que leva para que a maior seção do conteúdo da janela de exibição apareça. O ideal é que a maior parte do conteúdo apareça antes que o restante do seu site seja carregado. Isso não apenas indicará um FCP baixo, como discutimos acima, mas também dará ao usuário algo com que se ocupar enquanto outros scripts e mídia são carregados no navegador.

Normalmente, uma hero section ou um pedaço considerável formará o LCP. Mais do que o FCP, a métrica LCP é um quantificador melhor da experiência geral da página para o Google e deve ser um dos elementos em que você se concentra em melhorar em seu site antes de outros.

Mudança de layout cumulativa

Mudança cumulativa de layout (CLS) é uma medida de quanto o conteúdo do site muda de posição acima / abaixo da dobra conforme a página continua a carregar. Se você já acessou um site e viu as imagens e os botões saltando pela tela e não conseguiu clicar no que pretendia, esse é o CLS. Os elementos do site se movem sem seu comando, sem rolar, sem clicar, sem passar o mouse. As coisas simplesmente se movem por conta própria.

E é um fator importante na experiência da página para o Google. Ter uma interface em constante mudança é uma das coisas mais frustrantes que podem acontecer ao usuário de um site, causando erros de clique, pedidos incorretos em potencial e até mesmo uma simples frustração que os leva a abandonar o site.

Tempo para o primeiro byte

Time to First Byte (TTFB) é um conceito incrivelmente simples de entender. Ele mede quanto tempo leva para o navegador do usuário obter (não renderizar) o primeiro byte de informação do servidor. É isso. Basicamente, TTFB é literalmente o momento em que o navegador do usuário ouve o servidor dizer “oi”.

O TTFB mede literalmente qualquer informação que o navegador receba, visíveis ou não. Contente ou não. Embora não seja considerado um dos principais elementos vitais da web de prioridade mais alta, você deve prestar atenção a ele porque um TTFB baixo indica uma resposta rápida do servidor, que pode estar diretamente relacionada à velocidade geral de carregamento da página e interatividade. Quais são as métricas do web vitals de alta prioridade.

Índice de velocidade

O índice de velocidade é uma métrica relativa dependente do usuário, medindo o tempo que todo o conteúdo é renderizado acima da dobra. Pense no Índice de velocidade como a média de visualização rápida do desempenho geral e UX do seu site . Embora não entre em detalhes, uma pontuação do Índice de velocidade verde / laranja / vermelho do Google Page Speed ​​Insights é um tipo de classificação boa / ok / ruim.

Como o Google pesa diferentes métricas do Core Web Vitals de maneira diferente (como discutiremos a seguir), ter uma boa pontuação em alguns e ruim em outros pode não se traduzir em uma ótima experiência de página aos olhos do Google.

Qual é a métrica mais importante para o Core Web Vitals?

Bem, isso depende. O software Lighthouse do Google fornece uma média ponderada para seus vitais essenciais da Web, e as pontuações que os compõem podem mudar de importância conforme o Lighthouse evolui. Algumas das métricas têm mais impacto na UX do que outras em momentos diferentes.

No momento em que este artigo foi escrito, o Lighthouse estava na versão 8. Você pode ver sua pontuação de desempenho na imagem acima ou no texto abaixo em ordem decrescente:

1. Tempo total de bloqueio (30%)
2. Impressão do maior conteúdo (25%)
3. Mudança cumulativa de layout (15%)
4. Primeira impressão com conteúdo (10%)
5. Índice de velocidade (10%)
6. Tempo de interação (10%)

Portanto, para obter a melhor pontuação agora, você pode se concentrar em reduzir os recursos de bloqueio de renderização e garantir o carregamento rápido da maior parte do conteúdo acima da dobra . Isso contará mais para sua pontuação do Core Web Vitals do que as outras métricas combinadas. O que aumenta o seu page rank geral.

Esse não será sempre o caso, e os pesos mudarão, mas até o momento em que este livro foi escrito, TBT / FID e LCP são as principais métricas do CWV com CLS chegando perto do terceiro.

Takeaways em Plainer English

Tudo isso pode parecer muito técnico, mas o conceito realmente não é. A experiência da página usando Core Web Vitals é equilibrada em três elementos de pilar:

• Estabilidade do Site
• Reação e capacidade de resposta
• Velocidade e Desempenho

Ou em um inglês ainda mais claro:

• O site muda e reposiciona elementos à medida que carrega?
• Com que rapidez o usuário pode interagir com o site?
• Quão rápido o usuário pode ver coisas úteis?

Essas questões (independentemente de suas respostas) podem ser tratadas abordando a mudança cumulativa de layout , o primeiro atraso de entrada e a impressão do maior conteúdo , respectivamente.

O que não são Core Web Vitals?

Como dissemos acima, a ideia básica é que o Google pode rastrear a experiência do usuário no mundo real. O que isso significa na realidade é que os desenvolvedores da web e proprietários de sites precisam mudar sua mentalidade de aspectos mais simples e técnicos. O Google pode penalizá-lo nos insights de velocidade da página por não ter esses dados. Mas eles não vão recompensá-lo apenas por tê-los como há anos.

Essas métricas vitais não incluem os velhos padrões de compatibilidade e capacidade de resposta móveis . Nesse ponto, o Google considera que seu site é compatível com dispositivos móveis e responsivo. É importante, mas não está mais no topo da lista como antes.

O mesmo vale para SSL e para garantir que seu site seja executado em HTTPS . Com a onipresença de certificados SSL gratuitos por meio de hosts e serviços como o Let’s Encrypt, não vale mais a pena destacar um site seguro. É o estado padrão dos sites. O Google não impulsiona mais as páginas apenas por serem seguras.

O Google costumava dar a você um bônus por não ter um pop-up intersticial. Essas são as opções de e-mail em tela inteira que são carregadas imediatamente quando um usuário chega ao seu site. Mas, com o passar do tempo, a empresa não está mais recompensando você por não ter pop-ups desagradáveis. Eles vão dar um tapa no seu pulso por desperdiçar o tempo dos usuários.

Isso é desnecessário dizer, mas você não ficará animado por ter uma experiência de navegação segura em seu site (ou seja, sem malware). De muitas maneiras, esse é o nível mais baixo que um site pode definir. Não há recompensa por não prejudicar seus usuários, mas há uma penalidade.

Como medir as métricas do Core Web Vitals

Como o Google priorizou a experiência do usuário e o fato de você ter otimizado o Core Web Vitals, eles têm várias ferramentas para você usar para medir o seu site e sua posição.

• Lighthouse é o software subjacente que mede os principais sinais vitais da web. Ele é integrado a outras ferramentas, mas você também pode executar uma auditoria direta do Lighthouse para obter o máximo de informações possível. No entanto, é a mais técnica de todas as ferramentas disponíveis.
• A ferramenta Page Speed ​​Insights do Google é provavelmente a mais conhecida por medi-los, pois incorpora o Lighthouse em uma IU muito mais agradável. Dá a você uma visão completa de como o Google vê o seu site, mas também sugerimos que você use outras ferramentas para avaliar as coisas também. O Page Speed ​​Insights é conhecido por ser excepcionalmente duro até mesmo nos sites mais rápidos e bem projetados.
• O Google Search Console é um tipo diferente de serviço único para medir as métricas do CWV. Você obtém um relatório página por página sobre quais partes individuais de conteúdo e URLs precisam ser aprimoradas e quais itens essenciais estão faltando (ou não).
• As ferramentas GT Metrix e Pingdom são testes de velocidade e desempenho de terceiros que podem fornecer uma visão sobre suas métricas. Como eles não vêm diretamente do Google como os outros que mencionamos, você pode ver mais dados do mundo real e como os usuários de diferentes locais e usando diferentes tecnologias verão seu site.

Conclusão

A principal lição é que o usuário vem primeiro. Sempre. Seja com o conteúdo que você cria, o conteúdo que eles experimentam ou até mesmo sua percepção do conteúdo que eles experimentam. A maneira como eles veem seu site é mais importante do que como você o constrói. É certo que um site mal construído e projetado terá pontuações baixas. Portanto, os aspectos técnicos definitivamente importam. Mas é o resultado final das decisões técnicas nas quais o Core Web Vitals se concentra, não sua mera existência.

Artigo original por B.J. Keeton