Corrigir Erro LCP ‘Mais Que’ nos Core Web Vitals no GSC

O Google lançou um novo relatório na Search Console chamado Core Web Vitals. Esses substituíram os relatórios de velocidade e serão considerados como um fator de classificação em 2021. Os Core Web Vitals serão considerados como um fator de classificação junto com a Velocidade da Página, HTTPS, Amigabilidade para Dispositivos Móveis e outros fatores de página.

O Core Web Vital considera elementos de UX e UI na página para descobrir a média de uma página para três métricas principais,

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Não há uma correção codificada única para resolver os problemas, mas você pode otimizar o site para resolver os erros. Aqui, listarei algumas das práticas que podem ajudá-lo a resolver o ‘Mais Que’ do Largest Contentful Paint (LCP) para suas páginas da web.

O que é LCP?

A métrica Largest Contentful Paint (LCP) relata o tempo de renderização do maior elemento de conteúdo visível dentro da área de visualização. Em termos simples, é o tempo necessário para que um elemento principal carregue na tela visível após o início do carregamento da página.

Para proporcionar uma boa experiência ao usuário, os sites devem se esforçar para que o Largest Contentful Paint ocorra dentro dos primeiros 2,5 segundos após o início do carregamento da página.

Quais Elementos são Considerados para LCP?

Os tipos de elementos considerados para o Largest Contentful Paint são;

• elementos
• elementos dentro de um elemento
• elementos
• Um elemento com uma imagem de fundo carregada via a função url()
• Elementos de bloco contendo nós de texto ou outros elementos de texto em nível inline.

Quais são as Causas do Alto LCP?

• Tempos de resposta do servidor lentos
• JavaScript e CSS que bloqueiam a renderização
• Tempos de carregamento de recursos lentos
• Renderização do lado do cliente

Como Otimizar o Site para Corrigir Alto LCP?

Use um bom serviço de hospedagem com bom tempo de resposta e baixa taxa de latência. Certifique-se de otimizar os servidores, use CDNs de terceiros gratuitos como Cloudflare, jsDelivr, Statically para entregar ativos estáticos rapidamente. Se você estiver trabalhando com WordPress, existem vários plugins que podem ajudar a fazer o trabalho por você.

Use imagens comprimidas com formatos de imagem de próxima geração como JPEG XR, JPEG 2000 ou WebP. Esses formatos modernos ajudam a acelerar o carregamento da imagem em 50%. Existem alguns plugins para WordPress que ajudam automaticamente a comprimir e converter as imagens em tempo real. Além disso, use um CDN de imagens como WP-Photon para reduzir a largura de banda do servidor e aumentar a velocidade do site.

Você pode usar serviços de Cache para carregar uma página HTML estática que não muda a cada solicitação, o cache pode evitar que ela seja recriada desnecessariamente. Plugins de Cache armazenarão uma cópia do HTML gerado em seu servidor e, quando uma página é solicitada, o servidor libera o carregamento do Cache, o que pode reduzir o Tempo até o Primeiro Byte (TTFB) e minimizar o uso de recursos.

Você também pode usar serviços como Cloudflare, que executa trabalhadores de serviço em segundo plano no navegador e pode interceptar solicitações do servidor. Eles fazem um Cache HTML completo da página e servem páginas HTML em cache primeiro, o que pode reduzir significativamente o tempo de carregamento.

Outras coisas importantes a considerar para otimizar o site para um bom LCP são:

• Eliminar JavaScript e CSS que bloqueiam a renderização
• Adiar CSS não crítico
• Minificar Recursos
• Pré-carregar recursos importantes

Você pode encontrar um guia mais detalhado sobre como otimizar um site para reduzir o LCP e fazer suas páginas carregarem mais rápido para uma melhor experiência do usuário no site oficial Web.Dev.

Conclusão: Com a introdução dos core web vitals no GSC e sendo considerado um fator de classificação. O LCP é uma métrica muito importante a ser corrigida, pois leva em conta o tempo necessário para o maior elemento carregar na área de visualização do dispositivo. Eu forneci algumas correções e soluções tentativas para otimizar o site para um LCP baixo.

Se você tiver alguma opinião sobre Corrigir Erro LCP ‘Mais Que’ nos Core Web Vitals no GSC, sinta-se à vontade para deixar um comentário abaixo. Além disso, inscreva-se no nosso canal do YouTube DigitBin para tutoriais em vídeo. Saúde!