[Web] O quão bom é seu site para os usuários?

Cada dia que passa, mais e mais soluções são incorporadas na web. Por mais que processos de discovery e análises sejam feitos para as mais diferentes plataformas (computadores, celulares, etc), atingir o ponto de ter algo realmente bom para um público diversificado é algo bem difícil.

A fim de ajudar empresas e desenvolvedores a criarem melhores soluções, a Google criou a Web Vitals, um sistema único de métricas que tem como objetivo quantificar experiências de usuários como um todo nas aplicações. Seu core é dividido em 3 grandes premissas, são elas:

Largest Contentful Paint (LCP): 

Mede o desempenho do carregamento da página. Apesar de parecer como tempo de resposta do servidor, essa métrica na verdade ela mede o tempo necessário para carregar grandes conteúdos no site. Conteúdo, neste caso, são apenas itens que tem valor para usuário exemplo bloco de textos, imagens, vídeos e etc.

Nesse cálculo entram vários fatores, como viewport, redirecionamento de imagens e etc. Mostrando que mesmo que você tenha investido milhares em CDN e coisas do tipo, se existir um spinner (loading) de coisas carregando no meio da navegação, é muito provável que receberá um péssimo score.

First Input Delay (FID): 

Mede o nível de interatividade da página. Um ponto importante sobre o FID é que ele só considera a primeira iteração, ou seja, quando carregou a página de entrada de usuário no site (tipo a Home) e ele navega para outra parte interna, através de um link ou outra coisa do tipo, é medido o tempo de resposta dessa primeira iteração. Aqui sim é tempo de resposta do servidor (se tiver).

Cumulative Layout Shift (CLS): 

Mede a estabilidade visual da página. Bem complicado essa, mas basicamente é o quão fiel e estável é o layout do seu site. Exemplo: Você está migrando seu sistema legado e já quer dar o ar de sofisticação na página de entrada, porém quando a pessoa navega pelo site ele vai para uma página legada (que não foi migrada ainda), mudando totalmente a estabilidade, experiência e navegação.

Podemos considerar também tamanhos desproporcionais de imagens, anúncios invasivos e iframes totalmente distintos, além de outros detalhes que contribuem para um péssimo score.

Bem, esses 3 amigões são apenas o Core da Web Vitals que engloba muitos outros tópicos como Mobile Friendly, Safe Browsing e etc. Para auxiliar em tais métricas e melhoria de performance, hoje o Google Chrome já vem com uma ferramenta sensacional para análises em sua DevTools, o Lighthouse, que ajuda com todas essas métricas testando o site e dando dicas de melhora.

Mas no mundo de ferramentas tem muitas outras para lhe auxiliar como PageSpeed Insights, Chrome DevTools, Search Console, web.dev's measure tool, Web Vitals Chrome extension e Chrome UX Report.

Bem, por hoje é só, que nossos sites sejam cada vez melhores! Abraços!