Otimize a Duração de Carregamento do Recurso LCP

Otimize a Duração de Carregamento do Recurso LCP

Largest Contentful Paint (LCP) é uma das 3 métricas de desempenho Core Web Vitals que medem a sua user experience online. O LCP captura o tempo que o maior elemento de conteúdo (uma imagem, vídeo ou bloco de texto) leva para se tornar visível na viewport. A Duração de Carregamento do Recurso é uma sub-parte do LCP que indica quanto tempo é perdido ao buscar o recurso de rede para o elemento LCP.  Vamos aprofundar no aspecto da duração de carregamento do recurso do LCP e explorar seu impacto e estratégias de otimização.

O que é a Duração de Carregamento do Recurso no LCP?

A Duração de Carregamento do Recurso, frequentemente chamada de Duração de Carregamento, refere-se ao tempo necessário para o navegador baixar o recurso de rede (por exemplo, uma imagem) que eventualmente se tornará o elemento LCP. Para imagens e vídeos, essa duração vai desde o momento em que a imagem começa a ser baixada até o navegador completar o download. Para elementos LCP baseados em texto, a duração de carregamento é tipicamente zero.

A Duração de Carregamento do Recurso é medida a partir do momento em que o navegador começa a baixar o recurso LCP até ter terminado o download. Esta medição é crucial porque impacta diretamente a rapidez com que os usuários podem ver e interagir com o conteúdo principal de uma página web. A duração de carregamento do recurso pode ser influenciada por vários fatores, incluindo:

• Tamanho do Arquivo: Arquivos maiores requerem tempos de download mais longos.
• Velocidade da Rede: Conexões mais lentas naturalmente prolongam a duração de carregamento.
• Responsividade do Servidor: Atrasos na resposta do servidor diminuem a velocidade de busca do recurso.
• Downloads Simultâneos: Recursos baixados simultaneamente competem por largura de banda, o que pode aumentar os tempos de carregamento.

Como detectar a Duração de Carregamento do Recurso

Existem duas formas eficazes de identificar e medir a duração de carregamento do recurso:

Inspeção de Rede no Chrome DevTools: Use o atalho Ctrl + Shift + I para abrir as Ferramentas de Desenvolvedor do Chrome, depois selecione a aba "Network" e recarregue a página. Procure o elemento LCP nas requisições de rede (se quiser saber qual é o elemento LCP, experimente o Core Web Visualizer). O inspetor de rede mostrará quanto tempo levou para baixar o recurso.

Dica Pro: Ative as linhas grandes de requisição para ver detalhes adicionais como latência do LCP, tamanho transferido e tamanho real.

Aproveite os Dados de Real User Monitoring (RUM): 

As ferramentas RUM frequentemente registram dados de atribuição do LCP. Os dados de atribuição do Largest Contentful Paint contêm informações sobre o atraso no carregamento do recurso. Esses dados permitem visualizações das tendências de duração de carregamento ao longo do tempo ou por página, fornecendo uma visão clara dos tempos de carregamento em todo o site. Ao analisar esses padrões, é possível identificar elementos que podem diminuir os tempos de carregamento e descobrir oportunidades direcionadas para um desempenho mais rápido e fluido.

Como Melhorar a Duração de Carregamento do LCP

Atrasos no carregamento de recursos acontecem quando os recursos são baixados em uma ordem ou tamanho subótimo. Duas abordagens principais para resolver isso: reduzir o tamanho dos dados ou otimizar a entrega dos dados. Aqui estão técnicas e padrões eficazes para melhorar a duração de carregamento do recurso LCP:

1. Otimize o tamanho do arquivo:

Otimizar o tamanho do arquivo reduz a quantidade de bytes a serem enviados pela rede. Menos dados geralmente significa menos tempo de download.

Use Formatos de Imagem Modernos: AVIF e WebP lideram o caminho na compressão. O AVIF, em particular, oferece amplas capacidades de compressão, frequentemente reduzindo o tamanho dos arquivos em até 50% em comparação com o WebP, tornando-o ideal para fotos complexas sem sacrificar a qualidade. O WebP, no entanto, mantém forte compatibilidade com uma gama mais ampla de navegadores e é especialmente eficaz para imagens mais simples.

Imagens Responsivas: O elemento <picture> e o atributo srcset permitem imagens adaptadas com base no tamanho da tela, permitindo versões menores de imagens para dispositivos móveis e versões de alta resolução para telas maiores. Aqui está um exemplo de configuração:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy" alt="Description">
</picture>

Dimensões Corretas de Imagem: Imagens responsivas são apenas parte da solução porque responsivo não significa que estão com o tamanho correto. Adequar as dimensões da imagem ao seu tamanho de exibição é um dos erros mais comuns que vejo. Servir uma imagem de 2000px de largura para uma área de exibição de 500px desperdiça largura de banda e pode diminuir notavelmente os tempos de carregamento.

2. Melhore o desempenho da rede: 

Uma vez que os tamanhos dos recursos de rede estejam otimizados, o próximo passo é maximizar a velocidade da rede — ou até mesmo contornar a rede completamente. Isso pode ser alcançado por:

Contorne a Necessidade de Rede: Não existe conexão de rede mais rápida do que uma conexão de rede ignorada. Os navegadores têm a opção de servir conteúdo estático (imutável) como imagens, scripts e folhas de estilo diretamente do cache local do navegador. Configure o servidor para enviar instruções corretas de cache para o navegador. Por exemplo, com o cabeçalho expires.

A configuração mais eficaz é enviar um cabeçalho Cache-Control assim:

Cache-Control: public, max-age=31536000, immutable

• public: Permite que o recurso seja armazenado em cache tanto por navegadores quanto por caches intermediários.
• max-age=31536000: Define o tempo máximo em que o recurso é considerado atualizado para um ano (31.536.000 segundos).
• immutable: Indica que o recurso não mudará ao longo do tempo, prevenindo requisições de revalidação desnecessárias.

HTTP/3: O mais recente protocolo HTTP/3 pode melhorar o desempenho da rede ao reduzir a latência e lidar com a perda de pacotes de forma mais eficiente do que o TCP tradicional. (HTTP/3 tem vários outros benefícios, especialmente quando se trata do Time to First Byte) 

Para verificar se o HTTP/3 está habilitado, simplesmente inspecione sua rede com o atalho Ctrl-Shift-I. Selecione a aba de rede, clique com o botão direito nos cabeçalhos das colunas de rede e certifique-se de que 'protocol' está habilitado. Recarregue a página e verifique o protocolo. Para HTTP/3, o protocolo deve exibir 'h3'

Auto-Hospedagem de Recursos: Recursos de rede importantes e/ou iniciais devem, por padrão, sempre ser hospedados no servidor de origem.  A auto-hospedagem elimina a necessidade de conectar a servidores de terceiros, o que pode causar atrasos consideráveis devido a consultas DNS adicionais, negociações SSL e configurações de conexão. A auto-hospedagem garante a reutilização de uma única conexão já aberta e reduz a sobrecarga de estabelecer conexões separadas. Recursos auto-hospedados também permitem controle total sobre políticas de compressão e cache.

Utilize um CDN: Uma Content Delivery Network (CDN) é uma rede de servidores distribuídos que armazenam em cache e servem recursos estáticos como imagens, CSS e JavaScript a partir de locais mais próximos do usuário. Isso reduz o tempo de viagem dos dados (o round-trip-time) que afeta diretamente a Duração de Carregamento do Recurso. Além disso, muitos CDNs também oferecem mais vantagens como compressão de imagens, configurações de rede superiores (como HTTP/3 & 0-RTT) e muito mais. CDNs de Imagem especializados podem ir ainda mais longe, fornecendo otimizações automáticas em tempo real como conversão de formato, redimensionamento e compressão.

3. Otimize a Priorização de Recursos

Após reduzir o tamanho dos recursos e otimizar a rede, existe também a questão da competição de rede. Quando múltiplos recursos estão sendo requisitados ao mesmo tempo sob condições de rede ruins, isso pode diminuir consideravelmente o tempo de download dos recursos. É por isso que faz sentido minimizar a competição de rede ao agendar o download de recursos.

Priorize Recursos Críticos: Sinalize recursos essenciais, como imagens hero ou CSS acima da dobra, com fetchpriority="high". Isso sinaliza ao navegador para baixar esses ativos primeiro, evitando que sejam prejudicados por scripts, widgets ou elementos de terceiros que não precisam de carregamento instantâneo. Priorizar esses recursos críticos reduz o tempo de carregamento para o conteúdo que seus usuários mais valorizam. A combinação de preload (para resolver a descoberta tardia) e fetchpriority="high" (para resolver a contenção de rede) é a técnica mais poderosa para garantir que o recurso LCP seja buscado o mais cedo e o mais rápido possível.

<!-- For LCP images visible in the initial HTML -->
<img src="hero-image.webp" fetchpriority="high" alt="...">

<!-- To improve discovery  -->
<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

Reduza a Contenção de Rede: Simplifique os downloads iniciais adiando ou aplicando lazy-loading em ativos não essenciais. Adie o carregamento de quaisquer imagens ou vídeos não imediatamente visíveis, bem como elementos de fundo ou secundários. Usar loading="lazy" para mídia fora da tela é um bom ponto de partida, enquanto adiar ainda mais outros scripts e ativos não essenciais liberará largura de banda e reduzirá qualquer competição com seus recursos críticos, mantendo o conteúdo principal da sua página rápido para carregar e exibir. Nunca aplique loading="lazy" na sua imagem LCP; este é um anti-padrão crítico que prejudicará sua pontuação.

4. Configure speculation rules

Speculation Rules permite que os navegadores façam prefetch ou prerender de páginas web com base na navegação prevista do usuário. O prefetching efetivamente elimina a sub-parte Time to First Byte do LCP e não tem impacto na duração de carregamento do recurso. O prerendering renderiza a próxima página em uma aba oculta e baixa todos os recursos da página.  Isso elimina a maior parte das durações de carregamento para o elemento LCP, como mostrado neste exemplo de decomposição do LCP de uma página pré-renderizada.