Largest Contentful Paint (LCP) – Veja como funciona4 min read

Rodrigo Botinhão

In SEO Avançado Posted

O Largest Contentful Paint (LCP) é uma métrica importante e centrada no usuário para medir a velocidade de carregamento percebida. Para isso, a métrica marca o ponto na linha do tempo de carregamento da página quando seu conteúdo principal provavelmente foi carregado.

LPC - Largest Contentful PaintOu seja, um LCP rápido ajuda a garantir ao usuário que a página é útil. Além disso, o Largest Contentful Paint (LCP) relata o tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização.

O que é uma pontuação aceitável de LCP?

Para oferecer uma experiência de usuário satisfatória, os sites devem se esforçar para que a primeira impressão do conteúdo ocorra nos 2 segundos e meio iniciais após o carregamento da página.

Quais elementos são considerados?

Os tipos de elementos que são considerados no grupo LCP são:

  • <img> Imagens;
  • <image> dentro de tags <svg>;
  • <video> a imagem do vídeo também é utilizada;
  • Elementos com imagem de fundo que são carregados através de URLs — função bastante utilizada com CSS,
  • Blocos de elementos com conteúdos ou outros elementos encapsulados.

A restrição dos elementos para o conjunto acima foi intencional justamente para manter tudo simples no início. Elementos adicionais podem ser acrescentados posteriormente, conforme mais informações e avanços de pesquisas surjam.

Mais detalhes de como os elementos podem ser determinados podem ser acessados no portal web.dev.

Exemplos

Abaixo, alguns exemplos de interpretação do LCP em alguns sites:

exemplo lcp techcrunchexemplo lcp cnnNos dois exemplos acima, temos o primeiro quadro relacionado ao FCP (First Contentful Paint), que é o primeiro elemento a ser exibido, e também ao LCP (Largest Contentful Paint), que poderá mudar conforme a página for carregada. Quando a página é completamente carregada, podemos perceber qual é o maior elemento da tela e determinar qual velocidade é correspondente ao seu carregamento.

exemplo lcp instagramNo exemplo acima, o logotipo do Instagram foi carregado inicialmente e permaneceu como o maior conteúdo carregado da tela, enquanto os demais elementos são carregados progressivamente.

Como melhorar o LCP?

O LCP é afetado diretamente pelos seguintes fatores:

  • Tempos de resposta lentos do servidor;
  • JavaScript e CSS de bloqueio de renderização;
  • Tempos de carregamento de recursos,
  • Renderização do lado do cliente.

Algumas técnicas deverão ser levadas em consideração para aprimorar o LCP:

  • Otimize seu CSS;
  • Otimize suas imagens;
  • Otimize fontes da web,
  • Otimize seu JavaScript — para sites renderizados pelo cliente.

Mais técnicas de otimização do LCP poderão ser encontradas na documentação do web.dev.

Abaixo, separamos algumas tarefas técnicas que analisamos e levamos em consideração na Gear SEO, relacionadas com o LCP de acordo com as ferramentas do Google:

Otimização de Imagens

Normalmente, as imagens representam a maioria de bytes transferidos em uma página do site. Além de ocuparem um grande espaço visual, elas podem impactar diretamente no tempo de carregamento do site.

É muito importante que as imagens tenham o tamanho correto, de acordo com o espaço que ocupam em suas respectivas páginas. Ao inserir as imagens, é necessário sempre ter o cuidado de tratá-las adequadamente para exibição na web.

Carregamento de imagens através de Lazy Load

Lazy Load é uma técnica que adia recursos não críticos no tempo de carregamento da página. Os recursos são carregados apenas no momento em que são necessários.

Imagens fora da tela são imagens que aparecem abaixo da dobra, ou seja, que ainda não foram exibidas para os usuários. Como os usuários não podem vê-las, não há motivo para carregá-las como parte do carregamento inicial da página.

Pré-carregamento de recursos (Javascript, CSS, etc.)

O tempo de carregamento de uma página é definido por diversos fatores, entre eles, os recursos (JavaScript, CSS, etc.), que são solicitados pelos navegadores. Esses recursos normalmente são solicitados em fila, quase um a um.

Realizando o ajuste de pré-carregamento, conseguimos que o navegador solicite alguns recursos simultaneamente. Dessa forma, o navegador vai processar o recurso junto de outros elementos críticos para o carregamento da página.

WebP

WebP é um formato de imagem que possui características de qualidade e compactação superior em comparação com suas contrapartes mais antigas, JPEG e PNG. Codificar as imagens nesse formato em vez de JPEG ou PNG significa que elas serão carregadas mais rapidamente e consumirão menos dados de celular, o que resulta em uma performance melhor do site, inclusive em dispositivos móveis.

Preparamos abaixo materiais que estão relacionados diretamente com os pontos principais do Core Web Vitals com exemplos de pontos de melhorias:

Otimização de FID (First Input Delay)

Otimização de CLS (Cumulative Layout Shift)

0 Comments

Leave a Comment