Eliabe Vinicius Costa e Silva; Anderson Canale Garcia

DOI: 10.22167/2675-6528-202600757

Artigo elaborado pela ferramenta ResumeAI, solução de inteligência artificial desenvolvida pelo Instituto Pecege voltada à síntese e redação.

Resumo

O desempenho de carregamento de páginas web é um fator determinante para a experiência do usuário e o ranqueamento em motores de busca. O estudo analisou o impacto da adoção de formatos de imagem de última geração (WebP e AVIF) combinados com estratégias de carregamento assíncrono (“lazy loading”) em um ambiente móvel simulado (4G Regular). Através de um laboratório experimental automatizado, utilizando Puppeteer e Python, realizaram-se testes controlados para mensurar métricas de Core Web Vitals, especificamente o Largest Contentful Paint (LCP). Os resultados demonstraram que a transição do formato JPEG para o AVIF reduziu o volume total de dados transferidos em 75,32%. No cenário de maior otimização (AVIF + “lazy loading”), observou-se uma redução de 89,94% no tempo de LCP, caindo de 3.002,18 ms na linha de base para 302,13 ms. Concluiu-se que, embora o “lazy loading” seja vital para formatos legados, a eficiência de compressão do AVIF é capaz de mitigar a competição por largura de banda, entregando performance próxima da instantaneidade mesmo em condições de rede restritas.

Palavras-chave: Compressão de imagens; Core Web Vitals; Desempenho web; Experiência do usuário.

1. Introdução

O desempenho de websites e aplicações web no cenário digital atual é um fator estratégico, não meramente técnico. A velocidade de carregamento é crucial para reter usuários, aumentar a eficácia da Otimização para Motores de Busca (SEO) e sustentar o sucesso comercial de empreendimentos online (Jain, 2022). A meta principal do desenvolvimento web moderno é reduzir o tempo entre o primeiro acesso e a interatividade completa da página.

O indicador Largest Contentful Paint (LCP), por exemplo, não representa apenas um cronômetro técnico, mas uma métrica direta da experiência de carregamento percebida pelo usuário. Desde 2021, essas métricas foram incorporadas aos algoritmos de ranqueamento de busca do Google (Google Search Central, 2021), transformando a performance estrutural de front-end em um requisito mandatório para a viabilidade e visibilidade de produtos digitais.

No entanto, aplicações modernas frequentemente incorporam ativos volumosos, como mídias de alta resolução. Isso gera gargalos no processamento e prejudica a experiência do usuário (Jain, 2022). Para combater esse problema e garantir uma entrega rápida de conteúdo, estratégias de otimização de front-end consolidaram-se como práticas altamente recomendadas na literatura.

Nesse cenário, o carregamento adaptativo (“lazy loading”) e o uso de formatos de imagem de próxima geração apresentam-se como soluções estruturais relevantes. A eficácia dessas abordagens tem sido amplamente documentada na literatura técnica recente.

Turcotte et al. (2023) e Jain (2022) elucidam que a implementação do “lazy loading” altera a forma como o navegador gerencia a fila de requisições de rede. Essa técnica posterga recursos não críticos e pode diminuir o tamanho inicial de transferência da aplicação em uma média de 36,2%. Adicionalmente, a transição para codificações de nova geração é essencial para a performance.

Conforme apontado por Dornauer e Felderer (2023), formatos como WebP e AVIF oferecem taxas de compressão significativamente superiores ao tradicional padrão JPEG. Isso reduz o consumo de banda sem comprometer a qualidade visual percebida pelos usuários.

Diante desse contexto, e dada a necessidade de validação empírica da sinergia dessas otimizações em um ambiente controlado, o objetivo deste trabalho foi quantificar a melhoria nas métricas Core Web Vitals – especificamente LCP, First Contentful Paint (FCP) e Time to Interactive (TTI) – alcançadas pela aplicação combinada do carregamento adaptativo (“lazy loading”) para o conteúdo “Abaixo da Dobra” [Below the Fold – BTF] com a conversão de imagens para os formatos modernos WebP e AVIF, visando validar, em um ambiente controlado, o impacto prático dessa otimização dupla na redução da largura de banda consumida e na aceleração do tempo de carregamento perceptível.

2. Material e Métodos

O estudo foi conduzido como uma pesquisa experimental de natureza quantitativa, aplicada à Engenharia de Software. O método consistiu na criação de um ambiente controlado, projetado para isolar e mensurar o impacto de variáveis de otimização de front-end no desempenho de aplicações web. Este delineamento permitiu a avaliação sistemática das melhorias nas métricas de performance, conforme o objetivo estabelecido na introdução.

Para a realização do experimento, desenvolveu-se um laboratório simulado, composto por módulos interdependentes, utilizando JavaScript (Node.js/Express) e Python. A arquitetura foi concebida para assegurar a reprodutibilidade das coletas de métricas e minimizar interferências externas, garantindo a validade dos dados obtidos.

A preparação da amostra de imagens foi automatizada por um script Python, image_optimizer.py. Este manipulou o conjunto de dados, utilizando bibliotecas como Pillow para processamento básico, pillow-avif-plugin para codificação AVIF e scikit-image para análises de similaridade. As imagens originais foram convertidas em lote para JPEG, WebP e AVIF.

A calibração de qualidade empregou a classe OptimizationConfig, definindo níveis de compressão específicos: 85 para JPEG, 82 para WebP e 65 para AVIF, visando equilibrar peso e fidelidade visual. A validação por Structural Similarity Index (SSIM) assegurou a paridade das condições empíricas, com SSIM médio entre 0,76 e 0,77. O processamento concorrente foi otimizado com ThreadPoolExecutor.

A aplicação de teste, implementada em Node.js com Express, foi configurada para renderizar dinamicamente páginas HTML utilizando o motor de templates EJS. A aplicação segregou o conteúdo “Acima da Dobra” (Above the Fold – ATF) da área “Abaixo da Dobra” (Below the Fold – BTF). O controle das variáveis de teste foi realizado pelo servidor, que alternava os cenários por parâmetros de URL (?format= e ?loading=).

A imagem crítica, correspondente ao Largest Contentful Paint (LCP), foi configurada com carregamento imediato (loading=’eager’), prioridade máxima (fetchpriority=’high’) e pré-carregamento (). Este procedimento isolou o impacto das otimizações secundárias. O delineamento experimental configurou seis cenários de teste para avaliar combinações de formato de imagem e estratégia de carregamento.

Os cenários A, B e C, denominados “Eager”, empregaram carregamento padrão com imagens nos formatos JPEG (“Baseline”), WebP e AVIF, respectivamente. Os cenários D, E e F, denominados “Lazy”, aplicaram carregamento sob demanda (“lazy loading”) às imagens abaixo da dobra, utilizando também JPEG, WebP e AVIF.

A coleta de dados foi automatizada pelo script benchmark.js, que utilizou a biblioteca Puppeteer para controlar uma instância do navegador Chromium. O experimento simulou condições de dispositivos móveis limitados, empregando o protocolo Chrome DevTools Protocol (CDP). A simulação de rede configurou um perfil “Regular 4G” com 10 Mbps de download, 5 Mbps de upload e 50 ms de latência.

A simulação de hardware incluiu “CPU Throttling” com fator de desaceleração de 2x, emulando restrições de processadores de smartphones intermediários. Foram realizadas 180 iterações, com 30 repetições por cenário. O tamanho da amostra (n=30) foi definido com base no Teorema Central do Limite (Khatun, 2021), visando mitigar flutuações anômalas de rede ou CPU.

Para garantir a reprodutibilidade, o script encerrou o navegador e limpou cache, cookies e storage a cada iteração, evitando vieses de carregamento por memória secundária. Nos cenários com “lazy loading”, o script simulou o comportamento humano, executando um scroll progressivo automático até o final da página. Essa ação foi essencial para disparar a API de Intersection Observer do navegador e mensurar o tráfego.

3. Resultados e Discussão

A execução padronizada de todos os ensaios técnicos simulados produziu uma base de dados robusta e limpa, validando a eficácia técnica da arquitetura construída para o estudo. As métricas consolidadas, obtidas após 180 iterações, revelaram o impacto significativo das estratégias de otimização de front-end. Observou-se que a combinação de formatos de imagem modernos e carregamento adaptativo influenciou diretamente o desempenho de aplicações web em ambientes móveis simulados. Os resultados abrangem métricas como Largest Contentful Paint (LCP), First Contentful Paint (FCP), Time to Interactive (TTI), e o volume de dados transferidos, fornecendo uma visão compreensiva da performance em diferentes cenários de otimização.

A análise inicial dos dados revelou uma correlação direta entre a modernização dos codecs de imagem e a viabilidade de aplicações web em dispositivos móveis. No que tange à economia de recursos, o formato AVIF demonstrou um desempenho disruptivo. Ele reduziu o tráfego específico de imagens de 12,59 MB para 3,08 MB por carregamento, quando comparado ao formato JPEG no cenário de carregamento padrão. Essa otimização refletiu diretamente no peso total da página, com a transferência média caindo de 12,63 MB (cenário JPEG com carregamento padrão) para 3,12 MB (cenário AVIF com carregamento adaptativo). Essa redução de 75,3% no volume de dados consumidos constitui o fundamento técnico para a aceleração das demais métricas de desempenho.

Esse ganho substancial de espaço é atribuído à natureza arquitetônica do formato AVIF, que é derivado do codec de vídeo AV1 da Alliance for Open Media (AOM, 2025). A codificação AVIF utiliza algoritmos avançados de predição espacial e suporte estendido à profundidade de cor, resultando em maior densidade de informação por byte. Isso significa que o AVIF entrega uma qualidade visual comparável aos formatos legados, mas com um tamanho de arquivo significativamente menor e menor incidência de artefatos de compressão em baixas taxas de bits. A análise estrutural das amostras confirmou a viabilidade prática desse comportamento, com o AVIF permitindo uma redução de 75,3% no peso de transferência em relação à linha de base JPEG, mantendo um índice SSIM médio de 0,76, muito próximo ao 0,77 do JPEG, indicando paridade visual.

O impacto no Largest Contentful Paint (LCP) emergiu como o ponto de maior destaque analítico do estudo. No cenário base, que utilizou imagens JPEG com carregamento padrão, o tempo médio de LCP foi de 3.002,18 ms. Em contraste, o cenário de maior otimização, que combinou imagens AVIF com carregamento adaptativo, alcançou um LCP médio de 302,13 ms. Essa melhoria representa uma redução de 89,94% no tempo de renderização do conteúdo principal. Tal resultado reclassifica a aplicação de um patamar de “necessita melhorias” para um carregamento percebido como instantâneo, superando os padrões rigorosos estabelecidos pelas Core Web Vitals do Google (Google Search Central, 2021).

A transição para formatos intermediários também demonstrou melhorias notáveis no LCP. No cenário de carregamento padrão, a substituição de JPEG por WebP resultou em um LCP médio de 1.507,99 ms, uma redução substancial em relação ao JPEG. Quando o carregamento adaptativo foi aplicado, o LCP para imagens JPEG caiu para 1.690,18 ms, enquanto para WebP, atingiu 1.019,59 ms. Esses dados evidenciam que, mesmo sem a eficiência máxima do AVIF, a adoção de formatos de imagem mais modernos e a implementação de “lazy loading” contribuem significativamente para a aceleração do carregamento de páginas, melhorando a experiência do usuário em diferentes níveis de otimização.

Um aspecto crítico identificado nos testes foi o comportamento diferenciado da estratégia de carregamento adaptativo (“lazy loading”) conforme o formato de imagem utilizado. Para o formato JPEG, a transição do carregamento padrão (3.002,18 ms) para o carregamento adaptativo (1.690,18 ms) resultou em um ganho de performance de 43,7% no LCP. Isso ocorre porque, em arquivos pesados, o navegador sofre com a competição por largura de banda e o download simultâneo de imagens, atrasando a renderização do elemento crítico. O “lazy loading” mitiga esse problema ao adiar o carregamento de recursos não críticos, liberando a “Main Thread” para tarefas mais urgentes (Turcotte et al., 2023).

Contudo, ao observar os cenários com AVIF, notou-se que o impacto do “lazy loading” no LCP foi marginal. O LCP médio para AVIF com carregamento padrão foi de 308,79 ms, enquanto com carregamento adaptativo foi de 302,13 ms, uma diferença de apenas 6,66 ms. Tecnicamente, isso indica que a eficiência de compressão do codec AV1 é tão elevada que o volume de dados da imagem principal se torna insignificante frente à banda disponível, mitigando naturalmente o gargalo de rede. Assim, o AVIF não apenas reduz o consumo de dados, mas também torna a performance da aplicação resiliente mesmo na ausência de técnicas complexas de priorização de recursos para o LCP, embora o “lazy loading” continue sendo relevante para o carregamento total da página e outros elementos.

Além do LCP, as métricas First Contentful Paint (FCP) e Time to Interactive (TTI) também foram mensuradas, oferecendo uma perspectiva mais completa da experiência do usuário. Os valores médios de FCP variaram de 293,31 ms (JPEG Eager) a 266,68 ms (JPEG Lazy), e 271,46 ms (AVIF Eager) a 282,29 ms (AVIF Lazy). Para TTI, os valores oscilaram entre 287,51 ms (JPEG Eager) e 257,16 ms (JPEG Lazy), e 289,34 ms (AVIF Eager) a 254,81 ms (AVIF Lazy). Embora as melhorias no FCP e TTI não tenham sido tão dramaticamente expressivas quanto no LCP, elas indicam uma estabilidade geral e uma leve otimização na prontidão da página para interação, especialmente nos cenários com carregamento adaptativo.

Para além das médias absolutas, a análise de variabilidade estatística dos dados corrobora a robustez da solução proposta. O cenário de linha de base (JPEG com carregamento padrão) apresentou um desvio padrão acentuado de ±265,05 ms no LCP, indicando uma suscetibilidade a flutuações e uma menor previsibilidade no tempo de carregamento. Em contrapartida, o cenário com AVIF e carregamento adaptativo demonstrou um desvio padrão significativamente menor, de apenas ±26,11 ms. Isso demonstra que o formato AVIF, por exigir o tráfego de pacotes significativamente menores, não apenas acelera a renderização, mas também proporciona uma performance da aplicação altamente previsível e imune a instabilidades momentâneas da rede.

Essa estabilidade e previsibilidade são cruciais para a experiência do usuário e para o ranqueamento em motores de busca, conforme destacado por Google Search Central (2021). A adoção do “lazy loading” foi arquitetonicamente bem-sucedida ao adiar a rasterização das imagens abaixo da dobra, liberando a “Main Thread” principal para garantir a interatividade contínua (Turcotte et al., 2023). O ambiente experimental, que simulou condições de dispositivos móveis com rede 4G regular (10 Mbps download, 5 Mbps upload, 50ms latência) e CPU throttling de 2x, garantiu que os resultados refletem um cenário realista de conectividade móvel, validando a aplicabilidade prática das otimizações.

Em síntese, os resultados obtidos demonstram de forma inequívoca que a combinação de formatos de imagem de última geração, como o AVIF, com estratégias de carregamento adaptativo, como o “lazy loading”, é uma abordagem altamente eficaz para otimizar o desempenho de aplicações web. A redução drástica no volume de dados transferidos pelo AVIF e a consequente aceleração do LCP para níveis de carregamento quase instantâneo, mesmo em condições de rede restritas, validam o objetivo do estudo. Embora o “lazy loading” seja vital para formatos legados, a eficiência intrínseca do AVIF mitiga a necessidade de seu uso para o LCP, mas permanece relevante para a otimização geral da página, contribuindo para uma experiência de usuário superior e mais previsível.

4. Conclusão

Este estudo buscou quantificar a melhoria nas métricas Core Web Vitals, como o Largest Contentful Paint (LCP), First Contentful Paint (FCP) e Time to Interactive (TTI), por meio da aplicação combinada de carregamento adaptativo (“lazy loading”) e a conversão de imagens para formatos modernos WebP e AVIF em um ambiente móvel simulado. Verificou-se que a transição do formato JPEG para o AVIF resultou em uma redução de 75,32% no volume total de dados transferidos. No cenário de maior otimização, que combinou imagens AVIF com “lazy loading”, observou-se uma redução expressiva de 89,94% no tempo de LCP, passando de 3.002,18 ms para 302,13 ms. Essa melhoria reclassificou a aplicação para um patamar de carregamento percebido como instantâneo, superando os padrões rigorosos estabelecidos pelas Core Web Vitals. A principal contribuição reside na validação empírica de que a sinergia dessas otimizações é uma estratégia altamente eficaz para mitigar gargalos de performance em aplicações web, mesmo em condições de rede restritas.

A análise demonstrou que, embora o “lazy loading” tenha sido vital para otimizar o LCP em formatos legados, como o JPEG, a eficiência de compressão intrínseca do AVIF foi tão elevada que o impacto adicional do “lazy loading” no LCP tornou-se marginal, embora a técnica continue relevante para a otimização geral da página. Além disso, o cenário otimizado com AVIF e “lazy loading” apresentou uma redução significativa na variabilidade do LCP, indicando uma performance mais previsível e resiliente a instabilidades de rede. Conclui-se que o investimento na modernização dos codecs de imagem no front-end é uma medida arquitetônica determinante para a democratização do acesso e a viabilização de experiências de navegação fluidas. Para trabalhos futuros, recomenda-se investigar como a compressão orientada por inteligência artificial pode atuar de forma dinâmica na borda (“edge computing”) para otimizar e adaptar o caminho crítico de renderização em tempo real.

Referências Bibliográficas

ALLIANCE FOR OPEN MEDIA (AOM). AV1 Image File Format (AVIF). Especificação Técnica. 2025. Disponível em documentos oficiais da AOMedia.

Dornauer, B.; Felderer, M. 2023. Web image formats: assessment of their real-world-usage and performance across popular web browsers. In: International Conference on Performance Engineering, 14, 2023, Springer, Cham. Anais… p. 1-10.

GOOGLE SEARCH CENTRAL. Core Web Vitals report. Google Developers, 2021. Disponível nas documentações de performance do Google Search.

Jain, V. 2022. Optimizing web performance with lazy loading and code splitting. International Journal of Core Engineering & Management 7(3): 1-12.

KHATUN, N. Applications of normality test in statistical analysis. Open Journal of Statistics, v. 11, n. 1, p. 113, 2021.

Turcotte, A.; Gokhale, S.; Tip, F. 2023. Increasing the responsiveness of web applications by introducing lazy loading. In: IEEE/ACM International Conference on Automated Software Engineering (ASE), 38, 2023, IEEE. Anais… p. 459-470.

Artigo oriundo de Trabalho de Conclusão de Curso da Especialização em Engenharia de Software do MBA USP/Esalq

Para saber mais sobre o curso, clique aqui e acesse a plataforma MBX Academy