Maior tinta com conteúdo (LCP) é um termo que ouvimos com frequência nos últimos dois anos.
LCP relata o tempo de renderização do maior elemento que você vê na primeira tela depois de acessar um site. Pode ser uma imagem, um bloco de texto, um vídeo ou qualquer outra coisa.
Você também deve ter ouvido que devemos fazer o nosso melhor para mantê-lo abaixo de 2,5 segundos .
Mas por que 2,5 segundos?
Pense nisso, a métrica LCP mede a velocidade de carregamento percebida para o maior elemento na primeira tela , ou seja, quando a navegação página a página parece completa para um usuário.
Você clica em um link, acessa um site, vê algo na tela e é nesse momento que você escolhe se quer ficar ou ir.
O LCP é o teste decisivo do valor inicial do site
E há um curto período de tempo que podemos esperar que algo aconteça em uma página da web. Normalmente, os usuários são pacientes o suficiente para esperar alguns segundos-até 2,5s, de acordo com dados do Google .
Portanto, para aumentar as chances de um usuário continuar a se envolver com um site, devemos nos esforçar para o seguinte:
Mostrar algo significativo na primeira tela em menos de 2,5. Certifique-se de que que estamos mostrando é o que representa o valor do site da melhor maneira.
LCP desejado versus LCP real
Mas como podemos ter certeza de que nosso LCP representa o valor do site da melhor maneira possível? Como ter certeza de que a primeira coisa significativa que um usuário vê no site o convida a interagir com o site?
Dê uma olhada neste site de notícias.
Se por acaso você abrisse um site de notícias, esperaria ver quais são as notícias logo de cara, certo? Portanto, você pode decidir o mais rápido possível-se está interessado em continuar lendo a página ou não.
O título e a miniatura seriam os elementos mais informativos e importantes neste caso. Eles seriam a pintura com maior conteúdo desejada.
Gostaríamos de exibi-los o mais rápido possível e rastrear sua carga especificamente como LCP.
Como calcular o LCP em seu site
Você pode usar algumas ferramentas para medir o LCP: GTmetrix , WebPageTest.org , Lighthouse nas ferramentas de desenvolvimento do Chrome e outros. A maneira mais fácil seria consultar o Google PageSpeed Insights . A última captura de tela incluirá todas as áreas consideradas parte do LCP.
Você pode ver que um anúncio, uma seção de notícias de última hora e um pop-up de consentimento de cookies são considerados LCP nesta página. Seu tempo de carregamento também é adicionado ao tempo do LCP.
Ajuste o LCP real para se tornar o desejado
Para aumentar as chances de um usuário permanecer na página, precisamos ter certeza de que nosso LCP “desejado” é realmente visto como LCP e nada mais.
Aqui estão algumas idéias sobre como fazer isso:
Melhore o design para que haja uma hierarquia clara com o elemento principal na página e alguns secundários. execução de qualquer coisa que não esteja fornecendo o melhor valor na primeira tela (pop-ups, modais, widgets de bate-papo, anúncios, formulários de inscrição etc.) Mova elementos pesados como controles deslizantes, galerias e assim por diante abaixo da dobra.
A pintura com maior conteúdo é um ponto em que o usuário vê o conteúdo principal na primeira tela e decide ficar ou sair. No melhor interesse de seus usuários, recomendamos:
Fornecer o LCP para usuários em 2,5 segundos ou menos. Exiba conteúdo valioso primeiro, atrasando todo o resto.
Em outras palavras, é de nosso interesse fornecer uma boa experiência do usuário, pois essa é a ideia principal por trás do Core Web Vitals.
