Visão geral

Esta regra do scorecard identifica quando suas páginas da web estão carregando muito lentamente, impactando diretamente a experiência do usuário e o desempenho dos negócios. O Largest Contentful Paint (LCP) mede a rapidez com que o conteúdo principal da sua página se torna visível para o usuário. O Google considera isso um fator crítico tanto para a satisfação do usuário quanto para a classificação na pesquisa.

A regra é acionada quando o 75º percentil das suas medições de LCP excede 2,5 segundos, indicando que uma parte significativa da sua experiência do usuário tem carregamento lento da página. Use esta regra para identificar proativamente problemas de desempenho, entender seu impacto na sua base de usuários e promover melhorias sistemáticas na velocidade de carregamento da página.

Por que o LCP é importante para o seu negócio

Impacto na experiência do usuário:

• Páginas com bom LCP (≤2,5 segundos) mantêm o usuário engajado e reduzem as taxas de rejeição
• Conteúdo de carregamento lento leva à frustração do usuário e ao abandono de sessões
• LCP rápido contribui para maiores taxas de conversão e satisfação do usuário

SEO e visibilidade:

• O Google usa o LCP como um fator de classificação nos resultados de pesquisa
• Pontuações LCP baixas podem impactar negativamente a visibilidade da pesquisa orgânica
• A conformidade com o Core Web Vitals é essencial para o desempenho de pesquisa competitivo

Medição de desempenho:

• LCP representa experiência real do usuário, não teste Sintético
• Fornece insights práticos sobre otimização de entrega de conteúdo
• Permite decisões orientadas por dados para melhorias de desempenho de front-end

Definição de regra

Esta regra do scorecard avalia se o 75º percentil das medições do Largest Contentful Paint (LCP) para uma entidade de navegador excede 2,5 segundos, com base no limite Core Web Vitals do Google.

Critérios de medição do LCP

Limite oficial do LCP do Google:

• Bom: ≤2,5 segundos
• Precisa melhorar: 2,5-4,0 segundos
• Ruim: >4,0 segundos

O que o LCP mede: O LCP identifica o tempo de carregamento do maior elemento de conteúdo visível na janela de visualização durante o carregamento inicial da página. Este elemento é normalmente:

• Imagens (incluindo imagens de fundo)
• Imagens de pôsteres de vídeo
• Elementos de texto em nível de bloco
• Elementos de texto embutidos contendo nós de texto

Tempo de medição:

• Começa quando o usuário inicia a navegação na página
• Termina quando o maior elemento de conteúdo termina de renderizar
• Atualiza dinamicamente conforme elementos maiores são carregados
• Interrompe a medição quando o usuário interage com a página

Compreendendo a otimização do LCP

Melhorar o LCP requer otimizar a rapidez com que o conteúdo principal da sua página é carregado e renderizado. Concentre-se nestas áreas principais:

Otimização de carregamento de recursos

• Priorização de recursos críticos: garanta que o elemento LCP seja carregado no início do ciclo de vida da página
• Dicas de recursos: use pré-carregamento, pré-conexão e pré-busca de DNS para acelerar recursos críticos
• Entrega eficiente de recursos: otimize imagens, fontes e outros ativos que contribuem para o LCP

Otimização de resposta do servidor

• Reduza o tempo de resposta do servidor: Tempo de destino para o primeiro byte (TTFB) abaixo de 600 ms
• Implementar estratégias de cache: use CDNs e cache do navegador para entrega mais rápida de conteúdo
• Otimize a consulta ao banco de dados: reduza o tempo de processamento backend para conteúdo dinâmico

Otimização de renderização

• Elimine recursos que bloqueiam a renderização: minimize CSS e JavaScript que atrasam a renderização do conteúdo
• Otimize o caminho de renderização crítico: priorize a renderização de conteúdo acima da dobra
• Reduza as mudanças de layout: garanta uma renderização estável para manter a precisão do tempo do LCP

Como melhorar o desempenho do LCP

Se suas pontuações de LCP indicarem baixo desempenho de carregamento, siga estas etapas de otimização:

1. Identifique seu elemento LCP

1. Use o monitoramento do navegador New Relic para identificar quais elementos estão causando lentidão no LCP em diferentes páginas
2. Analisar padrões LCP por tipo de dispositivo, velocidade de conexão e localização geográfica
3. Revise o Chrome DevTools para ver qual elemento é identificado como candidato ao LCP
4. Priorize páginas de alto tráfego com o pior desempenho de LCP para atenção imediata

2. Otimize imagens e mídia

Otimização de imagem:

• Use formatos de imagem modernos (WebP, AVIF) com fallbacks
• Implementar imagens responsivas com srcset e sizes atributo
• Comprima imagens sem sacrificar a qualidade visual
• Use dimensões de imagem apropriadas para evitar dimensionamento desnecessário

Estratégia de carregamento lento:

• Evite o carregamento lento de imagens acima da dobra que podem ser candidatas a LCP
• Use o carregamento lento nativo para conteúdo abaixo da dobra
• Implementar observador de interseção para soluções de carregamento lento personalizadas

Entrega de conteúdo:

• Use uma CDN para entrega global de imagens mais rápida
• Implementar serviços de otimização de imagem (como as soluções de parceiros da New Relic)
• Considere JPEG progressivo para imagens grandes
• Otimize imagens e miniaturas de pôsteres de vídeo

3. Otimize o desempenho do servidor e da rede

Otimização do lado do servidor:

• Reduza o tempo até o primeiro byte (TTFB) por meio do ajuste de desempenho do servidor
• Implementar estratégias de cache eficientes em vários níveis
• Use compressão (gzip, Brotli) para recursos baseados em texto
• Otimizar consulta ao banco de dados e API tempo de resposta

Otimização de rede:

• Use HTTP/2 ou HTTP/3 para multiplexação aprimorada
• Implementar priorização de recursos com dicas de prioridade de busca
• Minimize os redirecionamentos que atrasam o carregamento do conteúdo
• Use a pré-conexão para recursos críticos de hospedagem de domínio externo

4. Elimine recursos que bloqueiam a renderização

Otimização de CSS:

• CSS crítico embutido para conteúdo acima da dobra
• Use media consulta para carregar CSS não crítico de forma assíncrona
• Minimize e compacte arquivos CSS
• Remover regras CSS não utilizadas

Otimização de JavaScript:

• Adiar execução não crítica de JavaScript
• Use a divisão de código para carregar apenas o script necessário
• Implementar estratégias adequadas de carregamento de script (assíncrono/adiado)
• Minimize a execução do JavaScript durante o carregamento inicial da página

5. Implementar monitoramento de desempenho

Monitoramento de usuário real:

• Use o New Relic Browser para monitorar o desempenho do LCP continuamente
• Configurar alertas para degradação do LCP
• Monitorar LCP em diferentes segmentos de usuários e dispositivos
• Rastrear correlação entre LCP e métrica de negócios

Teste de desempenho:

• Implementar testes automatizados de desempenho no pipeline de CI/CD
• Use o monitoramento sintético para detectar regressões precocemente
• Teste em vários dispositivos e condições de rede
• Valide otimizações com testes A/B

Orientação de implementação

Configurando o monitoramento do LCP

1. Configurar o monitoramento do navegador New Relic com a coleta Core Web Vitals habilitada
2. Estabeleça medições baseline em suas páginas principais e segmentos de usuários
3. Configurar o painel LCP para monitorar tendências de desempenho e identificar áreas problemáticas
4. Crie alertas para degradação do LCP alinhados com seus objetivos de experiência do usuário

Criando alertas acionáveis

Configure alertas significativos para o desempenho do LCP:

• Bom limite: alerta quando o 75º percentil exceder 2,5 segundos
• Limite ruim: alerta crítico quando o percentil 75 ultrapassa 4,0 segundos
• Monitoramento de tendência: alerta sobre degradação significativa semana após semana
• Alertas específicos do segmento: monitore o desempenho móvel, de desktop e geográfico separadamente

Fluxo de trabalho de otimização de edifícios

1. Avaliações regulares de desempenho: agende avaliações mensais dos dados do LCP
2. framework de priorização: foco em páginas de alto tráfego com pontuações LCP baixas
3. Protocolos de teste: implementar testes A/B para mudanças de otimização
4. Colaboração entre equipes: Estabeleça processos claros para escalonamento e resolução de problemas de engenharia

Considerações importantes

Avaliação personalizada: essas diretrizes fornecem uma base sólida, mas cada site é único. Considere sua base de usuários específica, tipos de conteúdo e objetivos de negócios ao definir o destino do LCP. Considere seus dispositivos de usuário típicos, condições de rede e jornadas críticas do usuário.

Otimização holística: o LCP funciona melhor como parte de uma estratégia de desempenho abrangente. Equilibre as melhorias do LCP com outros Core Web Vitals (CLS e INP) e garanta que as otimizações não impactem negativamente outras experiências do usuário métrico.

Monitoramento contínuo: O desempenho da Web é dinâmico. comportamento do usuário, alterações de conteúdo e dependência externa podem impactar o LCP ao longo do tempo. Mantenha o monitoramento contínuo e esteja preparado para ajustar sua estratégia de otimização conforme necessário.

Próximos passos

Após implementar esta regra do scorecard:

1. Complete o monitoramento do Core Web Vitals implementando as regras Cumulative Layout Shift (CLS) e interação com o Next Paint (INP)
2. Explore o monitoramento de erros de JavaScript para identificar problemas que afetam o carregamento da página
3. Implementar monitoramento de desempenho AJAX para observabilidade abrangente do frontend
4. Revise o roteiro de implementação da experiência para otimização sistemática da experiência digital