Devagar se vai ao longe… será?
O que são as Core Web Vitals e como estas ajudam a melhorar a performance dos websites
Resumo
As Web Vitals são um conjunto de métricas para avaliar a performance de um website e foram criadas pela Google. Ao melhorar a performance é melhorada também a experiência de utilização do site, sendo que estas métricas são uma forma mais objetiva de avaliação servindo como um dicionário comum para os desenvolvedores. Estas métricas são baseadas em dados recolhidos de utilizadores reais e são projetadas para ajudar a identificar e corrigir problemas que podem impactar negativamente a performance dos sites. Estas métricas vão ser abordadas de seguida, bem como algumas ferramentas que as utilizam e permitem aos desenvolvedores ter uma avaliação da performance dos seus websites.
A performance de um site é algo muito importante para os seus desenvolvedores, pois este pode ser o fator decisivo entre um utilizador continuar ou não a utilizar o site. A performance pode ser definida como quão rápido um site é a fazer o loading dos conteúdos ou a renderizar a página e quão bem responde à interação do utilizador. Esta pode ser medida de acordo com algumas métricas definidas.
A Google criou uma iniciativa, chamada Web Vitals, com este mesmo objetivo de melhorar a performance e ajudar os desenvolvedores a melhorarem a experiência de utilização dos seus websites. Para além disto, ao ser feita uma avaliação do website de acordo com estas métricas, é-lhe atribuída uma pontuação neste quesito que vai também influenciar a ordem de aparecimento deste nos resultados das pesquisas no Google (este sistema começou a ser implementado em 2021).
Dentro das Web Vitals existem as chamadas Core Web Vitals, que são as principais métricas que se aplicam a todas as páginas web e estas têm em conta o tempo de carregamento, a interatividade e a estabilidade visual do website. Para avaliar estes parâmetros de forma mais objetiva, as Core Web Vitals apresentam 3 métricas:
- Largest Contentful Paint (LCP), ou Maior Renderização de Conteúdo, como forma de avaliar o desempenho do carregamento. Para o utilizador ter uma boa experiência de utilização, o LCP deve ocorrer dentro de 2,5 segundos após o início do carregamento da página. Isto significa que todos os conteúdos principais como imagens, textos e vídeos devem aparecer rapidamente após a página ser carregada. Afinal, ninguém gosta de ficar à espera!
- First Input Delay (FID), ou Atraso da Primeira Entrada, como forma de avaliar a interatividade da página. Isto refere-se à medição da responsividade do carregamento e quantifica a experiência que os utilizadores têm ao tentar interagir com páginas que não respondem. A FID mede o tempo desde o momento em que um utilizador interage pela primeira vez com uma página (por exemplo botões, links e campos de texto) até ao momento em que o browser consegue processar esta informação e fornecer a resposta àquilo que foi acionado. De forma a melhorar a experiência de utilização, as páginas devem ter um FID de 100 milissegundos ou menos.
- Cumulative Layout Shift (CLS), ou Mudança Cumulativa de Layout, como forma de avaliar a estabilidade visual. Esta métrica refere-se a um dos problemas mais frustrantes que podes ter ao interagir com um elemento, como quando um botão em que estás prestes a clicar, de repente muda de posição e acabas por clicar no sítio errado…
Isto deve-se muitas vezes ao carregamento tardio do conteúdo que se encontra mais acima na página que acaba por mudar a informação que se segue na página. A CLS mede a maior explosão de ocorrências de mudança de layout. Ou seja, o maior conjunto de mudanças de layout individuais em sucessão, que ocorre com 1 segundo de diferença entre elas (no máximo), durante um intervalo de 5 segundos. Cada explosão de mudanças de layout é também chamada de janela de sessão.
Por fim, as páginas devem manter um CLS de 0.1 ou inferior para uma boa experiência de utilização.
Agora que já conheces as Core Web Vitals e aquilo a que elas se referem, vou abordar algumas ferramentas que permitem fazer uma avaliação aos websites com base nelas. Estas ferramentas podem-se dividir em 2 grupos principais: ferramentas de campo e ferramentas de laboratório. As primeiras utilizam dados que capturam o desempenho experimentado pelos utilizadores reais de um site, as últimas utilizam dados de laboratório, também conhecidos como dados sintéticos, recolhidos de um ambiente controlado. Esta é a melhor forma de testar o desempenho dos recursos durante o desenvolvimento, já que nesta fase ainda não há acesso à experiência dos utilizadores reais.
Na tabela abaixo podes ver a lista destas ferramentas e aquilo que cada uma permite medir:
As 3 primeiras — PageSpeed Insights, Chrome UX Report e Search Console — utilizam dados de campo, enquanto as restantes — Chrome DevTools, Lighthouse e extensão Web Vitals — utilizam dados de laboratório. Em algumas destas ferramentas está presente o TBT (Total Blocking Time) em vez do FID dado este apenas poder ser medido em situação reais e não de laboratório.
Uma das ferramentas mais interessantes e mais acessíveis com que te podes deparar no dia-a-dia ao utilizar as developer tools do teu browser, nomeadamente do Chrome, é o Lighthouse.
Neste, para além de poderes ter acesso à avaliação da performance tens também acesso a informação sobre SEO (Search Engine Optimization), melhores práticas e acessibilidade, entre outras, que podem ser muito úteis para o desenvolvimento do website e para melhorar a sua experiência de utilização.
Depois do Lighthouse fazer a avaliação, este aplica ao teu website uma pontuação (numa escala de 0 a 100) e também te informa sobre as áreas que precisam ser melhoradas de forma detalhada! No exemplo abaixo podes ver que foi obtida uma pontuação, a verde, de 75% para performance e abaixo desta secção principal são apresentadas as métricas das Web Vitals. Mais abaixo, o Lighthouse apresenta-te as formas de melhorar a performance.
Um exemplo de funcionalidade que se relaciona diretamente com a métrica de Cumulative Layout Shift (CLS) é a captura de elemento, que permite identificar o elemento ou parte da página que está a criar mudanças de layout apresentando a posição em que este se encontra na página, facilitando a sua correção.
Neste pequeno vídeo podes ver uma demonstração desta ferramenta e as suas possíveis formas de utilização:
Toda a informação em detalhe sobre estas ferramentas e métricas pode ser encontrada no website criado por membros do Chrome. Aqui são destacadas algumas funcionalidades de cada ferramenta e a sua utilidade:
- Lighthouse para otimizares a experiência de utilização e para te certificares de que estás a ter em atenção as Core Web Vitals;
- PageSpeed Insights para comparares a performance das Core Web Vitals em campo com as de laboratório;
- Chrome User Experience Report API para veres a performance do teu site, já implementado e funcional, nos últimos 28 dias;
- Chrome Devtools no painel “performance” e na secção “experiência” para teres maior detalhe e fazeres debug de Core Web Vitals específicas;
- Relatório de Core Web Vitals da Search Console para um resumo da performance, com dados de campo reais do teu site;
- Extensão Web Vitals para rastreares a performance de uma página em tempo real.
Por fim, e para concluir, deixo um vídeo que resume aquilo que são as Core Web Vitals:
