Desempenho vital da Web

Odeio sites lentos. Eles são incômodos de usar e frustrantes de trabalhar. Mas o que significa ser “lento”? Costumava ser esperar o carregamento do documento. Depois, aguardar a página ficar pronta. Mas com tantos padrões assíncronos em uso atualmente, como podemos definir o que é “lento”?

O W3C tem trabalhado nisso com o novo Tempo do evento e API de temporização de elementose definiu alguns novos Web Vital para descrever as diferentes maneiras pelas quais o desempenho lento pode afetar uma página da Web. O Google vai até usar essas métricas vitais da Web como um fator de classificação de pesquisa!

Vamos dar uma olhada nelas e como podemos aplicá-las para manter nosso site rápido e nossas páginas bem classificadas.

1. Largest Contentful Paint (LCP)

Alguns sites veja como se tivessem sido carregados rapidamente, mas todo o conteúdo significativo ainda está esperando para ser carregado. Esse padrão fez com que o carregasse os números de desempenho parecem ótimos, mas o usuário ainda sente como se o site estivesse lento.

Maior tinta com conteúdo (LCP) é o tempo, desde o início de uma página, em que o maior bloco de conteúdo significativo foi carregado. O maior é medido na dimensão em pixels do elemento, portanto, pode ser qualquer coisa que ocupe muito espaço em sua interface do usuário. Pode ser uma imagem grande, um bloco de texto ou um anúncio realmente irritante.

As páginas da Web que mostram apenas o “quadro” da interface do usuário no documento principal e carregam o conteúdo de forma assíncrona terão pontuações de LCP ruins. Curiosamente, recentemente auditamos o desempenho na Web da pesquisa do Google e eles colocam em linha quase todo o conteúdo do documento original!

Saiba mais sobre o maior Contentful Paint

2. Mudança cumulativa de layout (CLS)

As páginas da Web que ficam mudando de lugar, desenhando novo conteúdo e empurrando para baixo as coisas que o usuário estava tentando ler, têm muitos Mudança de layout. O Layout Shift ocorre sempre que novos elementos adicionados à página mudam o posicionamento de outros elementos. Por exemplo, a renderização de um anúncio em cima do parágrafo que o senhor queria ler deveria estar. Olhando para o senhor The New York Times.

Mudança cumulativa de layout (CLS) é a soma de todas as mudanças de layout que ocorrem em uma página. Quando há muito conteúdo assíncrono, há muitas mudanças de layout e o CLS é alto.

Isso geralmente acontece quando grandes partes do conteúdo de uma página da Web são carregadas de forma assíncrona no documento por meio de uma chamada AJAX e renderização no lado do cliente. A publicidade de terceiros é o infrator clássico.

Saiba mais sobre a mudança cumulativa de layout.

3. Atraso da primeira entrada (FID)

As páginas da Web que carregam quantidades excessivas de JavaScript, pixels de rastreamento e dependências de ativos estão exigindo muito do navegador. Cada um desses ativos precisa ser descoberto, baixado, analisado e aplicado – e isso dá muito trabalho! Se o navegador estiver ocupado fazendo esse trabalho quando o usuário tentar usar sua página pela primeira vez, a sensação será de lentidão.

Atraso na primeira entrada (FID) é o tempo que a página fica ocupada quando o usuário tenta interagir com a página pela primeira vez. Essa não é uma medida do código do manipulador de eventos, é o tempo que o navegador atrasa o tratamento do evento porque está ocupado. Se o navegador estiver ocupado analisando muito JavaScript quando o usuário tentar clicar em um botão, haverá um grande FID.

Os desenvolvedores geralmente resolvem esse problema com uma tela de carregamento, que atrasa a primeira entrada em vez de resolver o problema: carregar muitas coisas!

Saiba mais sobre o atraso da primeira entrada

Medindo os sinais vitais da Web

Agora que conhecemos o conceito por trás dessas métricas vitais, como podemos medi-las? Todas elas são baseadas no rascunho da especificação da Element Timing API, que ainda não foi bem adotada. O Chrome (e outros navegadores baseados no Blink) já oferece suporte a isso, portanto, o senhor pode começar a capturar essas métricas para alguns de seus usuários.

try {
    new PerformanceObserver(entryList => {
      entryList.getEntries().forEach(console.log)
    }).observe({ type: "layout-shift", buffered: true });

    new PerformanceObserver(entryList => {
      entryList.getEntries().forEach(console.log)
    }).observe({ type: "largest-contentful-paint", buffered: true });

    new PerformanceObserver(entryList => {
      entryList.getEntries().forEach(console.log)
    }).observe({ type: "first-input", buffered: true });
}
catch(e) { /* API is not supported */ }

A medição de cada um desses tipos tem suas próprias pegadinhas e condições especiais. Por exemplo, para lidar com ”layout-shift”precisamos somar todos os valores que recebemos porque estamos medindo o cumulativo mudança de layout. Também devemos considerar se a mudança de layout foi causada por uma entrada de usuário, que é uma das propriedades personalizadas anexadas a essa entrada.

let cumulativeLayoutShift = 0;
function handleLayoutShift(entry) {
  if (!entry.hadRecentInput) {
    cumulativeLayoutShift += entry.value;
  }
}

Os links acima abrangem as várias implementações e requisitos de cada métrica. O senhor precisará decidir como deseja capturar e salvar essas métricas, bem como gerar relatórios sobre elas.

Ou a Request Metrics pode fazer isso para o senhor! Solicitar métricas é o método mais rápido, simples e mais barato maneira de entender o desempenho da Web do usuário real. Ele pode capturar essas métricas, juntamente com vários outros dados úteis, e reduzi-las ao que é realmente importante. Tudo isso por apenas US$ 10/mês.

É muito mais fácil do que procurar essas APIs móveis por conta própria.

Vamos rápido.