Como otimizar a maior exibição de conteúdo e classificação mais alta no Google

Como medir a maior pintura de conteúdo do seu site

Execute um teste gratuito de velocidade do site para descobrir. Sua velocidade LCP será exibida imediatamente.

Os resultados do seu teste de velocidade dirão se:

• O limite LCP foi atingido.
• Você precisa otimizar qualquer outro Core Web Vital.

Como é calculada a maior pintura de conteúdo?

O Google analisa o 75º percentil de experiências - isso significa que 25% dos visitantes reais do site experimentam tempos de carregamento LCP de 3,09 segundos ou mais, enquanto para 75% dos usuários o LCP está abaixo de 3,09 segundos.

Neste exemplo, o LCP do usuário real é mostrado como 3,09 segundos.

Quais são os resultados dos testes de laboratório em meus principais dados vitais da Web?

Com este teste de velocidade da Web específico, você também verá métricas de laboratório coletadas em um ambiente de teste controlado. Embora essas métricas não afetem diretamente as classificações do Google, há duas vantagens desses dados:

1. As métricas são atualizadas assim que você melhora seu site, enquanto os dados em tempo real do Google levam 28 dias para serem totalmente atualizados.
2. Você obtém relatórios detalhados além das métricas, o que pode ajudá-lo a otimizar seu site.

Além disso, o PageSpeed ​​Insights também fornece dados de laboratório, mas lembre-se de que os dados que ele relata às vezes podem ser enganosos devido à limitação simulada que ele usa para emular uma conexão de rede mais lenta.

Como você encontra seu maior elemento de pintura de conteúdo?

Ao executar um teste de velocidade de página com DebugBear, o elemento LCP é destacado no resultado do teste.

Às vezes, o elemento LCP pode ser uma imagem grande e, outras vezes, pode ser uma grande parte do texto.

Independentemente de seu elemento LCP ser uma imagem ou um pedaço de texto, o conteúdo LCP não aparecerá até que sua página comece a renderizar.

Por exemplo, na página abaixo, uma imagem de fundo é responsável pela maior pintura.

Em contraste, o LCP desta página é um parágrafo de texto.

Para melhorar o Largest Contentful Paint (LCP) do seu site, você precisa garantir que o elemento HTML responsável pelo LCP apareça rapidamente.

Como melhorar a maior pintura de conteúdo

Para melhorar o LCP você precisa:

1. Descubra quais recursos são necessários para fazer o elemento LCP aparecer.
2. Veja como você pode carregar esses recursos mais rapidamente (ou não carregá-los).

Por exemplo, se o elemento LCP for uma foto, você pode reduzir o tamanho do arquivo da imagem.

Depois de executar um teste de velocidade DebugBear, você pode clicar em cada métrica de desempenho para ver mais informações sobre como ela pode ser otimizada.

Os recursos comuns que afetam o LCP são:

• Recursos de bloqueio de renderização.
• Imagens que não são otimizadas.
• Formatos de imagem desatualizados.
• Fontes que não são otimizadas.

Como reduzir recursos de bloqueio de renderização

Os recursos de bloqueio de renderização são arquivos que precisam ser baixados antes que o navegador comece a desenhar o conteúdo da página na tela. As folhas de estilo CSS normalmente bloqueiam a renderização, assim como muitas tags de script.

Para reduzir o impacto no desempenho dos recursos de bloqueio de renderização, você pode:

1. Identifique quais recursos estão bloqueando a renderização.
2. Revise se o recurso é necessário.
3. Revise se o recurso precisa bloquear a renderização.
4. Veja se o recurso pode ser carregado mais rapidamente, por exemplo, usando compactação.

A maneira fácil: na cascata de solicitações DebugBear, as solicitações de recursos de bloqueio de renderização são marcadas com uma tag "Blocking".

Como priorizar e acelerar solicitações de imagem LCP

Nesta seção, vamos aproveitar o novo atributo “fetchpriority” nas imagens para ajudar os navegadores do visitante a identificar rapidamente qual imagem deve carregar primeiro.

Use este atributo em seu elemento LCP.

Por quê?

Ao olhar apenas para o HTML, os navegadores geralmente não conseguem dizer imediatamente quais imagens são importantes. Uma imagem pode acabar sendo uma grande imagem de fundo, enquanto outra pode ser uma pequena parte do rodapé do site.

Dessa forma, todas as imagens são inicialmente consideradas de baixa prioridade, até que a página seja renderizada e o navegador saiba onde a imagem aparece.

No entanto, isso pode significar que o navegador só começa a baixar a imagem LCP bastante tarde.

O novo padrão da web Priority Hints permite que os proprietários de sites forneçam mais informações para ajudar os navegadores a priorizar imagens e outros recursos.

No exemplo abaixo, podemos ver que o navegador fica muito tempo esperando, conforme indicado pela barra cinza.

Nós escolheríamos esta imagem LCP para adicionar o atributo “fetchpriority”.

Como adicionar o atributo “FetchPriority” às imagens

Basta adicionar o atributo fetchpriority=”high” a uma tag HTML img para que o navegador priorize o download dessa imagem o mais rápido possível.

<img src="photo.jpg" fetchpriority="high" />

Como usar formatos de imagem modernos e imagens de tamanho apropriado

As imagens de alta resolução geralmente podem ter um tamanho de arquivo grande, o que significa que demoram muito para serem baixadas.

No resultado do teste de velocidade abaixo, você pode ver isso observando as áreas sombreadas em azul escuro. Cada linha indica um pedaço da imagem que chega ao navegador.

Existem duas abordagens para reduzir os tamanhos das imagens:

1. Certifique-se de que a resolução da imagem seja a mais baixa possível. Considere exibir imagens em diferentes resoluções, dependendo do tamanho do dispositivo do usuário.
2. Use um formato de imagem moderno como o WebP, que pode armazenar imagens da mesma qualidade em um tamanho de arquivo menor.

Como otimizar o tempo de carregamento da fonte

Se o elemento LCP for um cabeçalho ou parágrafo HTML, é importante carregar a fonte para esse trecho de texto rapidamente.

Uma maneira de conseguir isso seria usar tags de pré-carregamento que podem instruir o navegador a carregar as fontes antecipadamente.

A regra font-display: swap CSS também pode garantir uma renderização acelerada, pois o navegador renderizará imediatamente o texto com uma fonte padrão antes de alternar para a fonte da web mais tarde.

Monitore seu site para manter o LCP rápido

O monitoramento contínuo do seu site não apenas permite verificar se as otimizações do LCP estão funcionando, mas também garante que você seja alertado se o LCP piorar.

O DebugBear pode monitorar os Core Web Vitals e outras métricas de velocidade do site ao longo do tempo. Além de executar testes detalhados em laboratório, o produto também acompanha as métricas do usuário real do Google.

Experimente o DebugBear com uma avaliação gratuita de 14 dias.