Os efeitos de desempenho de muito carregamento lento

Conselhos baseados em dados para o carregamento lento de imagens 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 para recursos críticos. Ele se tornou um padrão da Web em 2019, e hoje o loading="lazy" para imagens é compatível com a maioria dos principais navegadores.

Este guia resume como os dados de transparência da 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 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 carregar imagens de forma mais rápida na janela de visualização inicial, enquanto o restante é carregado de forma lenta, pode nos dar o melhor dos dois mundos: menos bytes carregados e Core Web Vitals melhores.

Adoção

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

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

A taxa de adoção também é importante. Em julho de 2020, os sites do WordPress que usavam o carregamento lento representavam dezenas de milhares de sites no corpus de cerca de 6 milhões (1% do total). A adoção do carregamento lento apenas no WordPress cresceu para mais de 1 milhão de sites (14% do total).

Desempenho correlacional

Analisando mais a fundo o HTTP Archive, é possível comparar o desempenho de páginas com e sem carregamento lento de imagens no navegador usando a métrica Largest Contentful Paint (LCP). Os dados de LCP vêm de experiências de usuários reais do Chrome User Experience Report (CrUX), em vez de testes sintéticos no laboratório. O gráfico a seguir usa um diagrama de caixa para visualizar as distribuições do LCP do 75º 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 um LCP de 75º 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 o carregamento lento tendem a ter um desempenho pior de LCP.

É importante destacar que esses são resultados correlacionais e não necessariamente apontam o carregamento lento como a causa da performance mais lenta. Hipoteticamente, se os sites do WordPress tendem a 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 reduzido especificamente para sites do WordPress.

Infelizmente, o mesmo padrão surge ao analisar as páginas do WordPress. Aquelas que usam o carregamento lento tendem a ter um desempenho de LCP mais lento. A página mediana do WordPress sem carregamento lento tem um LCP de 75º 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 o uso dele coincide com um desempenho mais lento. Para tentar responder à pergunta sobre causalidade, foi configurado um teste A/B em laboratório.

Performance causal

O objetivo do teste A/B era provar ou refutar a hipótese de que o carregamento lento de imagens integrado, conforme implementado no núcleo do WordPress, resultava em um desempenho de LCP mais lento e menos bytes de imagem. A metodologia usada foi testar um site de demonstração do WordPress com o tema twentytwentyone. Os tipos de página de arquivo e de página única foram testados, que são como as páginas inicial e de artigo, em computadores e dispositivos móveis emulados usando o WebPageTest. Cada combinação de páginas com e sem o carregamento lento ativado foi testada, e cada teste foi executado nove vezes para obter o valor mediano de LCP e o número de bytes de imagem.

Esses resultados comparam a LCP mediana em milissegundos para testes em páginas de arquivo e únicas para computadores e dispositivos móveis. Quando o carregamento lento foi desativado nas páginas de arquivo, a LCP melhorou significativamente. No entanto, em páginas únicas, a diferença foi menor.

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

Esses resultados comparam o número mediano de bytes de 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 de imagem. Se um usuário real rolasse a página inteira, todas as imagens seriam carregadas de qualquer maneira ao cruzarem a janela de visualização, mas esses resultados mostram a melhoria no desempenho do carregamento de página inicial.

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

Como testar uma correção

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

Com base nesses novos dados, foi criada uma correção experimental que evita o carregamento lento de imagens acima da dobra, e a correção foi testada nas 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 da LCP e, possivelmente, até mesmo em uma pequena melhoria em relação à desativação completa do carregamento lento. Como isso pode ser mais rápido do que não usar 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 absolutamente nenhuma mudança em comparação com o comportamento padrão. Isso é ótimo, porque esse era um dos pontos fortes da abordagem atual.

Essa correção tem algumas ressalvas. O WordPress determina quais imagens serão carregadas de forma lenta 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 nela. Portanto, a correção usa heurísticas sobre o local relativo das imagens na marcação para adivinhar se elas são carregadas na janela de visualização. Especificamente, se a imagem for a primeira em destaque na página ou no conteúdo principal, ela será considerada acima da dobra ou próxima a ela e não será carregada de forma lenta.

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 se a imagem está na janela de visualização. Também há condições no nível do usuário que podem afetar a precisão das heurísticas, especialmente o tamanho da janela de visualização e o uso de links fixos que mudam a posição de rolagem da página.

Por esses motivos, é importante reconhecer que a correção é calibrada apenas para oferecer um bom desempenho no caso geral, e pode ser necessário fazer ajustes para que esses resultados sejam aplicáveis a todos os cenários do mundo real.

Implementação

Agora que uma maneira melhor de carregar imagens de forma lenta foi identificada, com todas as economias de imagem e um desempenho de LCP mais rápido, como os sites podem começar a usá-la? A mudança de maior prioridade é enviar um patch ao núcleo do WordPress para implementar a correção experimental. As orientações no post 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ísticas para evitá-lo.

Como essas práticas recomendadas são aplicáveis a todos os desenvolvedores web, também pode ser útil 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á, uma coisa que os desenvolvedores podem fazer para encontrar instâncias de elementos LCP com carregamento lento é adicionar 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 de JavaScript acima vai avaliar o elemento LCP mais recente e registrar um aviso se ele tiver sido carregado de forma lenta.

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

Conclusão

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

Testar APIs de plataforma da Web relativamente novas pode trazer riscos e recompensas. Elas são chamadas de recursos de ponta por um motivo. Embora estejamos começando a entender as dificuldades do carregamento lento de imagens no navegador, também estamos vendo as vantagens de usá-lo para melhorar a performance.