Core Web Vitals

O que são as Core Web Vitals?

As Core Web Vitals são métricas criadas pelo Google para melhorar a experiência do usuário nos sites. A grande variedade de ferramentas disponíveis para analisar a velocidade de carregamento foi um dos fatores que o Google considerou ao unificar todas essas métricas, com o objetivo de simplificar um pouco a complexidade que envolve a otimização dos tempos de carregamento. Essa iniciativa pretende nos fazer focar nesses "sinais de qualidade" que são tão importantes para alcançar uma experiência de usuário ótima.

O Google resume em poucas palavras aquilo em que as Core Web Vitals se concentram:

• ›

  Experiência de carregamento

• ›

  Interatividade

• ›

  Estabilidade visual do conteúdo da página

Largest Contentful Paint ou LCP

O LCP ou Largest Contentful Paint é uma métrica que nos diz o tempo de carregamento para que o "maior" pedaço de conteúdo visível ao usuário esteja disponível e útil. Em outras palavras, o Google está dizendo que os elementos colocados naquilo que conhecemos como "Above the Fold" precisam carregar rápido e ser legíveis, e estar assim disponíveis ao usuário para que ele possa interagir com eles.

Vale esclarecer que os elementos que aparecem quando o usuário clica na tela ou rola a página não afetam o LCP. O conteúdo maior pode ser um bloco de texto, um vídeo, uma imagem, etc.

Classificação do estado do LCP de acordo com os tempos. Imagem © web.dev

Que tempo o Google considera ótimo?

Como podemos ver no gráfico, o Google considera que o tempo máximo para carregar o LCP e proporcionar uma boa experiência de usuário é inferior a 2,5 segundos. É importante notar que, durante o carregamento, o elemento LCP pode mudar.

Como posso saber o LCP de um URL?

No próprio navegador Chrome, executando uma auditoria Lighthouse, temos a opção de saber o que o Google considera ser o maior conteúdo a carregar. Veja como:

Que fatores podem influenciar o carregamento do LCP?

Várias ações influenciam o tempo de carregamento do LCP ser maior do que o esperado. Esses elementos ou ações são:

• ›

  Resposta do servidor

• ›

  Consultas ao banco de dados

• ›

  Respostas de API que demoram a resolver

• ›

  CSS ou JS que bloqueia a renderização

• ›

  Lentidão no carregamento de outros recursos

• ›

  Imagens não otimizadas

• ›

  Etc.

First Input Delay ou FID

O FID ou First Input Delay é uma métrica que indica quanto tempo a página leva para reagir quando o usuário interage com algum dos elementos.

Métricas tiradas do Pagespeed

Na ferramenta Pagespeed, que o Google disponibilizou a todos há algum tempo, podemos ver a referência a essa métrica. Os valores considerados bons devem estar abaixo dos 100 ms.

Classificação do estado do First Input Delay (FID) de acordo com os tempos. Imagem © web.dev

As principais causas dos problemas com essa métrica (FID) vêm da execução de JavaScript, por isso precisaríamos identificar que parte do código está fazendo com que a página demore a reagir à interação. Pessoalmente, já passei por esse problema com cargas de JS de publicidade.

Cumulative Layout Shift ou CLS

O Cumulative Layout Shift é uma métrica que estabelece limites no carregamento de elementos que modificam a visualização conforme carregam. Estamos falando de dar estabilidade aos elementos na tela para que a visualização não se desloque conforme outros recursos carregam.

O Google considera (bem, o Google e qualquer usuário) que é muito incômodo que, quando começamos a interagir com uma página (seja lendo, rolando a tela, etc.), um elemento que carrega mais tarde desloque a posição do usuário em relação ao conteúdo e o force a corrigir rolando a página.

Esse exemplo nos ajuda a explicar melhor como essa métrica funciona. Inicialmente vemos o conteúdo carregado no lado esquerdo. Quando o Google fala em estabilidade, ele se refere a o carregamento de um terceiro elemento não deslocar aqueles que já tinham sido carregados. Como vemos na imagem da direita, o carregamento do vídeo do YouTube deslocou os dois blocos que estavam carregados inicialmente.

Por que as Core Web Vitals são importantes?

Desde que convivemos com buscadores, e mais especificamente com o Google, ele vem incorporando obrigações para qualquer pessoa que tenha um site e queira que ele seja uma das opções nos resultados de busca.

Melhorar a acessibilidade a partir de todos os dispositivos, favorecer a navegação segura sob um protocolo de segurança, ou penalizar sites que usavam publicidade invasiva (interstitials) foram algumas das batalhas do gigante de tecnologia.

Essas métricas são indicadores que o Google nos dá para apontar quais partes do site podem ser um problema para o usuário mas... isso significa que são importantes?

Quer entendamos os sites do ponto de vista dos "robots" ou do ponto de vista dos "usuários", essas métricas são indicadores de que os nossos sites não estão funcionando tão bem quanto deveriam. Já vimos em vários estudos como o tempo de carregamento influencia a conversão e a paciência do usuário. Hoje elas não influenciam o ranking, mas vamos ignorar essas métricas?

Da nossa parte, com certeza vamos levá-las em conta.

As Core Web Vitals afetam o ranking?

Hoje, tudo o que sabemos é que as métricas para melhorar a experiência do usuário estão se tornando cada vez mais importantes, e algumas delas já estão sendo levadas em conta nos resultados de busca. No artigo de 28 de maio no blog do Google, foi anunciado que em 2021 ele espera lançar uma nova Update para incorporar várias métricas relacionadas à experiência do usuário.

Basta lembrar de como o Google gerenciou o Mobile First Index e os avisos prévios. Nesse caso, voltando a citar o artigo de maio, ele avisa que haverá uma notificação prévia de pelo menos 6 meses, então... haverá uma update no final do ano que vem?

Ferramentas para otimizar as Core Web Vitals

Agora que falamos do que são as Core Web Vitals e da importância que elas terão nos próximos meses, é hora de começar a trabalhar na otimização dessas métricas. Com diferentes ferramentas vamos poder atacar os problemas detectados e conseguir uma melhoria de desempenho.

Lighthouse

O Lighthouse é uma poderosa ferramenta open-source que encontramos no Chrome. Com o Lighthouse, podemos auditar o nosso site, executando diferentes testes para obter resultados sobre as deficiências ou partes da página que precisam ser otimizadas. Entre essas partes estão as métricas das Core Web Vitals.

Imagem retirada dos resultados de uma auditoria Lighthouse

Page Speed Insights

Page Speed Insights é outra opção que o Google nos oferece para obter os dados de desempenho do nosso site. Essa ferramenta nos mostra até gráficos das métricas mais importantes e o seu estado. O Page Speed Insights se baseia em um relatório de experiência do usuário cujo objetivo é obter dados em comparação com outros sites.

Métricas oferecidas pelo Page Speed Insights

Chrome UX

Chrome User Experience Report é um conjunto de dados que o Google fornece sobre o comportamento dos usuários no mundo todo por meio do Chrome. Para acessar esses dados você precisa usar o Big Query, além de ter uma conta Google Cloud.

Pelo Google Data Studio, o acesso ficou mais fácil e eles têm tudo semipronto para nós neste Dashboard

Chrome Dev Tools

Podemos analisar as métricas das Core Web Vitals não só com o Lighthouse; se mergulharmos nas ferramentas de desenvolvedores do Chrome, podemos chegar às mesmas conclusões. Por exemplo, na aba "Performance", se fizermos uma gravação ou um novo carregamento, podemos obter informação valiosa sobre como o nosso URL está se comportando.

Captura de tela feita na opção Performance das Chrome Dev Tools

Web.Dev

Há sempre uma forma mais fácil de fazer as coisas, pelo menos quando se trata de conhecer as nossas Core Web Vitals. No site oficial, temos uma página que detalha cada métrica e nos dá uma explicação do que é e práticas para melhorá-la.

Além disso, na Chrome Store temos uma extensão que nos dá essa informação ao entrar em cada URL:

Com uma indicação em vermelho ou verde podemos ver o estado do nosso URL em relação a essas métricas:

Captura de tela dos resultados dados pela extensão Web Vitals

Search Console

O Search Console é uma ferramenta indispensável para qualquer webmaster. Foi adicionado um recurso que nos ajuda a ver que URLs têm problemas com essas 3 métricas (LCP, FID e CLS). No menu da esquerda, temos a opção "Core Web Vitals". Quando escolhemos essa opção, aparecerão dois gráficos mostrando os resultados dos URLs por dispositivo. Se escolhermos o dispositivo (desktop ou mobile), veremos em detalhe que URLs têm problemas.

Não se assuste se vir um número alto de URLs à direita; isso é relativamente normal, já que os problemas costumam ocorrer por tipos de página (por exemplo, posts de blog) e trabalhar em um deles vai nos dar a melhoria em todos eles.

Conclusões

Essa passagem pelas Core Web Vitals pretende nos apresentar métricas que vão ganhar cada vez mais protagonismo, e nós, sejamos SEOs ou Webmasters, vamos ter que conviver com elas. Aqui na SEO Alive, queremos recomendar que você use todas essas ferramentas que colocamos à sua disposição, que sem dúvida vão te ajudar a melhorar o desempenho WPO do seu site.

*Topa o desafio de melhorar a velocidade do seu site? Faça um teste com qualquer uma das ferramentas que mencionamos e nos envie uma mensagem com uma captura de tela. Damos uma dica para você melhorar tudo, totalmente de graça! *