Os efeitos de desempenho do carregamento lento em excesso

Dicas baseadas em dados para o carregamento lento de imagens considerando as Core Web Vitals.

Félix Arntz

Rick Viscomi

O carregamento lento é uma técnica para adiar o download de um recurso até que seja necessário. Isso economiza dados e reduz a contenção de rede para recursos críticos. Ele se tornou um padrão da Web em 2019 e, atualmente, o loading="lazy" para imagens é compatível com a maioria dos principais navegadores. Isso parece ótimo, mas existe carregamento lento demais?

Esta postagem resume como analisamos os dados de transparência na Web disponíveis publicamente e os testes A/B ad hoc para entender as características de adoção e desempenho do carregamento lento de imagens nativas. Descobrimos 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. Em concreta, nossa análise mostra que carregar imagens com mais agilidade na janela de visualização inicial, enquanto o carregamento liberalmente lento do restante, 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 no HTTP Archive, o carregamento lento de imagens nativas é usado por 17% dos sites, e essa adoção está crescendo rapidamente. Essa base no ecossistema é notável para uma API relativamente nova.

Consultar os dados brutos no projeto HTTP Archive nos dá um entendimento mais claro dos tipos de sites que estão impulsionando a adoção: 84% dos sites que usam carregamento lento de imagens nativas 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 abordagem 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 representaram dezenas de milhares de sites no corpus de cerca de 6 milhões (1% do total). A adoção do carregamento lento somente no WordPress cresceu para mais de 1 milhão de sites (14% do total).

Performance correlacional

Uma análise mais aprofundada do HTTP Archive, podemos comparar o desempenho das páginas com e sem carregamento lento de imagens nativas com a métrica Maior exibição de conteúdo (LCP). Os dados da LCP vêm de experiências do usuário real no Chrome User Experience Report (CrUX, na sigla em inglês), e não nos testes sintéticos do laboratório. O gráfico abaixo usa um diagrama de caixa e largura 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, os percentis 25o e 75o.

A página média sem carregamento lento tem uma LCP de 75o percentil de 2.922 ms, em comparação com 3.546 ms na página média com carregamento lento. No geral, os sites que usam carregamento lento tendem a ter pior desempenho de LCP.

É importante ressaltar que esses são resultados correlacionais e não apontam necessariamente para o carregamento lento como a causa do desempenho mais lento. Hipoteticamente, 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. Vamos tentar eliminar essa variabilidade analisando apenas os sites do WordPress.

Infelizmente, o mesmo padrão surge quando detalhamos as páginas do WordPress. Aquelas que usam carregamento lento tendem a ter um desempenho de LCP mais lento. A página média do WordPress sem carregamento lento tem uma LCP de 3.495 ms no 75o percentil, em comparação com 3.768 ms na página média com carregamento lento.

Isso ainda não prova que o carregamento lento causa as páginas mais lentas, mas seu uso coincide com um desempenho mais lento. Para tentar responder à pergunta sobre causalidade, configuramos um teste A/B baseado 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 nativas, conforme implementado no núcleo do WordPress, resultou em uma performance de LCP mais lenta e em menos bytes de imagem. A metodologia que usamos foi testar um site de demonstração do WordPress com o tema twentytwentyone. Testamos os tipos de arquivo e de página única, que são como as páginas inicial e de artigo, em computadores e dispositivos móveis emulados usando o WebPageTest. Testamos cada combinação de páginas com e sem o carregamento lento ativado e executamos cada teste nove vezes para conseguir o valor médio da LCP e o número de bytes da imagem.

Os resultados acima comparam a LCP média em milissegundos para testes em arquivo e em páginas únicas para computador e dispositivos móveis. Quando desativamos o carregamento lento nas páginas de arquivo, observamos a melhoria da LCP em uma margem significativa. No entanto, em páginas únicas, a diferença foi mais neutra.

O efeito da desativação do carregamento lento, na verdade, parece deixar as páginas únicas um pouco mais rápidas. No entanto, a diferença na LCP é inferior a um desvio padrão para testes para computadores e dispositivos móveis. Por isso, atribuímos isso à variação e consideramos a mudança neutra em geral. Em comparação, a diferença entre as páginas de arquivo é de dois a três desvios padrão.

Os resultados acima 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 rolasse a página para baixo, todas as imagens seriam carregadas mesmo assim ao passarem para a janela de visualização. No entanto, esses resultados mostram a melhoria no desempenho do carregamento inicial da página.

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

Como testar uma correção

Antes de mostrarmos como a correção foi implementada, vamos analisar como o carregamento lento funciona no WordPress. O aspecto mais importante da implementação atual é que ela carrega lentamente as imagens acima da dobra (na janela de visualização). A postagem do blog do CMS confirma (link em inglês) isso como um padrão a ser evitado, mas os dados experimentais da época indicaram que o efeito na LCP foi mínimo e valeu a pena simplificar a implementação no núcleo do WordPress.

Com esses novos dados, criamos uma correção experimental que evita o carregamento lento de imagens que estão acima da dobra e a testamos 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, em uma pequena melhoria na desativação total da LCP. Como isso poderia ser mais rápido do que não ter um 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 muda absolutamente em comparação com o comportamento padrão. Isso é ótimo porque esse foi um dos pontos fortes da abordagem atual.

Há algumas ressalvas com essa correção. O WordPress determina quais imagens vão 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 serão carregadas inicialmente. Portanto, a correção usa heurística sobre a localização relativa das imagens na marcação para determinar se elas estarão na janela de visualização. Especificamente, se a imagem for a primeira na página ou a primeira no conteúdo principal, presume-se que ela esteja acima da dobra (ou perto dela) 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 visibilidade da imagem na janela de visualização. Há também 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 fixos que mudam a posição de rolagem da página. Por esses motivos, é importante reconhecer que a correção é calibrada apenas para fornecer um bom desempenho no caso geral, e pode ser necessário fazer ajustes para que esses resultados se apliquem a todos os cenários reais.

Lançamento

Agora que identificamos uma maneira melhor de fazer o carregamento lento de imagens, todas as economias de imagem e desempenho mais rápido de LCP, como podemos fazer os sites começarem a usá-la? A mudança de maior prioridade é enviar um patch para o núcleo do WordPress para implementar a correção experimental. Também atualizaremos as orientações na postagem do blog Carregamento lento no nível do navegador para CMSs (link em inglês) 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 se aplicam a todos os desenvolvedores da 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 tiver interesse em acompanhar o progresso dessa auditoria. Até lá, uma coisa que os desenvolvedores poderiam fazer para encontrar instâncias de elementos LCP sendo carregados lentamente é adicionar uma geração de registros mais detalhada 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 acima avaliará o elemento da LCP mais recente e registrará um aviso se ele tiver sido carregado lentamente.

Isso também destaca uma vantagem da 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 testar o carregamento nativo das primeiras imagens prontamente, semelhante à correção, apesar do atributo loading.

Finalizando

Caso seu site use carregamento lento de imagens nativas, verifique como ele está implementado e execute testes A/B para entender melhor os custos de desempenho. Pode ser mais vantajoso carregar imagens acima da dobra com mais ansiedade. Se você tiver um site do WordPress, esperamos que em breve haja um patch no núcleo do WordPress. Se você estiver usando outro CMS, verifique se eles estão cientes dos possíveis problemas de desempenho descritos aqui.

Testar APIs de plataforma da Web relativamente novas pode trazer riscos e recompensas. Eles são chamados de recursos modernos por um motivo. Embora estejamos começando a entender a dificuldade do carregamento lento de imagens nativas, também estamos vendo as vantagens de usá-lo para melhorar o desempenho.

Foto de Frankie Lopez no Unsplash