Maior pintura de conteúdo explicada: como melhorar seu tempo
Publicados: 2023-02-11Lutando para melhorar a maior pintura de conteúdo em seu site? Ou não tem certeza do que significa a maior pintura de conteúdo e por que você precisa se preocupar com isso em primeiro lugar?
Não importa de onde você está começando, esta postagem é para você, porque você aprenderá tudo o que precisa saber sobre o Largest Contentful Paint.
Isso inclui o que significa a maior pintura de conteúdo, por que é importante, como medi-la e como melhorá-la.
Você pode usar o índice abaixo para pular para uma seção específica com base no seu nível de conhecimento atual. Ou continue lendo para começar do começo.
O que é a maior pintura de conteúdo (LCP)? Explicando o maior significado de pintura de conteúdo
Maior exibição de conteúdo é uma métrica de desempenho que mede quanto tempo leva para carregar o conteúdo principal de uma página da web.
A maior pintura de conteúdo faz parte das métricas do 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 na janela de visualização.
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 nós de texto ou outros elementos de texto de nível embutido.
- Image – elementos dentro de um elemento <img> ou elementos <image> dentro de um elemento <svg>.
- Vídeo – qualquer elemento <video> (usa a imagem do pôster).
- Um elemento com uma imagem de fundo – somente quando carregado por meio da função CSS url() (não se aplica a gradientes CSS).
Mais adiante nesta postagem, você aprenderá como encontrar o elemento de pintura de maior conteúdo exato para qualquer página do seu site.
Maior exibição de conteúdo x primeira exibição de conteúdo
Uma pergunta comum que você pode ter é qual é a diferença entre a maior exibição de conteúdo e a primeira exibição de conteúdo, outra métrica de desempenho comum.
Embora os dois termos sejam semelhantes, a principal diferença é que o Largest Contentful Paint mede quanto tempo leva para o “conteúdo principal” da página carregar, enquanto o First Contentful Paint mede quanto tempo leva para o “primeiro objeto” carregar ( independentemente é o conteúdo principal ).
Basicamente:
- LCP = apenas conteúdo principal
- FCP = primeira parte do conteúdo, independentemente de qual seja esse conteúdo
Como tal, seu tempo de LCP quase sempre será um pouco maior que seu tempo de FCP porque o elemento “conteúdo principal” geralmente não é o primeiro a carregar.
Por que o maior tempo de exibição de conteúdo do seu site é importante?
Há dois motivos principais pelos quais os tempos de maior exibição de conteúdo do seu site são importantes:
- Experiência de usuário
- Motor de Otimização de Busca
Experiência de usuário
O maior motivo pelo qual você deve se preocupar com os tempos de maior exibição de conteúdo do seu site é que essa métrica é um bom proxy para entender as experiências de seus usuários no que diz respeito ao desempenho do seu site.
A maioria dos usuários não se importa com quanto tempo seu site leva para carregar totalmente cada script e elemento. Em vez disso, eles se preocupam com quanto tempo leva para começar a obter valor do seu site.
O Largest Contentful Paint faz um bom trabalho ao tentar medir esse momento de “valor” ao ver quanto tempo leva para carregar o conteúdo principal.
Se você otimizar seu site para obter um tempo de pintura de conteúdo maior rápido, pode ter certeza de que está oferecendo aos usuários uma experiência sólida em seu site, pelo menos no que diz respeito ao desempenho (você também desejará um design amigável ao cliente e boa usabilidade).
Claro, isso não significa que você deva ignorar outras métricas de desempenho. Sempre recomendamos dar uma olhada holística no desempenho e nos gargalos do seu site, e é por isso que criamos nossa própria ferramenta de monitoramento de desempenho de aplicativos (APM) que está disponível gratuitamente se você estiver usando a hospedagem Kinsta - Kinsta APM.
Otimização para Mecanismos de Busca (SEO)
Na frente da otimização do mecanismo de pesquisa, a Maior pintura de conteúdo faz parte do trio de métricas do Core Web Vitals do Google, que o Google começou a usar como um fator de classificação de SEO em sua atualização do algoritmo de experiência de página de 2022.
Isso significa que ter tempos de exibição de conteúdo maiores ruins pode ser um empecilho para o desempenho do seu site nos resultados de pesquisa do Google.
Embora outros fatores, como qualidade/relevância do conteúdo e backlinks, ainda desempenhem um papel muito maior na classificação do seu site, é importante otimizar os tempos de maior exibição de conteúdo do seu site para garantir que você aproveite ao máximo seus esforços de SEO.
O que pode afetar as maiores pontuações de pintura de conteúdo?
Dois tipos “principais” de problemas podem afetar os tempos de maior exibição de conteúdo de uma página:
- Quanto tempo seu servidor leva para responder com o documento HTML inicial.
- Quanto tempo o recurso LCP real leva para carregar.
O primeiro tipo de problema lida com o tempo de resposta do servidor, também conhecido como tempo para o primeiro byte (TTFB). Antes que o navegador de um usuário possa sequer pensar em carregar o conteúdo principal, ele primeiro precisa obter uma resposta do servidor.
Aqui estão alguns dos problemas comuns que afetam isso:
- Não usar cache de página – não usar cache de página força o servidor a fazer mais “trabalho” antes de poder responder com o documento HTML.
- Hospedagem lenta – um provedor de hospedagem lento sempre terá um TTFB lento, independentemente do que você faça.
- Não usar um CDN – uma rede de entrega de conteúdo (CDN) pode acelerar o TTFB ao servir páginas de sua rede global em vez de exigir que os usuários os baixem do servidor de origem do seu site.
Depois que o servidor do seu site entrega o documento HTML inicial, pode haver mais gargalos quando se trata de carregar o elemento de conteúdo principal real.
Aqui estão alguns dos problemas comuns que afetam isso:
- JavaScript ou CSS de bloqueio de renderização (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ário antes de poder carregar o elemento principal, isso deixará seu LCP lento.
- Imagens não otimizadas – se o elemento LCP for uma imagem, o uso de imagens não otimizadas diminuirá seu tempo porque imagens maiores demoram mais para serem baixadas.
- Carregamento de fonte não otimizada – se o elemento LCP for texto, carregar fontes personalizadas de maneira não otimizada pode fazer com que o texto demore mais para aparecer.
- Arquivos descompactados – se você não estiver usando tecnologias de compactação como Gzip ou Brotli, isso fará com que o navegador do usuário demore mais para baixar os arquivos do seu site.
Dependendo do seu site, você pode estar enfrentando gargalos em ambas as áreas ou apenas em uma delas. Você aprenderá como resolver todos esses problemas um pouco mais adiante neste post.
O que é um bom tempo de pintura de conteúdo maior?
O Google define um tempo de pintura de conteúdo maior “bom” como sendo inferior a 2,5 segundos.
Se o tempo de maior pintura de conteúdo da sua página estiver entre 2,5 e 4,0 segundos, o Google o classificará como "Precisa de melhorias". E se o tempo da sua página for superior a 4,0 segundos, o Google define isso como “ruim”.
Aqui está um gráfico do Google que mostra isso visualmente:
Como medir a maior pintura de conteúdo: as melhores ferramentas de teste LCP
Há uma série de ferramentas que você pode usar para testar o desempenho do seu site para o Largest Contentful Paint – vamos passar por algumas das mais úteis…
Insights de velocidade de página
O PageSpeed Insights é uma das melhores ferramentas para avaliar o Largest Contentful Paint porque oferece quatro informações úteis:
- Você pode ver os maiores tempos de exibição de conteúdo do seu site com usuários reais no relatório Chrome UX ( se o seu site tiver tráfego suficiente para ser incluído no relatório ).
- Você pode executar testes simulados para ver o desempenho do seu site.
- O Google informará o elemento LCP real que está sendo usado para o teste, o que permite saber qual elemento otimizar.
- O Google fornecerá sugestões sobre como melhorar seu tempo de LCP.
Veja como usá-lo:
- Acesse o site do PageSpeed Insights.
- Insira a URL da página que você deseja testar.
- Clique em Analisar .
O Google mostrará resultados para dispositivos móveis e computadores - certifique-se de verificar ambos.
Para encontrar o elemento principal que o Google está usando para calcular o LCP, você pode rolar para baixo até a seção Diagnostics e expandir a seção Largest Contentful Paint element :
Novamente, certifique-se de verificar o dispositivo móvel e o desktop porque o elemento LCP pode ser diferente para cada um.
Ferramentas do desenvolvedor do Google Chrome
Você também pode testar o tempo de maior pintura de conteúdo diretamente das Ferramentas do desenvolvedor do Chrome usando a guia Desempenho ou o recurso de auditoria do Lighthouse. Recomendamos usar a guia Desempenho porque ela fornece mais informações.
Veja como começar:
- Abra a página que você deseja testar.
- Abra as Ferramentas do desenvolvedor do Chrome.
- Vá para a guia Desempenho .
- Verifique se a caixa Web Vitals está marcada.
- Clique no botão Recarregar ( observado abaixo ).
Agora você deve ver uma análise completa do seu site.
Se você passar o mouse sobre LCP na guia Rede , poderá ver a hora:
Se você passar o mouse sobre LCP na guia Timings , poderá ver o elemento LCP real:
Google Search Console
Embora o Google Search Console não permita que você teste uma página individual quanto ao tempo de maior exibição de conteúdo, ele é realmente útil para avaliar o desempenho em todo o site.
Cada página em seu site terá um tempo de LCP diferente, portanto, 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 de melhorias” e “Ruim” do Google. Os dados de desempenho vêm do relatório Chrome UX, portanto, são baseados em dados reais do usuário.
Se você ainda não o fez, primeiro precisará verificar seu site com o Google Search Console.
Depois de fazer isso, veja como acessar o relatório LCP:
- Abra o Google Search Console para o seu site.
- Acesse Core Web Vitals na guia Experiência .
- Clique em Abrir relatório ao lado do gráfico Mobile ou Desktop.
- Procure quaisquer problemas na seção Por que os URLs não são considerados bons . Se você clicar no problema, poderá ver mais informações sobre quais URLs estão causando problemas.
*Certifique-se de verificar os resultados de desktop e mobile, pois os dados podem ser diferentes em cada um.
WebPageTest
WebPageTest é outra opção útil para executar testes de desempenho simulados.
Ao contrário do PageSpeed Insights, o WebPageTest permite personalizar totalmente várias métricas de teste, como local de teste, velocidade de conexão, dispositivo e muito mais. Esse é o principal benefício de usá-lo em relação a outras ferramentas – oferece mais opções para configurar o teste.
Veja como executar um teste:
- Vá para WebPageTest.
- Adicione o URL da página que você deseja testar.
- Expanda as opções de configuração avançada para configurar totalmente seu teste.
Na página de resultados, você verá os dados LCP, juntamente com várias outras métricas de desempenho (incluindo uma análise em cascata).
Como encontrar o maior elemento de pintura de conteúdo
Se você quiser melhorar o Largest Contentful Paint, pode ser muito útil saber exatamente qual elemento o Google está usando para calcular 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, sabe que precisa encontrar maneiras de veicular essa imagem de herói o mais rápido possível se quiser melhorar os tempos de LCP de sua página inicial.
Como mencionamos anteriormente, você pode encontrar seu maior elemento de pintura de conteúdo usando PageSpeed Insights ou Chrome Developer Tools.
Certifique-se de verificar os resultados para dispositivos móveis e computadores, pois seu elemento LCP pode ser diferente em diferentes dispositivos.
Como melhorar a maior pintura de conteúdo no WordPress (ou outras plataformas)
Agora que você sabe tudo sobre o Largest Contentful Paint, vamos dar algumas dicas acionáveis sobre como melhorar o Largest Contentful Paint no WordPress.
Embora vamos nos concentrar no WordPress para essas dicas, todas as dicas são universais e se aplicam a outros tipos de sites.
Configurar o cache para melhorar o tempo de resposta do servidor
O armazenamento em cache pode melhorar o tempo de resposta do servidor reduzindo o trabalho de processamento que seu servidor precisa fazer antes de entregar o documento HTML finalizado aos navegadores dos visitantes.
Se você estiver hospedando seu site WordPress com Kinsta, não precisa se preocupar em configurar o cache porque Kinsta implementa automaticamente o cache otimizado para você.
Se você hospeda em outro lugar, pode ativar o cache em seu site usando um plug-in gratuito como o WP Super Cache ou um plug-in pago como o WP Rocket.
Para mais opções, confira nosso post com os melhores plugins de cache do WordPress.
Atualize para uma hospedagem WordPress mais rápida
Embora todas as táticas desta lista possam ajudá-lo a melhorar seu tempo de LCP, não há rodeios:
Se você usa hospedagem WordPress lenta e não otimizada, seus tempos de LCP sempre serão limitados pela qualidade do seu host.
Você pode melhorar um pouco as coisas, mas sempre lutará para atingir tempos de LCP abaixo de 2,5 segundos se seu host for lento.
Se você deseja a maneira mais fácil de melhorar seus tempos de pintura de maior conteúdo, pode migrar seu site para Kinsta. Kinsta não apenas oferece infraestrutura de hospedagem otimizada para desempenho, mas também possui recursos integrados para lidar com muitas das outras otimizações nesta lista.
Isso significa que você pode se concentrar no crescimento do seu site, em vez de perder tempo otimizando os tempos de maior exibição de conteúdo.
Se você estiver interessado, Kinsta migrará sites ilimitados de qualquer host gratuitamente – saiba mais sobre a migração gratuita aqui.
Se você ainda está em dúvida, experimente primeiro o restante das dicas desta lista. Mas se você ainda estiver lutando depois de fazer tudo nesta lista, talvez precise de uma hospedagem melhor.
Use uma rede de entrega de conteúdo (CDN)
Sem um CDN, todos os visitantes do seu site precisam baixar o HTML de uma página e os ativos estáticos do seu servidor de hospedagem.
Se seus visitantes estiverem localizados perto de seu servidor, isso geralmente não é um problema. Mas se seus visitantes estiverem espalhados pelo mundo, isso pode tornar seu site mais lento devido à distância física entre um visitante e o servidor de seu site.
Com um CDN, você pode distribuir os ativos estáticos do seu site (ou até mesmo as páginas HTML finalizadas do seu site) para a rede global do CDN. Dessa forma, os visitantes podem baixar arquivos do local mais próximo da CDN, o que é muito mais rápido.
Se você estiver hospedando com Kinsta, recomendamos usar o recurso Edge Caching de Kinsta para obter os melhores resultados.
O recurso de cache de borda de Kinsta funciona armazenando em cache as páginas HTML completas do seu site e ativos estáticos na rede global da Cloudflare ( em vez de apenas armazenar em cache ativos estáticos como a maioria das soluções CDN ).
Isso significa que os visitantes do seu site podem baixar a página completa do ponto de presença mais próximo, o que acelera o tempo de resposta do servidor e quanto tempo leva para carregar o recurso LCP.
Para habilitar o Edge Caching de Kinsta, vá para a guia Edge Caching no painel do seu site em MyKinsta.
Se 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 de bloqueio de renderização (adiar ou remover)
O JavaScript de bloqueio de renderização é o JavaScript carregado antes do elemento LCP principal, mesmo que não seja necessário naquele momento.
Ao atrasar o carregamento do elemento LCP, ele diminuirá os tempos de carregamento do LCP.
Para corrigir isso, existem algumas estratégias que você pode implementar:
- Remova o JavaScript desnecessário, se possível.
- Adie o JavaScript para que ele não bloqueie o carregamento do elemento principal do seu site.
- Atrase o JavaScript até que um usuário interaja com seu site.
Para a maioria das pessoas, a maneira mais fácil de implementar essa funcionalidade é por meio de plug-ins como Autoptimize ou WP Rocket.
Para um guia completo sobre como fazer isso, temos dois posts bem detalhados:
- Como eliminar recursos de bloqueio de renderização no WordPress
- Como adiar a análise de JavaScript
Evite CSS de bloqueio de renderização e otimize a entrega de CSS
Assim como o JavaScript não otimizado pode tornar seu site lento, o CSS não otimizado também pode fazer o mesmo.
Essencialmente, você deseja carregar o mínimo possível de CSS. E para o CSS que você precisa carregar, você deseja carregá-lo da maneira ideal. Normalmente, isso significa que você deseja carregar o CSS importante no início, enquanto atrasa o CSS não crítico até o final do processo de carregamento.
Se você não é um desenvolvedor, a maneira mais fácil de conseguir isso é usando plug-ins 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 fornecer CSS da maneira ideal.
Se você quiser uma visão mais profunda de como fazer tudo isso, confira nosso guia completo sobre como otimizar CSS.
Minimize seu HTML, CSS e JavaScript
Além das técnicas de otimização de código acima, você também vai querer minimizar o HTML, CSS e JavaScript do seu site.
Essencialmente, isso remove caracteres desnecessários e espaços em branco do código do seu site para reduzir seu tamanho.
Se você estiver hospedando com Kinsta, Kinsta pode lidar automaticamente com a minificação por meio de nossa integração Cloudflare. Veja como controlar esse recurso:
- Abra o painel do seu site no MyKinsta.
- Vá para a guia CDN .
- Clique em Configurações ao lado de Otimização de imagem.
- Marque as caixas para CSS e JS e salve as configurações.
Se você estiver hospedando seu site em outro lugar, pode usar um plug-in gratuito como o Autoptimize para reduzir seu código ou um dos plug-ins premium abrangentes, como Perfmatters, WP Rocket ou FlyingPress.
Ou confira nosso tutorial completo de minificação de código para saber mais. Embora o tutorial se concentre em JavaScript, você também pode usar os mesmos métodos e plug-ins para reduzir outros códigos.
Use compactação no nível do servidor (Gzip ou Brotli)
A compactação no nível do servidor permite reduzir o tamanho dos arquivos do seu site usando tecnologias como Gzip ou Brotli.
Por exemplo, a compactação que usamos para o site Kinsta reduziu o tamanho do arquivo da página inicial Kinsta em 85,82%.
Se você estiver hospedando seu site WordPress com Kinsta, não precisa se preocupar com isso porque Kinsta ativa a compactação Brotli para todos os sites automaticamente.
Se você estiver hospedando seu site em outro lugar, pode usar esta ferramenta gratuita da GiftOfSpeed para verificar se o seu site possui Gzip ou Brotli ativado.
Se o seu site não estiver usando compactação, siga nosso guia sobre como ativar a compactação Gzip para configurá-lo.
Se você estiver usando o Cloudflare para fornecer o conteúdo do seu site, o Cloudflare também possui uma configuração integrada para habilitar a compactação Brotli:
- Abra seu site no painel Cloudflare.
- Vá para Velocidade → Otimização no menu da barra lateral.
- Ative a alternância Brotli .
Comprimir e Redimensionar Imagens
Se o elemento LCP for uma imagem, encontrar maneiras de reduzir o tamanho desse arquivo de imagem reduzirá o tempo que o navegador do usuário leva para baixar a imagem (e, portanto, acelerará o tempo do LCP).
Para reduzir o tamanho da imagem, você deve redimensioná-la para as dimensões em que realmente a está usando, compactá-la usando compactação com perdas ou sem perdas e exibi-la em um formato otimizado, como WebP.
Essa abordagem geralmente é apenas uma prática recomendada de otimização de desempenho – não é específica para a Maior exibição de conteúdo.
Para uma visão mais abrangente, confira nosso guia detalhado de otimização de imagens para sites.
E sim – se você estiver hospedando seu site WordPress com Kinsta, não precisa se preocupar com isso porque Kinsta oferece um recurso integrado para otimizar automaticamente as imagens do seu site sem a necessidade de ferramentas de terceiros.
Veja como habilitar esse recurso:
- Abra o painel do seu site no MyKinsta.
- Vá para a guia CDN .
- Clique em Configurações ao lado de Otimização de imagem.
- Escolha seu nível preferido de otimização de imagem e salve as configurações - usar o Lossy oferecerá as maiores melhorias de velocidade, embora possa ter um pequeno efeito na qualidade da imagem.
Pré-carregue a maior imagem de pintura de conteúdo
Se o elemento LCP for uma imagem, outra estratégia para melhorar o LCP é pré-carregar a imagem com o maior conteúdo pintado. É por isso que você pode ver uma recomendação como “Pré-carregar a maior imagem de pintura de conteúdo” no PageSpeed Insights.
Com o pré-carregamento, você pode instruir o navegador do usuário a priorizar o download de determinados recursos, como a imagem específica que é o elemento LCP do seu site.
A maneira menos técnica de pré-carregar imagens LCP é usar um plug-in como o Perfmatters, que oferece um recurso dedicado de pré-carregamento de imagens críticas . Tudo o que você precisa fazer é especificar quantas imagens pré-carregar – recomendamos apenas começar com uma, pois pré-carregar muitos recursos pode ter um efeito negativo.
Existem também alguns plugins gratuitos no WordPress.org para conseguir isso, como o plugin Preload Featured Images do WPZOOM, bem como outros plugins premium, como o FlyingPress.
Verifique se há problemas de carregamento lento
Outro problema que pode acionar a mensagem “Preload Largest Contentful Paint image” no PageSpeed Insights são os problemas com a forma como o seu site WordPress está carregando imagens lentamente.
Ou, isso também pode acionar um aviso “A maior imagem de pintura de conteúdo foi carregada lentamente” no PageSpeed Insights.
O carregamento lento permite que você acelere o tempo de carregamento inicial do seu site, esperando para carregar determinados recursos (como imagens) até que um usuário comece a interagir com seu site.
Embora isso normalmente seja bom, pode diminuir os tempos de LCP se o site estiver tentando carregar lentamente a imagem que é o elemento LCP. Por esse motivo, você deve certificar-se de que seu site não esteja carregando lentamente nenhuma imagem visível na janela de visualização inicial.
Se você estiver usando o recurso de carregamento lento do navegador nativo que o WordPress introduziu no WordPress 5.5, não deverá ter esse problema porque 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 plug-in de carregamento lento com JavaScript, talvez seja necessário configurar manualmente essa exclusão nas configurações do plug-in. Por exemplo, o plug-in Perfmatters inclui uma opção para permitir que você exclua as primeiras imagens “X” do carregamento lento.
Se o seu plug-in de carregamento lento não permite configurar esse tipo de exclusão, você pode alternar para um plug-in diferente que permita.
Otimize o carregamento de fonte com exibição de fonte: opcional
Se o elemento LCP for texto, o processo de carregamento da fonte do site pode atrasar a aparência do texto, o que diminuirá o tempo do LCP.
Normalmente, isso acontece ao usar fontes personalizadas. Se o seu site estiver configurado para aguardar a renderização de qualquer texto até que a fonte personalizada seja carregada, isso tornará as coisas mais lentas se o arquivo da fonte personalizada demorar muito para carregar.
Para corrigir isso, você pode usar o Font-Display: descritor CSS opcional.
Isso informa ao navegador para usar uma fonte alternativa se a fonte personalizada não carregar em uma janela pequena (geralmente em torno de 100 ms ou menos).
Em linguagem simples, isso basicamente significa que o navegador deve permitir que a fonte personalizada carregue. Mas se a fonte personalizada não carregar rápido o suficiente, o navegador deve usar apenas uma fonte do sistema de fallback para evitar atrasar ainda mais o conteúdo.
Como alternativa, você também pode usar Font-Display: Swap, que carrega a fonte de fallback imediatamente e depois “troca” na fonte personalizada assim que a fonte personalizada é carregada. No entanto, essa abordagem pode causar problemas com o Cumulative Layout Shift se as fontes forem de tamanhos diferentes, então você deve ter cuidado.
A menos que sua fonte personalizada seja absolutamente necessária para o design do seu site, usar Font-Display: Opcional geralmente é a melhor opção do ponto de vista do Core Web Vitals.
Se você estiver confortável usando CSS diretamente, você pode editar manualmente a propriedade Font-Display na folha de estilo do seu tema filho.
Se você não quiser usar CSS, também pode encontrar plugins para ajudá-lo a fazer isso, embora a maioria deles seja focada na otimização para Google Fonts:
- Asset CleanUp – suporta Google Fonts para fontes locais gratuitas e personalizadas com a versão Pro.
- Perfmatters – oferece um recurso para o Google Fonts.
Se você estiver usando o Elementor para projetar seu site, o Elementor também inclui uma opção integrada para permitir que você use isso nas páginas criadas com o Elementor:
- Vá para Elementor → Configurações .
- Abra a guia Avançado .
- Defina o menu suspenso Carregamento de fontes do Google igual a Opcional .
Resumo
Aprender como melhorar o Largest Contentful Paint é importante para melhorar a experiência do usuário do seu site e maximizar suas classificações nos mecanismos de pesquisa.
Geralmente, há duas partes para melhorar o Largest Contentful Paint – acelerar o tempo de resposta do servidor e, em seguida, otimizar o código do site para renderizar o elemento LCP o mais rápido possível.
Se você não quiser se preocupar com o tempo de resposta lento do servidor, você pode mover seu site WordPress para Kinsta. A arquitetura otimizada para desempenho de Kinsta é projetada especificamente para entregar seu site o mais rápido possível.
Além disso, com o recurso Edge Caching da Kinsta, você pode armazenar em cache as páginas do seu site na rede global da Cloudflare, o que significa que visitantes de todo o mundo desfrutarão de tempos de resposta do servidor extremamente rápidos (e, consequentemente, tempos de LCP extremamente rápidos).
Se quiser saber mais, você pode conferir estas páginas para obter mais informações sobre a hospedagem gerenciada do WordPress da Kinsta ou a hospedagem gerenciada do WooCommerce da Kinsta.
Se você quiser que um profissional o ajude com algumas otimizações personalizadas de desempenho do LCP, você também pode encontrar um provedor no Kinsta Agency Directory.