Como otimizar a entrega de imagens e o LCP em uma página ativa

Entendendo a Entrega de Imagens e o LCP

Compreender a entrega de imagens e o Largest Contentful Paint (LCP) é essencial para melhorar a velocidade de carregamento da página.

O que é entrega de imagens?

A entrega de imagens refere-se a um sistema ou infraestrutura projetada para otimizar, transformar e entregar imagens de forma eficiente aos usuários finais em diferentes dispositivos e condições de rede.

Um sistema de distribuição de imagens normalmente combina:

• Uma Rede de Distribuição de Conteúdo (CDN) para armazenamento em cache global e entrega rápida.
• Processamento de imagens em tempo real (redimensionamento, compressão, conversão de formato)
• Otimização adaptada ao dispositivo e à janela de visualização

As imagens geralmente representam 50–70% do tamanho total da carga útil de uma páginaQuando as imagens não são otimizadas corretamente, elas se tornam uma das principais causas de:

• Tempo lento de carregamento da página
• Pontuações baixas nos indicadores Core Web Vitals
• Alto consumo de largura de banda
• Envolvimento reduzido do usuário
• Taxas de conversão mais baixas

A entrega eficiente de imagens garante que os usuários baixem apenas o tamanho de imagem necessário para seu dispositivo e área de visualização, sem sacrificar a qualidade visual.

O que é Largest Contentful Paint (LCP)?

O Largest Contentful Paint (LCP) é uma das métricas Core Web Vitals do Google. Ele mede o tempo decorrido desde o início da navegação na página até que o maior elemento visível dentro da área de visualização seja totalmente renderizado.

Na maioria dos casos, o elemento LCP é:

• Uma imagem de banner de herói
• Uma imagem grande do produto
• Um bloco promocional em destaque
• Um grande bloco de texto

Como o elemento LCP é frequentemente uma imagem, o processamento ineficiente de imagens, como arquivos grandes, falta de pré-carregamento, solicitações atrasadas ou falta de compressão, aumentará diretamente o tempo de processamento do LCP.

A otimização da entrega de imagens desempenha um papel fundamental em:

• Melhorar a velocidade de carregamento percebida
• Como alcançar melhores posições nos resultados de busca
• Aumentar o engajamento do usuário
• Aumentando as conversões

Como otimizar a entrega de imagens e o LCP

Existem duas maneiras principais de otimizar a entrega de imagens e melhorar o LCP (Loading Content Point) no GemPages: ajustando a qualidade da imagem no nível do elemento e configurando o comportamento de carregamento no nível da página. Abaixo, vamos analisar cada método passo a passo.

1. Configure as definições do elemento de imagem no editor.

GemPages fornece um Configuração de qualidade que permite controlar como os arquivos de imagem são renderizados e exibidos na página ao vivo. Essa configuração faz parte do Otimize o LCP seção dentro do painel de configurações do elemento.

Para acessá-lo:

• Abra sua página no Editor GemPages.
• Selecione um elemento relacionado à imagem.
• Acesse a barra lateral esquerda.
• Desloque-se até o Otimize o LCP seção

Essa configuração afeta diretamente o tamanho da variante de imagem solicitada pelo navegador, o que impacta o desempenho de entrega da imagem e o LCP (Loading Content Price - Preço de Curto Prazo).

Observe que a configuração de Qualidade só funciona nas seguintes condições:

• A imagem deve estar hospedada na CDN da Shopify (ou seja, deve ter sido carregada através da Shopify).
• O elemento utilizado deve ser um destes:
  • Imagem
  • Imagem do produto
  • Comparação de Imagens

Como funciona o processo de definição de qualidade:

A configuração de Qualidade determina a largura da variante da imagem que será solicitada com base na largura da viewbox do elemento (a largura real na qual a imagem é exibida no layout da sua página).

Opções disponíveis:

• Melhor: O sistema carrega o arquivo de imagem original enviado, sem redimensioná-lo. 
• High: O sistema solicita uma variante de imagem com o tamanho de 1.5 × a largura da caixa de visualização.
• Meio: O sistema solicita uma variante de imagem com tamanho exato em 1 × a largura da caixa de visualização.
• Personalizadas: O sistema calcula o tamanho da imagem solicitada usando esta fórmula: Largura da caixa de visualização × X% (Proporção definida pelo usuário; padrão recomendado: 100%).

Por exemplo, você carregou uma imagem com 2000px de largura e uma Viewbox com 400px de largura. O tamanho da imagem solicitada variará dependendo da opção selecionada:

• Melhor => carregar o arquivo de imagem original (2000px)
• Alta => Carrega uma variante de imagem com largura = × 400 1.5 = 600px
• Médio: Carrega uma variante de imagem com largura = × 400 1 = 400px
• Personalizado: 200% → Carrega uma variante de imagem com largura = × 400 2 = 800px

Caso 1: No editor, selecione o elemento. ImagemNa barra lateral esquerda, role para baixo até encontrar o Otimizar LCP, conjunto Qualidade = excelente, tanto no modo desktop quanto no modo móvel:

Página ao vivo: Carregar o arquivo de imagem original

Testamos o desempenho desta página e o resultado foi:

Entrega de imagens Precisa ser melhorado:

Caso 2: No editor, selecione o elemento. ImagemNa barra lateral esquerda, role para baixo até encontrar o Otimizar LCP, conjunto Qualidade = Média, tanto no modo desktop quanto no modo móvel:

Página ativa: Carrega uma variante de imagem com largura = 500px * 1 = 500px

Em seguida, testamos o desempenho desta página e o resultado é atualizado com um ponto de desempenho mais alto, e a A entrega de imagens foi aprimorada:

O que podemos aprender com isso?

Carregar o arquivo de imagem original pode aumentar o tamanho do arquivo desnecessariamente, especialmente quando o tamanho da tela é muito menor que a imagem carregada.

Definir a Qualidade para uma proporção Personalizada razoável garante que o tamanho da imagem corresponda à largura real da tela. Isso reduz o tamanho do arquivo, melhora a velocidade de carregamento e ajuda a otimizar o LCP sem afetar a qualidade visual.

A configuração Otimize o LCP está configurado da mesma forma para o Imagem do produto e Comparação de Imagens elementos.

2. Outras configurações

Além de ajustar o Otimize o LCP Ao configurar no nível do elemento, você pode aprimorar ainda mais a entrega de imagens e o Largest Contentful Paint (LCP) controlando como as imagens são carregadas durante a renderização inicial da página.

Essas otimizações se concentram em quando e como O navegador solicita imagens críticas.

Desativando “Carregamento lento de imagens”

O que é Lazy Load?

O carregamento lento (lazy loading) é uma técnica que atrasa o carregamento de imagens até que elas estejam próximas de entrar na área visível da tela (viewport) do usuário. Em vez de carregar todas as imagens imediatamente quando a página começa a ser renderizada, o navegador carrega as imagens somente à medida que o usuário rola a página.

👉 Você pode aprender mais sobre Lazy Load neste artigo: Configurações de publicação – Carregamento lento da imagem

Desativar o carregamento lento (lazy load) para imagens críticas garante que:

• As imagens dentro da área de visualização inicial são solicitadas imediatamente.
• O navegador prioriza a obtenção da imagem LCP.
• A renderização de banners principais ou imagens de produtos em destaque não sofre atrasos.

Isso é particularmente importante porque, na maioria das páginas de comércio eletrônico ou landing pages, o elemento LCP geralmente é:

• Uma imagem de banner de herói
• Uma imagem grande do produto
• Um bloco promocional em destaque

Se essas imagens forem carregadas de forma preguiçosa, o navegador espera até que o cálculo do layout seja concluído antes de iniciar a solicitação, o que atrasa diretamente o LCP.

Ativar a seção “Lazyload”

O que é uma seção de carregamento lento?

O carregamento lento de seções é uma configuração de desempenho que atrasa a renderização de seções inteiras que estão fora da área visível inicial (abaixo da dobra).

Em vez de controlar o carregamento de imagens individualmente, essa configuração funciona em um nível estrutural — o que significa que toda a seção (incluindo suas imagens, texto, scripts e estrutura de layout) é adiada até que o usuário role a página até perto dela.

👉 Você pode ler mais em nosso artigo da Central de Ajuda aqui: Habilitar Lazyload e pré-carregar sua seção e imagem

Quando ativado:

• As seções fora da área visível inicial não são renderizadas nem solicitadas durante o primeiro carregamento.
• O tamanho do DOM na renderização inicial é reduzido (Document Object Model – representa a árvore estruturada de elementos HTML que o navegador constrói ao carregar uma página).
• Menos solicitações de rede competem pela largura de banda.
• A carga de trabalho do thread principal diminui.

Isso melhora:

• Hora da Primeira Pintura (FCP)O conteúdo visível aparece mais cedo.
• estabilidade do LCPOs elementos críticos não estão competindo por recursos.
• Responsividade geral da páginainteração inicial mais suave

Em termos simples:

• Mantemos o conteúdo visível carregando imediatamente.
• Adiamos a complexidade abaixo da dobra.

Esse método garante que o navegador priorize o que os usuários veem primeiro, enquanto adia o conteúdo que não é necessário imediatamente.

Ativar a “Seção de pré-carregamento”

O que é a seção de pré-carga?

A opção "Pré-carregar seção" é uma configuração de desempenho que instrui o navegador a priorizar o carregamento das seções visíveis na área visível inicial. Para obter mais informações, consulte: Recurso de Otimização de Página

Quando a seção de pré-carregamento está ativada:

• Todas as seções dentro da área visível (não apenas a primeira) têm prioridade.
• O navegador começa a buscar seus recursos críticos mais cedo.
• As diferenças entre as janelas de visualização em desktops e dispositivos móveis são tratadas adequadamente.

Sem lógica de pré-carregamento, os navegadores normalmente priorizam apenas a primeira seção. Outras seções que ainda estão visíveis acima da dobra podem ser solicitadas posteriormente, após a conclusão das etapas de layout e renderização. Isso pode atrasar o carregamento de imagens e afetar diretamente o LCP (Lower Content Point).

Isso é especialmente importante para layouts responsivos onde:

• A área de visualização do computador pode conter de 2 a 3 seções acima da dobra.
• A estrutura da área de visualização em dispositivos móveis difere significativamente.
• O pré-carregamento garante que o conteúdo adaptado à área de visualização seja tratado com alta prioridade em todos os pontos de interrupção.

Por que essa combinação funciona

O objetivo não é desativar ou ativar tudo de uma vez. A otimização de desempenho funciona melhor quando o comportamento de carregamento é coordenado estrategicamente.

Uma abordagem eficaz inclui:

• Do não Carregamento lento de imagens críticas → proteger LCP
• Carregamento lento em seções não visíveis → reduz o custo inicial da carga
• Pré-carregar todas as seções da viewport → alinhar a prioridade da rede com a prioridade visual

Isso garante que o que os usuários veem primeiro seja carregado imediatamente, enquanto o conteúdo não essencial aguarda.

Testamos uma página de produto com a seguinte configuração:

• A imagem tem qualidade = excelente
• A lista de produtos contém elementos de imagem do produto, qualidade = melhor
• Carregamento lento da imagem is ON
• Seção de carregamento lento is OFF
• Seção de pré-carga está desabilitado

→ O resultado é:

Como você pode ver, entrega de imagens Precisa ser melhorado, porque o tempo de download das imagens é longo:

Em seguida, reconfiguramos a página usando a estratégia recomendada:

• Configure o elemento de configuração que contém imagens no Editor: Imagem, Imagem do produto; definindo Qualidade = Média
• Carregamento lento da imagem is OFF
• Seção de carregamento lento is ON
• Seção de pré-carga is habilitado

Após aplicar todas as alterações, clicamos em Publicar No editor de páginas, para atualizar a página ao vivo.

Em seguida, testamos novamente o desempenho dessa página.. O resultado mudou: O desempenho desta página está otimizado.

A entrega de imagens é melhorado:

Final Takeaway

A otimização de desempenho não se resume a ativar ou desativar uma única configuração.

É sobre:

• Exibindo imagens com tamanho adequado.
• Carregando conteúdo visível imediatamente
• Adiar conteúdo não essencial de forma inteligente
• Priorizar recursos com base no que os usuários realmente veem.

Quando essas estratégias funcionam em conjunto, tanto a Entrega de Imagens quanto o LCP melhoram de forma consistente em todos os dispositivos, especialmente em páginas com muitas imagens, como páginas de produtos e páginas de destino.