Os efeitos de desempenho do carregamento lento em excesso

Orientações baseadas em dados para imagens de carregamento lento com as Core Web Vitals em mente.

Felix Arntz

Rick Viscomi

O carregamento lento é uma técnica que adia o download de um recurso até que ele seja necessário para conservar dados e reduzir a contenção de rede em recursos críticos. Ele se tornou um padrão da Web em 2019, e hoje o loading="lazy" para imagens tem suporte da maioria dos principais navegadores.

Este guia resume como os dados de transparência na Web disponíveis publicamente e os testes A/B ad hoc foram analisados para entender as características de adoção e desempenho do carregamento lento de imagens no nível do navegador. As descobertas incluíram que o carregamento lento pode ser uma ferramenta incrivelmente eficaz para reduzir bytes de imagem desnecessários, mas o uso excessivo pode afetar negativamente o desempenho. Concretamente, essa análise mostra que o carregamento mais rápido de imagens na janela de visualização inicial, enquanto o carregamento lento do restante é livre, pode nos oferecer o melhor dos dois mundos: menos bytes carregados e melhorias nas Core Web Vitals.

Adoção

De acordo com os dados mais recentes do HTTP Archive (em inglês), o carregamento lento de imagens integrado é usado por 29% dos sites, e a adoção dele está crescendo rapidamente.

A consulta dos dados brutos no projeto HTTP Archive nos dá uma compreensão mais clara dos tipos de sites que estão impulsionando a adoção: 84% dos sites que usam carregamento lento de imagens no nível do navegador usam o WordPress, 2% usam outro CMS e os 14% restantes não usam um CMS conhecido. Esses resultados esclarecem como o WordPress está liderando a mudança na adoção.

Também é importante observar a taxa de adoção. Há um ano, em julho de 2020, os sites do WordPress que usam carregamento lento formavam dezenas de milhares de sites, cerca de 6 milhões (1% do total). Desde então, a adoção do carregamento lento apenas no WordPress cresceu para mais de um milhão de sites (14% do total).

Desempenho correlacional

Aprofundando-se no arquivo HTTP, é possível comparar o desempenho das páginas com e sem carregamento lento de imagens no nível do navegador com a métrica Largest Contentful Paint (LCP). Os dados da LCP vêm das experiências reais do Chrome User Experience Report (CrUX, na sigla em inglês), e não dos testes sintéticos do laboratório. O gráfico a seguir usa um diagrama em caixa para visualizar as distribuições da LCP do 75o percentil de cada página: as linhas representam os percentis 10 e 90, e as caixas representam os percentis 25 e 75.

A página mediana sem carregamento lento tem uma LCP de 75o percentil de 2.922 milissegundos, em comparação com 3.546 milissegundos para a página mediana com carregamento lento. Em geral, os sites que usam carregamento lento tendem a ter um desempenho pior da LCP.

É importante ressaltar que esses resultados são correlações e não necessariamente indicam que o carregamento lento é a causa do desempenho mais lento. Se os sites do WordPress costumam ser um pouco mais lentos e, considerando o quanto eles compõem a coorte de carregamento lento, isso pode explicar a diferença. Para eliminar essa variabilidade, o foco pode ser restrito especificamente aos sites do WordPress.

Infelizmente, o mesmo padrão surge ao detalhar as páginas do WordPress. As que usam carregamento lento tendem a ter um desempenho de LCP mais lento. A página mediana do WordPress sem carregamento lento tem uma LCP de 75o percentil de 3.495 milissegundos, em comparação com 3.768 milissegundos para a página mediana com carregamento lento.

Isso ainda não prova que o carregamento lento faz com que as páginas fiquem mais lentas, mas usá-lo coincide com um desempenho mais lento. Para tentar responder à pergunta sobre causalidade, um teste A/B baseado em laboratório foi configurado.

Desempenho causal

O objetivo do teste A/B era provar ou refutar a hipótese de que o carregamento lento de imagens integradas, implementado no núcleo do WordPress, resultava em uma performance de LCP mais lenta e em menos bytes de imagem. A metodologia usada foi para testar um site de demonstração do WordPress com o tema twentytwentyone. Foram testados os tipos de arquivo e de página única, que são como páginas iniciais e de artigos, em computadores e dispositivos móveis emulados usando o WebPageTest. Cada combinação de páginas com e sem carregamento lento ativado foi testada, e cada teste foi executado nove vezes para conseguir o valor médio de LCP e o número de bytes da imagem.

Esses resultados comparam a LCP mediana em milissegundos para testes em arquivos e páginas únicas para computadores e dispositivos móveis. Quando o carregamento lento era desativado nas páginas de arquivo, a LCP melhorou com uma margem significativa. No entanto, em páginas únicas, isso fez menos diferença.

A desativação do carregamento lento parece deixar as páginas únicas um pouco mais rápidas. No entanto, a diferença na LCP é menor que um desvio padrão nos testes de computadores e dispositivos móveis. Isso pode ser atribuído à variação e considere a mudança neutra em geral. Em comparação, a diferença para as páginas de arquivo é mais próxima de dois a três desvios padrão.

Esses resultados comparam o número médio de bytes da imagem (em KB) para cada teste. Como esperado, o carregamento lento tem um efeito positivo muito claro na redução do número de bytes da imagem. Se um usuário real percorresse a página inteira, todas as imagens seriam carregadas mesmo assim à medida que cruzassem para a janela de visualização, mas esses resultados mostram o desempenho aprimorado do carregamento da página inicial.

Para resumir os resultados do teste A/B, a técnica de carregamento lento usada pelo WordPress claramente ajuda a reduzir bytes de imagem em detrimento de uma LCP atrasada.

Testar uma correção

O aspecto mais importante da implementação de carregamento lento atual do WordPress para esse experimento é que ela carrega lentamente imagens na janela de visualização (acima da dobra). A postagem do blog do CMS reconhece que isso é um padrão a ser evitado, mas os dados experimentais da época indicaram que o efeito na LCP foi mínimo e vale a pena simplificar a implementação no núcleo do WordPress.

Com esses novos dados, uma correção experimental foi criada para evitar o carregamento lento de imagens acima da dobra. A correção foi testada sob as mesmas condições do primeiro teste A/B.

Esses resultados são muito mais promissores. O carregamento lento apenas das imagens abaixo da dobra resulta em uma reversão completa da regressão LCP e possivelmente até mesmo uma pequena melhoria em relação à desativação completa desse recurso. Como isso pode ser mais rápido do que o carregamento lento? Uma explicação é que, ao não carregar imagens abaixo da dobra, há menos contenção de rede com a imagem LCP, o que permite que ela seja carregada mais rapidamente.

Em termos de bytes de imagem, a correção não tem nenhuma mudança em comparação com o comportamento padrão. Isso é ótimo porque era um dos pontos fortes da abordagem atual.

Essa correção tem algumas ressalvas. O WordPress determina quais imagens devem ser carregadas lentamente no lado do servidor, o que significa que ele não sabe nada sobre o tamanho da janela de visualização do usuário ou se as imagens são carregadas inicialmente dentro dela. Portanto, a correção usa heurística sobre a localização relativa das imagens na marcação para determinar se ela é carregada na janela de visualização. Especificamente, se a imagem for a primeira imagem em destaque na página ou a primeira no conteúdo principal, presume-se que ela esteja acima da dobra ou próxima a ela e não será carregada lentamente.

Condições no nível da página, como o número de palavras no título ou a quantidade de texto do parágrafo no início do conteúdo principal, podem afetar a exibição da imagem na janela de visualização. Também há condições no nível do usuário que podem afetar a precisão da heurística, especialmente o tamanho da janela de visualização e o uso de links de âncora que alteram a posição de rolagem da página.

Por esses motivos, é importante reconhecer que a correção só é calibrada para oferecer um bom desempenho no caso geral, e ajustes podem ser necessários para tornar esses resultados aplicáveis a todos os cenários reais.

Implementação (:#implementation)

Agora que identificamos uma maneira melhor de carregar imagens lentamente, todas as economias de imagem e um desempenho de LCP mais rápido, como os sites podem começar a usá-las? A maior alteração de prioridade é enviar um patch ao WordPress Core para implementar a correção experimental. As orientações na postagem do blog Carregamento lento no nível do navegador para CMSs (link em inglês) também serão atualizadas para esclarecer os efeitos negativos do carregamento lento acima da dobra e como os CMSs podem usar heurística para evitar esse problema.

Como essas práticas recomendadas são aplicáveis a todos os desenvolvedores Web, também pode valer a pena sinalizar antipadrões de carregamento lento em ferramentas como o Lighthouse. Consulte a solicitação de recurso no GitHub se quiser acompanhar o progresso dessa auditoria. Até lá, os desenvolvedores podiam encontrar instâncias de elementos de LCP com carregamento lento adicionando registros mais detalhados aos dados de campo.

new PerformanceObserver((list) => {
  const latestEntry = list.getEntries().at(-1);

  if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
    console.warn('Warning: LCP element was lazy loaded', latestEntry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

O snippet JavaScript anterior avaliará o elemento LCP mais recente e registrará um aviso se ele tiver sido carregado lentamente.

Isso também destaca uma grande vantagem dessa técnica de carregamento lento e o potencial de melhorias da API no nível da plataforma. Por exemplo, há um problema em aberto no Chromium para experimentar o carregamento nativo das primeiras imagens prontamente, semelhante à correção, apesar do atributo loading.

Conclusão

Caso seu site use o carregamento lento de imagens no navegador, confira como ele é implementado e faça testes A/B para entender melhor os custos de performance. Ele pode se beneficiar do carregamento mais rápido de imagens acima da dobra. Se você tem um site WordPress, espera-se que haja um patch no núcleo do WordPress em breve. Se você usar outro CMS, verifique se ele está ciente dos possíveis problemas de desempenho descritos aqui.

Testar APIs de plataformas da Web relativamente novas pode trazer riscos e recompensas. Por algum motivo, eles são chamados de recursos modernos. Embora estejamos começando a ter uma noção dos problemas do carregamento lento de imagens em navegadores, também observamos as vantagens de usá-lo para melhorar o desempenho.

Foto de Frankie Lopez no Unsplash