Está com dificuldades para melhorar a Largest Contentful Paint do seu site? Ou não sabe o que é ou por que precisa se preocupar com ela?
Não importa o seu conhecimento, este artigo ensina tudo sobre a Largest Contentful Paint, incluindo o seu significado, importância, como medir e melhorar.
Use o índice para acessar seções específicas ou leia desde o começo.
O que é Largest Contentful Paint (LCP)?
O Largest Contentful Paint é uma métrica de desempenho que mede quanto tempo leva para o conteúdo principal de uma página da web ser carregado.
O Largest Contentful Paint faz parte da métrica Core Web Vitals do Google, juntamente com o Cumulative Layout Shift (CLS) e o First Input Delay (FID).
Em um nível mais técnico, o Largest Contentful Paint mede quanto tempo leva desde que o usuário inicia o carregamento da página até que o maior bloco de texto, imagem ou vídeo seja renderizado dentro do viewport.
O que significa “conteúdo principal” em termos de LCP?
Bem, o conteúdo principal dependerá da página real em questão, mas pode ser qualquer um dos seguintes:
- Texto – mais especificamente, quaisquer elementos de nível de bloco contendo texto ou outros elementos de texto em nível de linha.
- Imagem – elementos dentro de um elemento <img> ou <imagem> elementos dentro de um elemento <svg>.
- Vídeo – qualquer <video> elementos (ele usa a imagem do poster).
- Um elemento com uma imagem em segundo plano – somente quando carregado através da função CSS url() (ele não se aplica a gradientes CSS).
Mais tarde, neste artigo, você aprenderá como encontrar o elemento do Largest Contentful Paint exato para qualquer página do seu site.
Largest Contentful Paint vs First Contentful Paint
Uma pergunta comum que você pode ter é qual é a diferença entre Largest Contentful Paint vs First Contentful Paint, outra métrica de desempenho comum.
Embora os dois termos sejam semelhantes, a diferença chave é que o Largest Contentful Paint (LCP) mede quanto tempo leva para o “conteúdo principal” da página carregar, enquanto o First Contentful Paint (FCP) mede quanto tempo leva para o “primeiro objeto” carregar, independentemente de ser ou não o conteúdo principal.
Basicamente:
- LCP = mede apenas o tempo de carregamento do conteúdo principal da página
- FCP = mede o tempo de carregamento da primeira peça de conteúdo da página, independentemente de ser ou não o conteúdo principal.
Como tal, o tempo de LCP geralmente é ligeiramente superior ao tempo de FCP porque o elemento “conteúdo principal” normalmente não é o primeiro a ser carregado.
Por que o Largest Contentful Paint do seu site é importante?
Há duas razões principais para a importância de tempo do Largest Contentful Paint do seu site:
- Experiência do usuário
- Otimização para mecanismos de pesquisa
Experiência do usuário
A maior razão pela qual você deve se preocupar com os tempos de Largest Contentful Paint do seu site é que esta métrica é um bom indicador para entender as experiências dos seus usuários quando se trata do desempenho do seu site.
A maioria dos usuários não se importa com o tempo que leva para o seu site carregar completamente cada script e elemento. Ao invés disso, eles se importam com o tempo que leva para que eles comecem a obter valor do seu site.
Largest Contentful Paint faz um bom trabalho ao tentar medir esse momento de “valor” vendo quanto tempo leva o conteúdo principal para carregar.
Se você otimizar seu site para alcançar um tempo de Largest Contentful Paint mais rápido, você pode estar bastante confiante de que está oferecendo aos usuários uma experiência sólida em seu site, pelo menos quando se trata de desempenho (você também vai querer um design amigável ao cliente e boa usabilidade).
Claro, isso não significa que você deve ignorar outras métricas de desempenho. Nós sempre recomendamos dar uma olhada holística no desempenho e nos gargalos do seu site, e é por isso que nós criamos nossa própria ferramenta de monitoramento de desempenho de aplicativos (APM) que está disponível gratuitamente se você estiver usando a hospedagem de sites da Kinsta – Kinsta APM.
Otimização para mecanismos de pesquisa (SEO)
Na otimização para mecanismos de pesquisa, o Largest Contentful Paint faz parte do conjunto de métricas do Core Web Vitals do Google, que passou a ser utilizado como um fator de classificação SEO no algoritmo Page Experience a partir de 2022.
Isso significa que ter um LCP pobre pode prejudicar o desempenho do seu site nos resultados de pesquisa do Google.
Enquanto outros fatores como qualidade de conteúdo/relevância e backlinks ainda desempenham um papel muito maior no lugar em que o seu site está, é importante otimizar os maiores momentos de Contentful Paint do seu site para garantir que você esteja obtendo o máximo de seus esforços de SEO.
O que pode afetar o maior número de pontuações do Largest Contentful Paint?
Dois tipos “principais” de problemas podem afetar o Largest Contentful Paint de uma página:
- Quanto tempo leva o seu servidor para responder com o documento HTML inicial.
- Quanto tempo leva o recurso LCP real para carregar.
O primeiro tipo de questão trata do tempo de resposta do servidor, também conhecido como tempo para o primeiro byte (TTFB). Antes mesmo que o navegador de um usuário pense em carregar o conteúdo principal, ele precisa primeiro obter uma resposta do servidor.
Aqui estão algumas das questões comuns que afetam isso:
- Não usar o cache de páginas – não usar o cache de páginas força o servidor a fazer mais “trabalho” antes que ele possa responder com o documento HTML.
- Hospedagem lenta – um provedor de hospedagem lenta sempre terá um TTFB lento, independentemente do que você fizer.
- Não usar um CDN – uma rede de entrega de conteúdo (CDN) pode acelerar a TTFB servindo páginas da sua rede global ao invés de exigir que os usuários as baixem do servidor de origem do seu site.
Após o servidor do seu site entregar o documento HTML inicial, pode haver mais gargalos quando se trata de carregar o elemento de conteúdo principal real.
Aqui estão algumas das questões comuns que afetam isso:
- Render-blocking JavaScript ou CSS (ou código não otimizado/desnecessário, em geral) – se o navegador do usuário precisar baixar e/ou processar JavaScript ou CSS desnecessários antes que ele possa carregar o elemento principal, isso irá diminuir a velocidade do seu LCP.
- Imagens não otimizadas – se o elemento LCP for uma imagem, o uso de imagens não otimizadas diminuirá seu tempo porque imagens maiores levam mais tempo para serem baixadas.
- Carregamento de fontes não otimizado – se o elemento LCP for um texto, carregar fontes personalizadas de forma não otimizada pode fazer com que o texto demore mais tempo para aparecer.
- Arquivos sem compressão – se você não estiver usando tecnologias de compressão como Gzip ou Brotli, isso fará com que o navegador do usuário demore mais tempo para baixar os arquivos do seu site.
Dependendo do seu site, você pode estar experimentando gargalos em ambas as áreas ou apenas em uma das áreas. Você aprenderá como resolver todos esses problemas um pouco mais tarde neste artigo.
Qual é o tempo ideal para o Largest Contentful Paint?
O Google define um “Bom” Largest Contentful Paint como sendo inferior a 2,5 segundos.
Se o tempo de Largest Contentful Paint da sua página estiver entre 2,5 e 4,0 segundos, o Google classifica isso como “Precisa Melhorar”. E se o tempo da sua página for superior a 4.0 segundos, o Google define isso como “Pobre”.
Aqui está um gráfico do Google que mostra isso visualmente:
Como medir o Largest Contentful Paint: Melhores ferramentas de teste de LCP
Há uma série de ferramentas que você pode usar para testar o desempenho do seu site para a Largest Contentful Paint – vamos passar por algumas das mais úteis..
PageSpeed Insights
PageSpeed Insights é uma das melhores ferramentas para avaliar o Largest Contentful Paint porque oferece quatro partes úteis de informação:
- Você pode ver o Largest Contentful Paint do seu site com usuários reais no relatório Chrome UX (se o seu site tem tráfego suficiente para ser incluído no relatório).
- Você pode executar testes simulados para ver como seu site funciona.
- O Google lhe dirá o elemento LCP real que ele está usando para o teste, o que lhe permitirá saber qual elemento otimizar.
- O Google irá fornecer sugestões sobre como melhorar o tempo do seu LCP.
Aqui está como usá-lo:
- Vá para o site PageSpeed Insights.
- Digite a URL da página que você quer testar.
- Clique em Analyze.
O Google então mostrará os resultados tanto para celular quanto para desktop – certifique-se de verificar ambos.
Para encontrar o elemento principal que o Google está usando para calcular o LCP, você pode ir até a seção de Diagnostics e expandir a seção Largest Contentful Paint element:
Novamente, certifique-se de verificar tanto em dispositivos móveis quanto desktops, pois o elemento LCP pode ser diferente para cada um.
Ferramentas do Desenvolvedor Chrome
Você também pode testar o Largest Contentful Paint diretamente das Ferramentas de Desenvolvedor Chrome usando a aba Performance ou seu recurso de auditoria do Farol. Recomendamos o uso da aba Performance porque ela lhe dá mais informações.
Aqui está como começar:
- Abra a página que você quer testar.
- Abra as ferramentas do desenvolvedor do Chrome.
- Vá para a aba Performance.
- Certifique-se de que a caixa Web Vitals esteja marcada.
- Clique no botão Reload.
Agora você deve ver uma análise completa do seu site.
Se você passar o cursor sobre LCP na aba Network, você pode ver o tempo:
Se você passar o cursor sobre LCP na aba Timings, você pode ver o elemento LCP real:
Google Search Console
Embora o Google Search Console não permita que você teste uma página individual pelo seu Largest Contentful Paint, ele é realmente útil para avaliar o desempenho de todo o site.
Cada página do seu site terá um tempo de LCP diferente, então você não pode simplesmente testar sua página inicial e encerrar o dia.
Com o Google Search Console, você poderá ver onde cada página do seu site se encaixa nas categorizações “Bom”, “Precisa Melhorar” e “Pobre” do Google. Os dados de desempenho vêm do relatório do Chrome UX, portanto é baseado em dados reais do usuário.
Se você ainda não o fez, primeiro você precisará verificar seu site com o Google Search Console.
Uma vez que você tenha feito isso, aqui está como acessar o relatório do LCP:
- Abra o Google Search Console para o seu site.
- Vá para o Core Web Vitals sob a guia Experience.
- Clique em Open Report ao lado do gráfico do Mobile ou Desktop.
- Procure por qualquer problema na seção Why URLs aren’t considered good. Se você clicar no problema, você pode ver mais informações sobre quais URLs estão causando problemas.
*Certifique-se de verificar os resultados tanto na área de trabalho quanto no celular, pois os dados podem ser diferentes em cada um deles.
WebPageTest
O WebPageTest é outra opção útil para executar testes de desempenho.
Ao contrário do PageSpeed Insights, o WebPageTest permite que você personalize completamente várias métricas de teste, como o local de teste, velocidade de conexão, dispositivo e muito mais. Esse é o principal benefício de utilizá-lo em relação a outras ferramentas – ele lhe dá mais opções para configurar o teste.
Veja aqui como fazer um teste:
- Vá para WebPageTest.
- Adicione a URL da página que você quer testar.
- Expanda as opções de Configuração Avançada para configurar totalmente o seu teste.
Na página de resultados, você verá os dados da LCP, com toneladas de outras métricas de desempenho (incluindo uma análise da cascata).
Como encontrar o Largest Contentful Paint
Se você quer melhorar o Largest Contentful Paint, pode ser realmente útil saber exatamente qual elemento o Google está usando para calcular o seu tempo de LCP.
Por exemplo, se você sabe que o Google está usando sua imagem de herói como o elemento LCP em sua página inicial, você sabe que precisa encontrar maneiras de servir essa imagem de herói o mais rápido possível se você quiser melhorar o tempo de LCP da sua página inicial.
Como mencionamos anteriormente, você pode encontrar seu Largest Contentful Paint usando PageSpeed Insights ou Ferramentas para Desenvolvedores do Chrome.
Certifique-se de verificar os resultados tanto no celular quanto no desktop, pois seu elemento LCP pode diferir em diferentes dispositivos.
Como melhorar o Largest Contentful Paint no WordPress (ou outras plataformas)
Agora que você sabe tudo sobre a Largest Contentful Paint, vamos entrar em algumas dicas acionáveis para melhorar o Largest Contentful Paint no WordPress.
Embora nos concentremos no WordPress para estas dicas, todas as dicas são universais e se aplicam a outros tipos de sites.
Configure o cache para melhorar o tempo de resposta do servidor
O cache pode melhorar o tempo de resposta do servidor ao reduzir o trabalho de processamento que seu servidor precisa fazer antes de poder entregar o documento HTML acabado aos navegadores dos visitantes.
Se você está hospedando seu site WordPress com Kinsta, não é necessário configurar o cache manualmente, pois a Kinsta implementa automaticamente o caching otimizado para você.
No entanto, se você hospedar em outro lugar, poderá habilitar o cache em seu site usando um plugin gratuito, como o WP Super Cache, ou um plugin pago, como o WP Rocket.
Para obter mais opções, confira nosso artigo com os melhores plugins de cache de WordPress.
Atualize para hospedagem mais rápida de WordPress
Embora todas as táticas desta lista possam ajudá-lo a melhorar o seu tempo de LCP, não há nada que se possa fazer:
Se você usa uma hospedagem de WordPress lenta e não otimizada, seus tempos de LCP serão sempre limitados pela qualidade do seu host.
Você pode conseguir tornar as coisas um pouco melhores, mas você sempre terá dificuldades para alcançar tempos de 2,5 segundos de LCP se o seu provedor de hospedagem de sites for lento.
Se você quer a maneira mais fácil de melhorar seu Largest Contentful Paint, você pode migrar seu site para Kinsta. Kinsta não só oferece uma infraestrutura de hospedagem com desempenho otimizado, mas também temos recursos integrados para lidar com muitas outras otimizações desta lista.
Isso significa que você pode se concentrar no crescimento do seu site ao invés de brincar com a otimização do Largest Contentful Paint.
Se você estiver interessado, Kinsta migrará ilimitadamente sites de qualquer provedor de hospedagem de sites gratuitamente – saiba mais sobre migração gratuita aqui.
Se você ainda estiver na cerca – tente o resto das dicas desta lista primeiro. Mas se você ainda estiver lutando após fazer tudo nesta lista, você pode precisar apenas de uma hospedagem melhor.
Use uma Rede de Entrega de Conteúdo (CDN)
Sem um CDN, todos os visitantes do seu site precisam fazer o download de uma página HTML e ativos estáticos do seu servidor de hospedagem.
Se seus visitantes estão localizados perto do seu servidor, isso normalmente não é um problema. Mas se seus visitantes estão espalhados pelo mundo, isso pode atrasar seu site devido à distância física entre um visitante e o servidor do seu site.
Com um CDN, você pode distribuir os ativos estáticos do seu site (ou mesmo as páginas HTML acabadas do seu site) para a rede global da CDN. Dessa forma, os visitantes podem baixar arquivos do local mais próximo do CDN, o que é muito mais rápido.
Se você está hospedando com Kinsta, recomendamos usar o recurso Edge Caching da Kinsta para obter os melhores resultados.
O recurso de Edge Caching da Kinsta funciona através do cache de páginas HTML completas e ativos estáticos do seu site para a rede global do Cloudflare (ao invés de apenas cachear ativos estáticos como a maioria das soluções CDN).
Isto significa que os visitantes do seu site podem baixar a página completa do local mais próximo, acelerando o tempo de resposta do servidor e quanto tempo leva o seu recurso de LCP para carregar.
Para habilitar o Edge Caching Kinsta, vá para a aba Edge Caching no painel do seu site no MyKinsta.
Se você estiver hospedando em outro lugar, você pode configurar um CDN para os ativos estáticos do seu site usando serviços CDN populares como KeyCDN, Bunny, StackPath, e outros.
Evite JavaScript que bloqueia a renderização (Deferir ou Remover)
JavaScript de bloqueio de renderização é o JavaScript que carrega antes do seu elemento LCP principal mesmo que não seja necessário naquele momento.
Ao atrasar o carregamento do elemento LCP, ele irá diminuir os tempos de carregamento do seu LCP.
Para corrigir isso, existem algumas estratégias que você pode implementar:
- Remova o JavaScript desnecessário, se possível.
- Deferir o JavaScript para que ele não bloqueie o carregamento do elemento principal do seu site.
- Atrasar o JavaScript até que um usuário interaja com o seu site.
Para a maioria das pessoas, a maneira mais fácil de implementar esta funcionalidade é através de plugins como o Autoptimize ou o WP Rocket.
Para um guia completo sobre como fazer isso, nós temos dois posts muito detalhados:
Evite o Render-Blocking CSS e Otimize a Entrega do CSS
Assim como o JavaScript não otimizado pode retardar seu site, o CSS não otimizado também pode fazer o mesmo.
Essencialmente, você quer carregar o mínimo possível de CSS. E para o CSS que você precisa carregar, você quer carregá-lo de uma maneira ideal. Normalmente, isso significa que você quer carregar CSS importantes mais cedo, enquanto atrasa CSS não críticos até mais tarde no processo de carregamento.
Se você não é um desenvolvedor, a maneira mais fácil de conseguir isso é usando plugins de otimização de desempenho como Perfmatters, WP Rocket, ou FlyingPress.
Por exemplo, o WP Rocket oferece recursos integrados para remover CSS não utilizado página por página e servir CSS de uma maneira ideal.
Se você quer um olhar muito mais profundo sobre como fazer tudo isso, confira nosso guia completo sobre como otimizar o CSS.
Minifique o seu HTML, CSS, e JavaScript
Além das técnicas de otimização de código acima, você também vai querer minificar o HTML, CSS e JavaScript do seu site.
Essencialmente, isto remove caracteres desnecessários e espaço branco do código do seu site para diminuir seu tamanho.
Se você está hospedando com Kinsta, Kinsta pode lidar automaticamente com a minificação através de nossa integração com o Cloudflare. Veja aqui como controlar este recurso:
- Abra o painel de controle do seu site no MyKinsta.
- Vá para a aba CDN.
- Clique em Configurações ao lado de Otimização de Imagens.
- Marque as caixas para CSS e JS e salve as configurações.
Se você está hospedando seu site em outro lugar, você pode usar um plugin gratuito como o Autoptimize para minificar seu código ou um dos plugins completos premium como Perfmatters, WP Rocket, ou FlyingPress.
Ou, confira nosso tutorial completo de minificação de código para saber mais. Enquanto o tutorial foca no JavaScript, você pode usar os mesmos métodos e plugins para minificar outros códigos também.
Use compressão de nível de servidor (Gzip ou Brotli)
A compressão ao nível de servidor permite que você diminua o tamanho dos arquivos do seu site usando tecnologias como Gzip ou Brotli.
Por exemplo, a compressão que usamos para o site Kinsta reduziu o tamanho do arquivo da página inicial da Kinsta em 85,82%.
Se você estiver hospedando seu site WordPress na Kinsta, não é necessário se preocupar com isso porque a Kinsta permite automaticamente a compressão Brotli para todos os sites.
No entanto, se o seu site estiver hospedado em outro lugar, você pode verificar se o Gzip ou o Brotli estão habilitados usando a ferramenta gratuita GiftOfSpeed.
Se a compressão não estiver habilitada, você pode seguir nosso guia sobre como habilitar a compressão Gzip.
Se você estiver usando o Cloudflare para entregar o conteúdo do seu site, o Cloudflare tem uma configuração integrada para habilitar a compressão Brotli.
- Abra o seu site no painel do Cloudflare.
- Ir para Speed → Optimization no menu da barra lateral.
- Habilite a alternância de Brotli.
Como comprimir e redimensionar imagens
Se o seu elemento LCP é uma imagem, encontrar maneiras de reduzir o tamanho desse arquivo de imagem irá reduzir o tempo que o navegador do usuário leva para baixar a imagem (e assim acelerar o tempo do seu LCP).
Para reduzir o tamanho da imagem, você deve redimensioná-la para as dimensões em que está sendo realmente usada, comprimi-la usando compressão com ou sem perda e servi-la em um formato otimizado como o WebP.
Essa abordagem é geralmente considerada uma das melhores práticas de otimização de desempenho e não se aplica apenas à Largest Contentful Paint.
Para uma visão mais abrangente, confira nosso guia detalhado de otimização de imagens para sites.
E, além disso, se você hospedar seu site WordPress com Kinsta, não precisará se preocupar com isso, pois a plataforma oferece um recurso integrado para otimizar automaticamente as imagens do seu site sem a necessidade de usar qualquer ferramenta de terceiros.
Veja aqui como habilitar este recurso:
- Abra o painel de controle do seu site no MyKinsta.
- Vá para a aba CDN.
- Clique em Settings ao lado de Image Optimization.
- Escolha o seu nível preferido de otimização de imagem e salve as configurações – usando Com Perda oferecerá as maiores melhorias de velocidade, embora possa ter um pequeno efeito na qualidade da imagem.
Pré-carregue o Largest Contentful Paint
Se o seu elemento LCP é uma imagem, outra estratégia para melhorar o LCP é pré-carregar a imagem do Largest Contentful Paint. É por isso que você pode ver uma recomendação como “Preload Largest Contentful Paint image” em PageSpeed Insights.
Com o pré-carregamento, você pode dizer ao navegador de um usuário para priorizar o download de certos recursos, tais como a imagem específica que é o elemento LCP do seu site.
A maneira mais não técnica de pré-carga de imagens LCP é usar um plugin como o Perfmatters, que oferece um recurso dedicado de Preload Critical Images. Tudo que você precisa fazer é especificar quantas imagens pré-carregar – recomendamos apenas começar com uma, já que pré-carregar muitos ativos pode ter um efeito negativo.
Há também alguns plugins gratuitos no WordPress.org para conseguir isso, como o plugin Preload Featured Images da WPZOOM, bem como outros plugins premium, como o FlyingPress.
Verifique problemas de carregamento preguiçoso (lazy loading)
Outra questão que pode desencadear a mensagem “Preload Largest Contentful Paint image” no PageSpeed Insights são problemas com o carregamento preguiçoso de imagens em seu site WordPress.
Ou seja, isso também pode acionar um aviso de “Largest Contentful Paint image was lazily loaded” no PageSpeed Insights.
O carregamento lento permite que você acelere os tempos de carga inicial do seu site, aguardando para carregar determinados recursos (como imagens) até que um usuário comece a interagir com seu site.
Embora isso seja normalmente uma coisa boa, pode retardar os tempos de LCP se o seu site estiver tentando carregar lentamente a imagem que é o elemento LCP. Por esse motivo, você desejará garantir que seu site não esteja carregando preguiçosamente nenhuma imagem visível na viewport inicial.
Se você estiver usando o recurso de carregamento lento do navegador nativo introduzido pelo WordPress no WordPress 5.5, não deverá ter esse problema, pois o WordPress já exclui automaticamente a primeira imagem no conteúdo a partir do WordPress 5.9.
Se você deseja excluir mais do que a primeira imagem, pode usar a função wp_omit_loading_attr_threshold (mas a maioria das pessoas não precisará fazer nada aqui).
No entanto, se você estiver usando um plugin de carregamento lento alimentado por JavaScript, talvez seja necessário configurar manualmente essa exclusão nas configurações do plugin. Por exemplo, o plugin Perfmatters inclui uma opção para permitir que você exclua as primeiras “X” imagens do carregamento lento.
Se o seu plugin de carregamento preguiçoso não permitir que você configure este tipo de exclusão, você pode mudar para um plugin diferente que o faça.
Otimize o carregamento de fontes com o Font-Display: Opcional
Se o seu elemento LCP é texto, o processo de carregamento da fonte do seu site pode atrasar o aparecimento do texto, o que diminuirá o tempo do seu LCP.
Tipicamente, isto acontece quando se usa fontes personalizadas. Se o seu site estiver configurado para esperar para renderizar qualquer texto até que a fonte personalizada tenha sido carregada, isto irá diminuir a velocidade se o arquivo de fonte personalizada levar muito tempo para ser carregado.
Para corrigir isso, você pode usar o Font-Display: Descritor opcional de CSS.
Isso diz ao navegador para usar uma fonte fallback se a fonte personalizada não for carregada em uma pequena janela (geralmente em torno de 100ms ou menos).
Em linguagem simples, isto basicamente significa que o navegador deve dar à fonte personalizada uma chance de carregar. Mas se a fonte personalizada não for carregada rapidamente o suficiente, o navegador deve apenas usar uma fonte do sistema fallback para evitar mais atrasos no conteúdo.
Alternativamente, você também pode usar o Font-Display: Swap, que carrega a fonte fallback imediatamente e depois “swaps” na fonte personalizada, uma vez que a fonte personalizada é carregada. Entretanto, esta abordagem pode causar problemas com o Cumulative Layout Shift se as fontes forem de tamanhos diferentes, então você vai querer ter cuidado.
A menos que sua fonte personalizada seja absolutamente necessária para o design do seu site, usando o Font-Display: Opcional é geralmente a melhor opção do ponto de vista do Core Web Vitals.
Se você está confortável usando CSS diretamente, você pode editar manualmente a propriedade Font-Display na folha de estilo do seu Child Theme.
Se você não quer usar CSS, você também pode encontrar plugins para ajudá-lo a fazer isso, embora a maioria deles esteja focada na otimização para o Google Fonts:
- Asset CleanUp – suporta as fontes locais do Google de forma gratuita e personalizada com a versão Pro.
- Perfmatters – oferece um recurso para as Fontes do Google.
Se você está usando a Elementor para projetar seu site, a Elementor também inclui uma opção incorporada para permitir que você use isso para páginas que você cria com a Elementor:
- Vá para Elementor → Settings.
- Abra a aba Advanced.
- Defina a queda de Google Fonts Load igual a Optional.
Resumo
Aprender como melhorar o Largest Contentful Paint é importante para melhorar a experiência do seu site e maximizar à sua classificação nos mecanismos de pesquisa.
Há geralmente duas partes para melhorar o Largest Contentful Paint – acelerar o tempo de resposta do seu servidor e depois otimizar o código do seu site para renderizar o elemento LCP o mais rápido possível.
Se você não quer se preocupar com o tempo de resposta lento do servidor, você pode mover seu site WordPress para Kinsta. A arquitetura otimizada de performance da Kinsta foi projetada especificamente para entregar o seu site o mais rápido possível.
Além disso, com o recurso de Edge Caching da Kinsta, você pode armazenar em cache as páginas do seu site na rede global do Cloudflare, o que significa que visitantes de todo o mundo, poderão desfrutar de tempos de resposta do servidor mais rápidos (e, consequentemente, tempos de LCP mais rápidos).
Se você quiser saber mais, você pode conferir estas páginas para obter mais informações sobre a hospedagem gerenciada de WordPress da Kinsta ou a hospedagem gerenciada de WooCommerce da Kinsta.
Se você gostaria que um profissional o ajudasse com algumas otimizações personalizadas de desempenho do LCP, você também pode encontrar um fornecedor no Diretório de agências Kinsta.
Deixe um comentário