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 utilizador 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 estas métricas, com o objetivo de simplificar um pouco a complexidade que envolve a otimização dos tempos de carregamento. Esta iniciativa pretende fazer-nos focar nestes "sinais de qualidade" que são tão importantes para alcançar uma experiência de utilizador ótima.

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

• ›

  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 utilizador esteja disponível e útil. Por outras palavras, o Google está a dizer que os elementos colocados naquilo que conhecemos como "Above the Fold" têm de carregar rapidamente e ser legíveis, e estar assim disponíveis ao utilizador para que possa interagir com eles.

Convém esclarecer que os elementos que aparecem quando o utilizador clica no ecrã ou faz scroll 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 utilizador é 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 browser Chrome, através da execução de 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 superior ao esperado. Estes elementos ou ações são:

• ›

  Resposta do servidor

• ›

  Consultas à base 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 demora a reagir quando o utilizador 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 esta 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 esta métrica (FID) vêm da execução de JavaScript, por isso teríamos de identificar que parte do código está a fazer com que a página demore a reagir à interação. Pessoalmente já experienciei este 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 à medida que carregam. Estamos a falar de proporcionar estabilidade aos elementos no ecrã para que a vista não se desloque à medida que outros recursos carregam.

O Google considera (bem, o Google e qualquer utilizador) que é muito incómodo que, quando começámos a interagir com uma página (seja a ler, a fazer scroll, etc.), um elemento que carrega mais tarde desloque a posição do utilizador relativamente ao conteúdo, forçando-o a corrigir fazendo scroll.

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

Por que são importantes as Core Web Vitals?

Desde que coexistimos com motores de busca, e mais especificamente com o Google, este tem vindo a incorporar 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 tecnológico.

Estas métricas são indicadores que o Google nos dá para apontar que partes do site podem ser um problema para o utilizador mas... isto significa que são importantes?

Quer entendamos os sites do ponto de vista dos "robots" ou do ponto de vista dos "utilizadores", estas métricas são indicadores de que os nossos sites não estão a funcionar tão bem como deviam. Já vimos em vários estudos como o tempo de carregamento influencia a conversão e a paciência do utilizador. Atualmente não influenciam o ranking, mas vamos ignorar estas métricas?

Da nossa parte, vamos certamente tê-las em conta.

As Core Web Vitals afetam o ranking?

A dia de hoje, tudo o que sabemos é que as métricas para melhorar a experiência do utilizador estão a tornar-se cada vez mais importantes, e algumas delas já estão a ser tidas em conta nos resultados de busca. No artigo de 28 de maio no blog do Google, foi anunciado que em 2021 espera lançar uma nova Update para incorporar várias métricas relacionadas com a experiência do utilizador.

Só temos de nos lembrar de como geriu o Mobile First Index e os avisos prévios. Neste caso, voltando a referir-nos ao artigo de maio, avisa que haverá uma notificação prévia de pelo menos 6 meses, por isso... haverá uma update no final do próximo ano?

Ferramentas para otimizar as Core Web Vitals

Agora que falámos do que são as Core Web Vitals e da importância que terão nos próximos meses, é altura de começar a trabalhar na otimização destas métricas. Através de diferentes ferramentas vamos poder abordar os problemas detetados e conseguir uma melhoria de desempenho.

Lighthouse

O Lighthouse é uma poderosa ferramenta open-source que encontramos no Chrome. Através do Lighthouse, podemos auditar o nosso site, executando diferentes testes para obter resultados sobre as carências ou partes da página que precisam de 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 fornece para obter os dados de desempenho do nosso site. Esta ferramenta mostra-nos até gráficos das métricas mais importantes e o seu estado. O Page Speed Insights baseia-se num relatório de experiência do utilizador 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 utilizadores em todo o mundo através do Chrome. Para aceder a estes dados tem de usar o Big Query, bem como ter uma conta Google Cloud.

Através do Google Data Studio, facilitaram o acesso e têm tudo semi-pronto 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 developer do Chrome, podemos chegar às mesmas conclusões. Por exemplo, no separador "Performance", se fizermos uma gravação ou um novo carregamento, podemos obter informação valiosa sobre como o nosso URL se está a comportar.

Captura de ecrã tirada 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á esta informação ao entrar em cada URL:

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

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

Search Console

O Search Console é uma ferramenta indispensável para qualquer webmaster. Foi adicionada uma funcionalidade que nos ajuda a ver que URLs têm problemas com estas 3 métricas (LCP, FID e CLS). No menu da esquerda, temos a opção "Core Web Vitals". Quando escolhemos esta opção, aparecerão dois gráficos a mostrar 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 elevado de URLs à direita; isto é relativamente normal, já que os problemas costumam ocorrer por tipos de página (por exemplo posts de blog) e trabalhar num deles vai conseguir-nos a melhoria em todos eles.

Conclusões

Esta passagem pelas Core Web Vitals pretende apresentar-nos métricas que vão ganhar cada vez mais protagonismo, e nós, sejamos SEOs ou Webmasters, vamos ter de conviver com elas. Da SEO Alive, queremos recomendar que faça uso de todas estas ferramentas que lhe fornecemos, que sem dúvida vão ajudá-lo a melhorar o desempenho WPO do seu site.

*Aceita o desafio de melhorar a velocidade do seu site? Faça um teste com qualquer uma das ferramentas que mencionámos e envie-nos uma mensagem com uma captura de ecrã. Damos-lhe uma dica para a melhorar totalmente grátis! *