Squad Front

Appearance

Web Vitals ​

Web Vitals é uma iniciativa do Google para fornecer orientações unificadas de sinais de qualidade que são essenciais para entregar uma excelente experiência do usuário na web.

1. Core Web Vitals (CWV) ​

As Core Web Vitals são o subconjunto de Web Vitals que se aplicam a todas as páginas da web, devem ser medidas por todos os proprietários de sites e aparecerão em todas as ferramentas do Google. Cada uma representa uma faceta distinta da experiência do usuário: carregamento, interatividade e estabilidade visual.

A. LCP (Largest Contentful Paint) ​

  • O que é: Mede o desempenho de carregamento. Para fornecer uma boa experiência ao usuário, o LCP deve ocorrer dentro de 2,5 segundos após o início do carregamento da página.
  • Foco: O tempo que leva para o maior bloco de conteúdo (imagem, vídeo ou texto) se tornar visível.

B. FID (First Input Delay) / INP (Interaction to Next Paint) ​

  • O que é: Mede a interatividade. O FID mede o tempo desde que um usuário interage pela primeira vez com sua página até o momento em que o navegador é capaz de responder a essa interação.
  • Nota: O INP é o sucessor do FID, medindo a latência geral de todas as interações na página.
  • Meta: Um bom INP é de 200 milisegundos ou menos.

C. CLS (Cumulative Layout Shift) ​

  • O que é: Mede a estabilidade visual. Para fornecer uma boa experiência ao usuário, as páginas devem manter um CLS de 0,1 ou menos.
  • Foco: Mudanças inesperadas de layout (ex: um botão que se move para baixo porque uma imagem carregou acima dele).

2. Por que isso importa? ​

  1. Retenção de Usuários: Páginas que demoram a carregar ou que "pulam" conteúdo frustram o usuário, levando ao abandono (bounce rate).
  2. SEO (Search Engine Optimization): O Google utiliza os sinais de CWV como fator de rankeamento. Sites rápidos aparecem primeiro.
  3. Conversão: Especialmente em e-commerce e saúde, cada milissegundo conta para converter um acesso em um agendamento ou venda.

3. Como melhorar no nosso projeto? ​

No nosso ecossistema de Telemedicina, a performance é crítica:

  • Imagens: Sempre use dimensões fixas ou placeholders (Skeletons) para evitar o CLS.
  • JavaScript: Evite tarefas longas na thread principal que bloqueiem o INP. Use Web Workers para cálculos pesados.
  • Fontes: Use font-display: swap para que o texto seja legível enquanto a fonte customizada carrega.
  • Hydration: Em aplicações React pesadas, cuidado com o tempo de hidratação que pode impactar a interatividade inicial.

Como fazer vs Como não fazer ​

✅ Como fazer ​

  • Monitore o Lighthouse e o Chrome User Experience Report (CrUX).
  • Utilize Skeleton Screens para reservar espaço para conteúdos assíncronos.
  • Otimize o caminho crítico de renderização (Critical CSS).

❌ Como não fazer ​

  • Ignorar o peso de bibliotecas externas (ex: momentos, lodash gigante) que aumentam o LCP.
  • Inserir anúncios ou banners dinâmicos no topo da página sem reserva de espaço (causa CLS).
  • Carregar todo o JavaScript da aplicação de uma vez só (use Code Splitting).