O LCP mede o tempo até o conteúdo principal carregar. O conteúdo principal é o maior bloco de texto ou imagem da página. Na maioria das páginas, o LCP é a métrica crítica, porque determina quando a página se torna útil para o utilizador.
O utilizador chega à página. A página começa a carregar. O navegador descarrega o HTML. O navegador descarrega o CSS. O navegador descarrega o JavaScript. O HTML é desenhado. O CSS aplica os estilos. O JavaScript corre. O conteúdo principal aparece. Isto é o LCP.
Um LCP de um segundo é excelente. O utilizador vê o conteúdo depressa. Um LCP de três segundos é lento. O utilizador espera. Um LCP de cinco segundos é muito lento. O utilizador sai.
O que conta como Largest Contentful Paint
O maior elemento da página acima da dobra. Normalmente uma imagem ou um título. Exemplo: uma página inicial com imagem de destaque. A imagem de destaque é o maior elemento. O momento em que aparece é o LCP.
Exemplo: um artigo de blogue com título. O título é o maior elemento. O momento em que aparece é o LCP.
Exemplo: uma página de produto com imagem do produto. A imagem do produto é o maior elemento. O momento em que aparece é o LCP.
O LCP mede-se desde que o utilizador clica na ligação (início do carregamento da página) até o maior elemento aparecer. Inclui o tempo para descarregar o HTML, o CSS e o JavaScript, descarregar a imagem e desenhar a página.
Otimizar o LCP
Objetivo de otimização: LCP abaixo de dois vírgula cinco segundos.
Estratégia um: otimizar o tempo de resposta do servidor (TTFB). Um servidor mais rápido faz o HTML chegar mais depressa. A chegada do HTML é pré-requisito para desenhar a página. Reduz o TTFB melhorando o servidor, usando uma CDN e reduzindo as consultas à base de dados.
Estratégia dois: reduzir o tamanho do ficheiro CSS. Um CSS mais pequeno descarrega mais depressa. O CSS tem de descarregar antes de a página ser desenhada. Reduz o CSS removendo estilos não usados, minificando e diferindo o CSS não crítico.
Estratégia três: reduzir o tamanho do ficheiro JavaScript. Um JavaScript grande atrasa a execução e o desenho. Reduz o JavaScript removendo código não usado, dividindo ficheiros grandes e diferindo o JavaScript não crítico.
Estratégia quatro: otimizar as imagens. As imagens são muitas vezes os maiores elementos (LCP). Reduz o tamanho das imagens comprimindo-as, usando formatos modernos (WebP) e diminuindo as dimensões.
Estratégia cinco: fazer preload dos recursos críticos. Diz ao navegador para descarregar cedo a imagem ou o tipo de letra crítico. A imagem descarrega em paralelo com o HTML e o CSS. Reduz o LCP.
Exemplo real: otimização do LCP de um artigo de blogue
LCP de partida: dois vírgula oito segundos.
Análise: a imagem de destaque do artigo é o maior elemento. A imagem tem dois megabytes. Demora um vírgula dois segundos a descarregar. O descarregamento da imagem é o ponto de estrangulamento.
Otimização
Comprimir a imagem: passar de dois megabytes para zero vírgula cinco megabytes. O tempo de descarregamento passa a ser zero vírgula três segundos.
Converter para WebP: reduzir ainda mais, para zero vírgula três megabytes. O tempo de descarregamento passa a ser zero vírgula um segundos.
Fazer preload da imagem: dizer ao navegador para descarregar a imagem cedo. A imagem descarrega em paralelo com o HTML. Poupa zero vírgula dois segundos.
Pôr o CSS crítico acima da dobra: reduzir o tempo até a página poder ser desenhada. Poupa zero vírgula três segundos.
Novo LCP: um vírgula sete segundos.
Dois vírgula oito menos um vírgula dois (descarregamento da imagem) mais zero vírgula um (descarregamento da imagem comprimida) é igual a um vírgula sete segundos. Abaixo do objetivo de dois vírgula cinco.
O LCP e os diferentes tipos de página
Página inicial
A imagem de destaque costuma ser o LCP. Otimiza comprimindo a imagem, usando uma CDN e fazendo preload.
Artigo de blogue
O título ou a primeira imagem é o LCP. Otimiza reduzindo o atraso do CSS/JavaScript e fazendo preload dos tipos de letra.
Página de produto
A imagem do produto é o LCP. Otimiza comprimindo a imagem e usando imagens adaptáveis para os diferentes dispositivos.
Página de pagamento
O formulário ou o botão é o LCP. Otimiza reduzindo o CSS/JavaScript e fazendo preload dos recursos críticos.
Cada tipo de página tem estratégias de otimização diferentes. Sabe qual é o teu elemento LCP. Otimiza esse elemento.
O LCP em telemóvel e em computador
O LCP em telemóvel costuma ser mais lento do que no computador. A rede móvel é mais lenta. Os telemóveis têm menos poder de processamento.
LCP de partida no computador: um vírgula cinco segundos. LCP de partida no telemóvel: três segundos.
O telemóvel é duas vezes mais lento. Os utilizadores de telemóvel sentem a lentidão com mais força.
Otimiza primeiro o telemóvel. Foca-te em reduzir o tamanho das imagens (a largura de banda móvel é limitada). Reduz o JavaScript (os telemóveis processam-no mais devagar). Usa formatos adequados a dispositivos móveis.
Medir a melhoria do LCP
LCP de partida
Mede antes da otimização.
Aplicar a otimização
Novo LCP
Mede depois da otimização.
Melhoria
LCP de partida menos o novo LCP.
Exemplo
De partida, dois vírgula oito segundos. Depois da otimização, um vírgula sete segundos. A melhoria é de um vírgula um segundos.
Calcular o impacto
Uma melhoria de um vírgula um segundos pode aumentar a taxa de conversão em um por cento (consoante o ponto de partida e o setor). Para cinquenta mil visitantes por mês, são quinhentas conversões adicionais com um valor de encomenda de cem dólares. Cinquenta mil dólares por mês. Seiscentos mil dólares por ano.
Compara com o custo da otimização. Se o custo for de cinquenta mil dólares, o retorno vem em um mês. Excelente ROI.
Perguntas frequentes
Como sabemos qual é o nosso elemento LCP?
Usa as DevTools do Google Chrome. Clica com o botão direito na página. Inspecionar. Separador Desempenho. Grava o carregamento da página. As DevTools mostram o elemento LCP. Ou consulta o PageSpeed Insights. O Lighthouse identifica os elementos LCP. Consulta também o relatório de Core Web Vitals do Search Console. Mostra os elementos LCP das páginas. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Devemos otimizar o LCP em todas as páginas ou só na página inicial?
Otimiza todas as páginas. Mas dá prioridade pelo tráfego. A página inicial é importante, mas também as páginas de produto (numa loja online) ou as páginas de artigos (na publicação de conteúdo). Mede o LCP em todas as páginas importantes. Dá prioridade à otimização pelo volume de tráfego.
O preload ajuda sempre no LCP?
Nem sempre. O preload gasta largura de banda. Se fizeres preload de um recurso sem importância, gastas largura de banda que podia descarregar um recurso importante. Faz preload só dos recursos críticos (imagem de destaque, tipo de letra crítico). Não faças preload de recursos não críticos.
Como otimizamos o LCP quando o conteúdo principal é dinâmico (carregado a partir de uma API)?
O atraso da chamada à API soma-se ao LCP. Reduz o tempo de resposta da API otimizando a base de dados, guardando respostas em cache e usando uma CDN. Mostra também um ecrã esqueleto ou conteúdo provisório enquanto a API carrega. O conteúdo provisório aparece logo. O utilizador sente a página como carregada. O conteúdo real preenche depois. O LCP percebido é mais rápido do que o LCP real.
Devemos usar lazy loading no elemento LCP?
Não. O lazy loading atrasa a imagem até estar quase a entrar na janela de visualização. Se a imagem está acima da dobra (elemento LCP), o lazy loading atrasa-a sem necessidade. Usa lazy loading só em imagens abaixo da dobra. Carrega o elemento LCP de imediato.
Em que é que o LCP difere do FCP (First Contentful Paint)?
O FCP é quando aparece qualquer conteúdo (pode ser um texto pequeno). O LCP é quando aparece o conteúdo principal (normalmente uma imagem maior ou um título). O FCP é mais rápido do que o LCP. O LCP é mais importante para a experiência do utilizador. Melhora primeiro o LCP.