O que são as Cores Web Vitals e como elas impactam o rankeamento de sites

As Cores Web Vitals são um conjunto de regras que um site tem que estar adaptado para oferecer uma boa navegabilidade aos usuários. Muitos desenvolvedores criam páginas de qualquer jeito e não se preocupam com o tempo de carregamento, quantidade de arquivos baixados, uso de excessivo de bibliotecas de terceiros e assim por diante, criando assim um site péssimo para o usuário e que também fica com um rankeamento ruim no Google, por exemplo.

O desenvolvimento web mudou, mas infelizmente muitos desenvolvedores não se atualizaram, acreditam que apenas o visual é o importante, enquanto na verdade, a acessibilidade, semântica e desempenho é crucial, algo que estava de lado até que o Google começou a “punir” esses sites.
As cores Web Vitals até o momento são divididas em três categorias, sendo elas:

• Largest Contentful Paint (LCP) -  tempo de carregamento de uma página e quanto tempo demora para que o conteúdo de maior relevância apareça. De acordo com o Google, tudo isso deve ocorrer no máximo em 2,5 segundos;
• First Input Delay (FID) - tempo que demora para que o usuário possa começar a interagir com a página, clicar em botões/links, preencher formulários e assim por diante. A recomendação é de 100 milissegundos ou menos;
• Cumulative Layout Shift (CLS) - esse é um ponto fácil de resolver e que impacta muitos sites, basicamente sempre que um site mudar seu layout, estará afetando o usuário. Quem nunca foi clicar em um botão e do nada apareceu um anúncio ou qualquer outra coisa? Essa métrica se refere a mudanças de layout.

Para testar a performance do seu site, você pode acessar o endereço https://web.dev/measure, incluir a URL do seu site no campo de texto e por fim, clicar no botão Run Audit.

Para cada uma das métricas acima, garantir que você está atingindo a meta recomendada para a maioria dos seus usuários, um bom limite a ser medido é o 75º percentual de carregamentos de página, segmentado por dispositivos móveis e computadores desktop. Fonte: web.dev

Vamos entender agora dois dos maiores agressores em páginas web.

Largest Contentful Paint (LCP)

Muitas coisas podem afetar o LCP que também impactam no FID, vamos ver algumas causas e suas soluções.

Revise a quantidade de script que está utilizando e minimize os arquivos. Às vezes usar frameworks como Bootstrap acelera o tempo de desenvolvimento, mas também acaba trazendo mais linhas de códigos do que o necessário, nesse caso, recompile o framework incluindo apenas os componentes necessários.

Se possível, empacotar todos os arquivos de javascript, por exemplo, em um único arquivo, dispensando inúmeros carregamentos.

Uma boa prática é também utilizar preload de fontes, imagens, css e Javascript. Também utilize dns-prefetch quando for necessário se comunicar com servidores de terceiro.
Para as imagens e iframes, utilize o atributo de lazy loading, carregando os componentes apenas quando necessário.

Adie o carregamento de scripts sem maior importância, use e abuse dos atributos async e defer. O ideal é colocar os Javascripts antes do fechamento da tag </body>.

Utilizar compressão gzip no servidor garante que os dados sejam transferidos mais rápido, afinal, eles serão compactados.

Evite o uso de comentários HTML desnecessários, mesmo que eles não sejam processados, serão baixados no cliente.

Arquivos de CSS contém diversos pecados, como duplicidade em classes/estilos, então, crie componentes universais e não saia duplicando estilos.

Fornecer arquivos com uma política de cache também é importante, definindo no servidor qual o tempo que um determinado arquivo leva para ser modificado, assim, o usuário não precisará fazer um novo download a cada nova requisição.

Garanta que está utilizando imagens com os tamanhos certos, ou seja, não inclua uma imagem de 1200x720 em um box de 500x400. Utilize JPG e WEBP sempre que possível.

Não utilize diversas fontes de texto, como Open Sans, por exemplo. Alguns sites baixam muitas fontes, como 11 em um cenário que identificamos. Lembre-se, tudo o que for arquivo externo precisa ser baixado e processado, as fontes, por exemplo, além do tempo de carregamento podem afetar o CLS.

 Minificar os arquivos de CSS e Javascript, garantindo o download de arquivos reduzidos.

Utilizar serviços de Cache e CDN também são um baita diferencial, mas lembre-se, CND entrega os problemas pelo caminho mais rápido.

Cumulative Layout Shift (CLS)

Quando estamos falando de CLS precisamos entender o que de fato está acontecendo, não existe uma regra universal que resolva 100% de todos os problemas, mas vamos ver alguns e suas soluções.

 Reservar espaço para banner e publicidades com min-height garantem que o layout não será modificado bruscamente quando algo aparecer.

 Define o width e height para todas as imagens, garantindo que o espaço para elas seja reservado.

Garanta que suas fontes estejam disponíveis o quanto antes e que ao ser carregada, os textos não tenham alterações. Uma boa saída para isso é utilizar no css o display como block.

A dica final é: analise com cuidado cada etapa do carregamento do seu site, você pode utilizar o site https://www.webpagetest.org, ele te mostra na aba Web Vitals os pontos que afetam o CLS e o mais legal, é que ele pinta de vermelho as partes afetadas.

Conclusão

Não se desespere nem tente alcançar a nota máxima, isso é algo que leva muito tempo, afinal, tudo deve ser medido e acompanhado nas métricas e relatórios do Google Search Console.

Sites estáticos e sem variações no seu conteúdo são os mais fáceis de resolver. Na verdade, já devem ser criados com nota máxima por se tratar de algo estático.

Sites grandes como jornais, players, entre outros, pode ser uma tarefa quase que impossível, visto que o código legado condena a manutenção e o desenvolvimento. Caso o site da sua empresa esteja muito ruim, talvez o menor esforço seja refazê-lo.

Apenas para complementar um problema que ocorria aqui na SatellaSoft, mas que nosso time de engenharia resolveu facilmente, foi em relação aos embeds do Youtube. Uma vez que os vídeos eram incorporados em nosso site, diversos arquivos foram baixados, como fontes para o player, arquivos de css, javascript e mais um monte de tranqueira. Para contornar esse problema, criamos um box de pré-visualização, mostrando a thumb com a opção de play, fazendo que o player final de embed seja criado apenas quando o usuário necessitar e não no carregamento da página.

Aprofunde mais seu conhecimento em: https://web.dev/i18n/pt/vitals/