O que \u00e9 Largest Contentful Paint (LCP)?<\/h2>\n
O Largest Contentful Paint \u00e9 uma m\u00e9trica de desempenho que mede quanto tempo leva para o conte\u00fado principal de uma p\u00e1gina da web ser carregado.<\/p>\n
O Largest Contentful Paint faz parte da m\u00e9trica Core Web Vitals do Google<\/a>, juntamente com o Cumulative Layout Shift (CLS)<\/a>.<\/p>\n Em um n\u00edvel mais t\u00e9cnico, o Largest Contentful Paint mede quanto tempo leva desde que o usu\u00e1rio inicia o carregamento da p\u00e1gina at\u00e9 que o maior bloco de texto, imagem ou v\u00eddeo seja renderizado dentro do viewport.<\/p>\n O que significa “conte\u00fado principal” em termos de LCP?<\/p>\n Bem, o conte\u00fado principal depender\u00e1 da p\u00e1gina real em quest\u00e3o, mas pode ser qualquer um dos seguintes:<\/p>\n Mais tarde, neste artigo, voc\u00ea aprender\u00e1 como encontrar o elemento do Largest Contentful Paint exato para qualquer p\u00e1gina do seu site.<\/p>\n\n Uma pergunta comum que voc\u00ea pode ter \u00e9 qual \u00e9 a diferen\u00e7a entre Largest Contentful Paint vs First Contentful Paint<\/a>, outra m\u00e9trica de desempenho comum.<\/p>\n Embora os dois termos sejam semelhantes, a diferen\u00e7a chave \u00e9 que o Largest Contentful Paint (LCP) mede quanto tempo leva para o “conte\u00fado principal” da p\u00e1gina carregar, enquanto o First Contentful Paint (FCP) mede quanto tempo leva para o “primeiro objeto” carregar, independentemente de ser ou n\u00e3o o conte\u00fado principal.<\/p>\n Basicamente:<\/p>\n Como tal, o tempo de LCP geralmente \u00e9 ligeiramente superior ao tempo de FCP porque o elemento “conte\u00fado principal” normalmente n\u00e3o \u00e9 o primeiro a ser carregado.<\/p>\n H\u00e1 duas raz\u00f5es principais para a import\u00e2ncia de tempo do Largest Contentful Paint do seu site:<\/p>\n A maior raz\u00e3o pela qual voc\u00ea deve se preocupar com os tempos de Largest Contentful Paint\u00a0do seu site \u00e9 que esta m\u00e9trica \u00e9 um bom indicador para entender as experi\u00eancias dos seus usu\u00e1rios quando se trata do desempenho do seu site.<\/p>\n A maioria dos usu\u00e1rios n\u00e3o se importa com o tempo que leva para o seu site carregar completamente cada script e elemento. Ao inv\u00e9s disso, eles se importam com o tempo que leva para que eles comecem a obter valor do seu site.<\/p>\n Largest Contentful Paint faz um bom trabalho ao tentar medir esse momento de “valor” vendo quanto tempo leva o conte\u00fado principal para carregar.<\/p>\n Se voc\u00ea otimizar seu site para alcan\u00e7ar um tempo de Largest Contentful Paint mais r\u00e1pido, voc\u00ea pode estar bastante confiante de que est\u00e1 oferecendo aos usu\u00e1rios uma experi\u00eancia s\u00f3lida em seu site, pelo menos quando se trata de desempenho (voc\u00ea tamb\u00e9m vai querer um design amig\u00e1vel ao cliente<\/a> e boa usabilidade<\/a>).<\/p>\n Claro, isso n\u00e3o significa que voc\u00ea deve ignorar outras m\u00e9tricas de desempenho. N\u00f3s sempre recomendamos dar uma olhada hol\u00edstica no desempenho e nos gargalos do seu site<\/a>, e \u00e9 por isso que n\u00f3s criamos nossa pr\u00f3pria ferramenta de monitoramento de desempenho de aplicativos (APM)<\/a> que est\u00e1 dispon\u00edvel gratuitamente se voc\u00ea estiver usando a hospedagem de sites da Kinsta – Kinsta APM<\/a>.<\/p>\n Na otimiza\u00e7\u00e3o para mecanismos de pesquisa<\/a>, o Largest Contentful Paint faz parte do conjunto de m\u00e9tricas do Core Web Vitals do Google, que passou a ser utilizado como um fator de classifica\u00e7\u00e3o SEO<\/a> no algoritmo Page Experience a partir de 2022.<\/p>\n Isso significa que ter um LCP pobre pode prejudicar o desempenho do seu site nos resultados de pesquisa do Google.<\/p>\n Enquanto outros fatores como qualidade de conte\u00fado\/relev\u00e2ncia<\/a> e backlinks ainda desempenham um papel muito maior no lugar em que o seu site est\u00e1<\/a>, \u00e9 importante otimizar os maiores momentos de Contentful Paint do seu site para garantir que voc\u00ea esteja obtendo o m\u00e1ximo de seus esfor\u00e7os de SEO.<\/p>\n Dois tipos “principais” de problemas podem afetar o Largest Contentful Paint de uma p\u00e1gina:<\/p>\n O primeiro tipo de quest\u00e3o trata do tempo de resposta do servidor, tamb\u00e9m conhecido como tempo para o primeiro byte (TTFB)<\/a>. Antes mesmo que o navegador de um usu\u00e1rio pense em carregar o conte\u00fado principal, ele precisa primeiro obter uma resposta do servidor.<\/p>\n Aqui est\u00e3o algumas das quest\u00f5es comuns que afetam isso:<\/p>\n Ap\u00f3s o servidor do seu site entregar o documento HTML inicial, pode haver mais gargalos quando se trata de carregar o elemento de conte\u00fado principal real.<\/p>\n Aqui est\u00e3o algumas das quest\u00f5es comuns que afetam isso:<\/p>\n Dependendo do seu site, voc\u00ea pode estar experimentando gargalos em ambas as \u00e1reas ou apenas em uma das \u00e1reas. Voc\u00ea aprender\u00e1 como resolver todos esses problemas um pouco mais tarde neste artigo.<\/p>\n O Google define um “Bom” Largest Contentful Paint como sendo inferior a 2,5 segundos.<\/p>\n Se o tempo de Largest Contentful Paint da sua p\u00e1gina estiver entre 2,5 e 4,0 segundos, o Google classifica isso como “Precisa Melhorar”. E se o tempo da sua p\u00e1gina for superior a 4.0 segundos, o Google define isso como “Pobre”.<\/p>\n Aqui est\u00e1 um gr\u00e1fico do Google que mostra isso visualmente:<\/p>\n H\u00e1 uma s\u00e9rie de ferramentas que voc\u00ea pode usar para testar o desempenho do seu site<\/a> para a Largest Contentful Paint – vamos passar por algumas das mais \u00fateis..<\/p>\n PageSpeed Insights<\/a> \u00e9 uma das melhores ferramentas para avaliar o Largest Contentful Paint porque oferece quatro partes \u00fateis de informa\u00e7\u00e3o:<\/p>\n Aqui est\u00e1 como us\u00e1-lo:<\/p>\n O Google ent\u00e3o mostrar\u00e1 os resultados tanto para celular quanto para desktop – certifique-se de verificar ambos.<\/p>\n Para encontrar o elemento principal que o Google est\u00e1 usando para calcular o LCP, voc\u00ea pode ir at\u00e9 a se\u00e7\u00e3o de Diagnostics <\/strong>e expandir a se\u00e7\u00e3o Largest Contentful Paint element<\/strong>:<\/p>\n Novamente, certifique-se de verificar tanto em dispositivos m\u00f3veis quanto desktops, pois o elemento LCP pode ser diferente para cada um.<\/p>\n Voc\u00ea tamb\u00e9m pode testar o Largest Contentful Paint diretamente das Ferramentas de Desenvolvedor Chrome<\/a> usando a aba Performance ou seu recurso de auditoria do Farol. Recomendamos o uso da aba Performance <\/strong>porque ela lhe d\u00e1 mais informa\u00e7\u00f5es.<\/p>\n Aqui est\u00e1 como come\u00e7ar:<\/p>\n Agora voc\u00ea deve ver uma an\u00e1lise completa do seu site.<\/p>\n Se voc\u00ea passar o cursor sobre LCP na aba Network<\/strong>, voc\u00ea pode ver o tempo:<\/p>\n \u00a0<\/p>\n Se voc\u00ea passar o cursor sobre LCP na aba Timings<\/strong>, voc\u00ea pode ver o elemento LCP real:<\/p>\n Embora o Google Search Console n\u00e3o permita que voc\u00ea teste uma p\u00e1gina individual pelo seu Largest Contentful Paint, ele \u00e9 realmente \u00fatil para avaliar o desempenho de todo o site.<\/p>\n Cada p\u00e1gina do seu site ter\u00e1 um tempo de LCP diferente, ent\u00e3o voc\u00ea n\u00e3o pode simplesmente testar sua p\u00e1gina inicial e encerrar o dia.<\/p>\n Com o Google Search Console<\/a>, voc\u00ea poder\u00e1 ver onde cada p\u00e1gina do seu site se encaixa nas categoriza\u00e7\u00f5es “Bom”, “Precisa Melhorar” e “Pobre” do Google. Os dados de desempenho v\u00eam do relat\u00f3rio do Chrome UX, portanto \u00e9 baseado em dados reais do usu\u00e1rio.<\/p>\n Se voc\u00ea ainda n\u00e3o o fez, primeiro voc\u00ea precisar\u00e1 verificar seu site com o Google Search Console<\/a>.<\/p>\n Uma vez que voc\u00ea tenha feito isso, aqui est\u00e1 como acessar o relat\u00f3rio do LCP:<\/p>\n *Certifique-se de verificar os resultados tanto na \u00e1rea de trabalho quanto no celular, pois os dados podem ser diferentes em cada um deles.<\/em><\/p>\n O WebPageTest<\/a> \u00e9 outra op\u00e7\u00e3o \u00fatil para executar testes de desempenho<\/a>.<\/p>\n Ao contr\u00e1rio do PageSpeed Insights, o WebPageTest permite que voc\u00ea personalize completamente v\u00e1rias m\u00e9tricas de teste, como o local de teste, velocidade de conex\u00e3o, dispositivo e muito mais. Esse \u00e9 o principal benef\u00edcio de utiliz\u00e1-lo em rela\u00e7\u00e3o a outras ferramentas – ele lhe d\u00e1 mais op\u00e7\u00f5es para configurar o teste.<\/p>\n Veja aqui como fazer um teste:<\/p>\n Na p\u00e1gina de resultados, voc\u00ea ver\u00e1 os dados da LCP, com toneladas de outras m\u00e9tricas de desempenho (incluindo uma an\u00e1lise da cascata).<\/p>\n Se voc\u00ea quer melhorar o Largest Contentful Paint, pode ser realmente \u00fatil saber exatamente qual elemento o Google est\u00e1 usando para calcular o seu tempo de LCP.<\/p>\n Por exemplo, se voc\u00ea sabe que o Google est\u00e1 usando sua imagem de her\u00f3i como o elemento LCP em sua p\u00e1gina inicial, voc\u00ea sabe que precisa encontrar maneiras de servir essa imagem de her\u00f3i o mais r\u00e1pido poss\u00edvel se voc\u00ea quiser melhorar o tempo de LCP da sua p\u00e1gina inicial.<\/p>\n Como mencionamos anteriormente, voc\u00ea pode encontrar seu Largest Contentful Paint usando PageSpeed Insights ou Ferramentas para Desenvolvedores do Chrome.<\/p>\n Certifique-se de verificar os resultados tanto no celular quanto no desktop, pois seu elemento LCP pode diferir em diferentes dispositivos.<\/strong><\/p>\n Agora que voc\u00ea sabe tudo sobre a Largest Contentful Paint, vamos entrar em algumas dicas acion\u00e1veis para melhorar o Largest Contentful Paint no WordPress.<\/p>\n Embora nos concentremos no WordPress para estas dicas, todas as dicas s\u00e3o universais e se aplicam a outros tipos de sites.<\/p>\n O cache<\/a> 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.<\/p>\n Se voc\u00ea est\u00e1 hospedando seu site WordPress com Kinsta, n\u00e3o \u00e9 necess\u00e1rio configurar o cache manualmente, pois a Kinsta implementa automaticamente o caching otimizado para voc\u00ea<\/a>.<\/p>\n No entanto, se voc\u00ea hospedar em outro lugar, poder\u00e1 habilitar o cache em seu site usando um plugin gratuito, como o WP Super Cache<\/a>, ou um plugin pago, como o WP Rocket<\/a>.<\/p>\n Para obter mais op\u00e7\u00f5es, confira nosso artigo com os melhores plugins de cache de WordPress<\/a>.<\/p>\n Embora todas as t\u00e1ticas desta lista possam ajud\u00e1-lo a melhorar o seu tempo de LCP, n\u00e3o h\u00e1 nada que se possa fazer:<\/p>\n Se voc\u00ea usa uma hospedagem de WordPress lenta e n\u00e3o otimizada<\/a>, seus tempos de LCP ser\u00e3o sempre limitados pela qualidade do seu host.<\/p>\n Voc\u00ea pode conseguir tornar as coisas um pouco melhores, mas voc\u00ea sempre ter\u00e1 dificuldades para alcan\u00e7ar tempos de 2,5 segundos de LCP se o seu provedor de hospedagem de sites for lento.<\/p>\n Se voc\u00ea quer a maneira mais f\u00e1cil de melhorar seu Largest Contentful Paint, voc\u00ea pode migrar seu site para Kinsta<\/a>. Kinsta n\u00e3o s\u00f3 oferece uma infraestrutura de hospedagem com desempenho otimizado<\/a>, mas tamb\u00e9m temos recursos integrados para lidar com muitas outras otimiza\u00e7\u00f5es desta lista.<\/p>\n Isso significa que voc\u00ea pode se concentrar no crescimento do seu site ao inv\u00e9s de brincar com a otimiza\u00e7\u00e3o do Largest Contentful Paint.<\/p>\n Se voc\u00ea estiver interessado, Kinsta migrar\u00e1 ilimitadamente sites de qualquer provedor de hospedagem de sites gratuitamente<\/strong> – saiba mais sobre migra\u00e7\u00e3o gratuita aqui<\/a>.<\/p>\n Se voc\u00ea ainda estiver na cerca – tente o resto das dicas desta lista primeiro. Mas se voc\u00ea ainda estiver lutando ap\u00f3s fazer tudo nesta lista, voc\u00ea pode precisar apenas de uma hospedagem melhor.<\/p>\n Sem um CDN, todos os visitantes do seu site precisam fazer o download de uma p\u00e1gina HTML e ativos est\u00e1ticos do seu servidor de hospedagem.<\/p>\n Se seus visitantes est\u00e3o localizados perto do seu servidor, isso normalmente n\u00e3o \u00e9 um problema. Mas se seus visitantes est\u00e3o espalhados pelo mundo, isso pode atrasar seu site devido \u00e0 dist\u00e2ncia f\u00edsica entre um visitante e o servidor do seu site.<\/p>\n Com um CDN, voc\u00ea pode distribuir os ativos est\u00e1ticos do seu site (ou mesmo as p\u00e1ginas HTML acabadas do seu site) para a rede global da CDN. Dessa forma, os visitantes podem baixar arquivos do local mais pr\u00f3ximo do CDN, o que \u00e9 muito mais r\u00e1pido<\/a>.<\/p>\n Se voc\u00ea est\u00e1 hospedando com Kinsta<\/a>, recomendamos usar o recurso Edge Caching da Kinsta<\/a>\u00a0para obter os melhores resultados.<\/p>\n O recurso de Edge Caching da Kinsta funciona atrav\u00e9s do cache de p\u00e1ginas HTML completas e ativos est\u00e1ticos do seu site para a rede global do Cloudflare<\/a>\u00a0(ao inv\u00e9s de apenas cachear ativos est\u00e1ticos como a maioria das solu\u00e7\u00f5es CDN<\/em>).<\/p>\n Isto significa que os visitantes do seu site podem baixar a p\u00e1gina completa do local mais pr\u00f3ximo, acelerando o tempo de resposta do servidor e<\/em> quanto tempo leva o seu recurso de LCP para carregar.<\/p>\n Para habilitar o Edge Caching Kinsta, v\u00e1 para a aba Edge Caching<\/strong> no painel do seu site no MyKinsta<\/a>.<\/p>\n Se voc\u00ea estiver hospedando em outro lugar, voc\u00ea pode configurar um CDN para os ativos est\u00e1ticos do seu site usando servi\u00e7os CDN populares como KeyCDN, Bunny, e outros.<\/p>\n JavaScript de bloqueio de renderiza\u00e7\u00e3o \u00e9 o JavaScript que carrega antes do seu elemento LCP principal mesmo que n\u00e3o seja necess\u00e1rio naquele momento.<\/p>\n Ao atrasar o carregamento do elemento LCP, ele ir\u00e1 diminuir os tempos de carregamento do seu LCP.<\/p>\n Para corrigir isso, existem algumas estrat\u00e9gias que voc\u00ea pode implementar:<\/p>\n Para a maioria das pessoas, a maneira mais f\u00e1cil de implementar esta funcionalidade \u00e9 atrav\u00e9s de plugins como o Autoptimize<\/a> ou o WP Rocket<\/a>.<\/p>\n Para um guia completo sobre como fazer isso, n\u00f3s temos dois posts muito detalhados:<\/p>\n Assim como o JavaScript n\u00e3o otimizado pode retardar seu site, o CSS n\u00e3o otimizado tamb\u00e9m pode fazer o mesmo.<\/p>\n Essencialmente, voc\u00ea quer carregar o m\u00ednimo poss\u00edvel de CSS. E para o CSS que voc\u00ea precisa carregar, voc\u00ea quer carreg\u00e1-lo de uma maneira ideal. Normalmente, isso significa que voc\u00ea quer carregar CSS importantes mais cedo, enquanto atrasa CSS n\u00e3o cr\u00edticos at\u00e9 mais tarde no processo de carregamento.<\/p>\n Se voc\u00ea n\u00e3o \u00e9 um desenvolvedor, a maneira mais f\u00e1cil de conseguir isso \u00e9 usando plugins de otimiza\u00e7\u00e3o de desempenho como Perfmatters<\/a>, WP Rocket<\/a>, ou FlyingPress<\/a>.<\/p>\n Por exemplo, o WP Rocket oferece recursos integrados para remover CSS n\u00e3o utilizado p\u00e1gina por p\u00e1gina e servir CSS de uma maneira ideal.<\/p>\n Se voc\u00ea quer um olhar muito mais profundo sobre como fazer tudo isso, confira nosso guia completo sobre como otimizar o CSS<\/a>.<\/p>\n Al\u00e9m das t\u00e9cnicas de otimiza\u00e7\u00e3o de c\u00f3digo mencionadas acima, voc\u00ea tamb\u00e9m deve minificar o HTML, CSS e JavaScript do seu site. Basicamente, isso remove caracteres e espa\u00e7os em branco desnecess\u00e1rios do c\u00f3digo do site para reduzir seu tamanho.<\/p>\n Voc\u00ea pode usar um plugin gratuito como o Autoptimize para minificar o c\u00f3digo<\/a> ou um dos plugins premium mais completos, como Perfmatters, WP Rocket ou FlyingPress.<\/p>\n Ou, confira nosso tutorial completo de minifica\u00e7\u00e3o de c\u00f3digo<\/a> para saber mais. Enquanto o tutorial foca no JavaScript, voc\u00ea pode usar os mesmos m\u00e9todos e plugins para minificar outros c\u00f3digos tamb\u00e9m.<\/p>\n A compress\u00e3o ao n\u00edvel de servidor permite que voc\u00ea diminua o tamanho dos arquivos do seu site usando tecnologias como Gzip ou Brotli<\/a>.<\/p>\n Por exemplo, a compress\u00e3o que usamos para o site Kinsta reduziu o tamanho do arquivo da p\u00e1gina inicial da Kinsta em 85,82%.<\/p>\n Se voc\u00ea estiver hospedando seu site WordPress na Kinsta, n\u00e3o \u00e9 necess\u00e1rio se preocupar com isso porque a Kinsta permite automaticamente a compress\u00e3o Brotli para todos os sites.<\/p>\n No entanto, se o seu site estiver hospedado em outro lugar, voc\u00ea pode verificar se o Gzip ou o Brotli est\u00e3o habilitados usando a ferramenta gratuita GiftOfSpeed<\/a>.<\/p>\n Se a compress\u00e3o n\u00e3o estiver habilitada, voc\u00ea pode seguir nosso guia sobre como habilitar a compress\u00e3o Gzip<\/a>.<\/p>\n Se voc\u00ea estiver usando o Cloudflare para entregar o conte\u00fado do seu site, o Cloudflare tem uma configura\u00e7\u00e3o integrada para habilitar a compress\u00e3o Brotli.<\/p>\n Se o seu elemento LCP \u00e9 uma imagem, encontrar maneiras de reduzir o tamanho desse arquivo de imagem ir\u00e1 reduzir o tempo que o navegador do usu\u00e1rio leva para baixar a imagem (e assim acelerar o tempo do seu LCP).<\/p>\n Para reduzir o tamanho da imagem, voc\u00ea deve redimension\u00e1-la para as dimens\u00f5es em que est\u00e1 sendo realmente usada, comprimi-la usando compress\u00e3o com ou sem perda<\/a> e servi-la em um formato otimizado como o WebP<\/a>.<\/p>\n Essa abordagem \u00e9 geralmente considerada uma das melhores pr\u00e1ticas de otimiza\u00e7\u00e3o de desempenho<\/a> e n\u00e3o se aplica apenas \u00e0 Largest Contentful Paint.<\/em><\/p>\n Para uma vis\u00e3o mais abrangente, confira nosso guia detalhado de otimiza\u00e7\u00e3o de imagens para sites<\/a>.<\/p>\n E, al\u00e9m disso, se voc\u00ea hospedar seu site WordPress com Kinsta, n\u00e3o precisar\u00e1 se preocupar com isso, pois a plataforma oferece um recurso integrado para otimizar automaticamente as imagens do seu site<\/a> sem a necessidade de usar qualquer ferramenta de terceiros.<\/p>\n Veja aqui como habilitar este recurso:<\/p>\n Se o seu elemento LCP \u00e9 uma imagem, outra estrat\u00e9gia para melhorar o LCP \u00e9 pr\u00e9-carregar a imagem do Largest Contentful Paint. \u00c9 por isso que voc\u00ea pode ver uma recomenda\u00e7\u00e3o como “Preload Largest Contentful Paint image” em PageSpeed Insights.<\/p>\n Com o pr\u00e9-carregamento, voc\u00ea pode dizer ao navegador de um usu\u00e1rio para priorizar o download de certos recursos, tais como a imagem espec\u00edfica que \u00e9 o elemento LCP do seu site.<\/p>\n A maneira mais n\u00e3o t\u00e9cnica de pr\u00e9-carga de imagens LCP \u00e9 usar um plugin como o Perfmatters<\/a>, que oferece um recurso dedicado de Preload Critical Images<\/strong>. Tudo que voc\u00ea precisa fazer \u00e9 especificar quantas imagens pr\u00e9-carregar – recomendamos apenas come\u00e7ar com uma, j\u00e1 que pr\u00e9-carregar muitos ativos pode ter um efeito negativo.<\/p>\n H\u00e1 tamb\u00e9m alguns plugins gratuitos no WordPress.org para conseguir isso, como o plugin Preload Featured Images da WPZOOM<\/a>, bem como outros plugins premium, como o FlyingPress<\/a>.<\/p>\n Outra quest\u00e3o que pode desencadear a mensagem “Preload Largest Contentful Paint image” no PageSpeed Insights s\u00e3o problemas com o carregamento pregui\u00e7oso de imagens em seu site WordPress<\/a>.<\/p>\n Ou seja, isso tamb\u00e9m pode acionar um aviso de “Largest Contentful Paint image was lazily loaded” no PageSpeed Insights.<\/p>\n O carregamento lento permite que voc\u00ea acelere os tempos de carga inicial do seu site, aguardando para carregar determinados recursos (como imagens) at\u00e9 que um usu\u00e1rio comece a interagir com seu site.<\/p>\n Embora isso seja normalmente uma coisa boa, pode retardar os tempos de LCP se o seu site estiver tentando carregar lentamente a imagem que \u00e9 o elemento LCP. Por esse motivo, voc\u00ea desejar\u00e1 garantir que seu site n\u00e3o esteja carregando pregui\u00e7osamente nenhuma imagem vis\u00edvel na viewport inicial.<\/p>\n Se voc\u00ea estiver usando o recurso de carregamento lento do navegador nativo introduzido pelo WordPress no WordPress 5.5<\/a>, n\u00e3o dever\u00e1 ter esse problema, pois o WordPress j\u00e1 exclui automaticamente a primeira imagem no conte\u00fado a partir do WordPress 5.9<\/a>.<\/p>\n Se voc\u00ea deseja excluir mais do que a primeira imagem, pode usar a fun\u00e7\u00e3o wp_omit_loading_attr_threshold<\/a> (mas a maioria das pessoas n\u00e3o precisar\u00e1 fazer nada aqui).<\/em><\/p>\n No entanto, se voc\u00ea estiver usando um plugin de carregamento lento alimentado por JavaScript, talvez seja necess\u00e1rio configurar manualmente essa exclus\u00e3o nas configura\u00e7\u00f5es do plugin. Por exemplo, o plugin Perfmatters inclui uma op\u00e7\u00e3o para permitir que voc\u00ea exclua as primeiras “X” imagens do carregamento lento.<\/p>\n Se o seu plugin de carregamento pregui\u00e7oso n\u00e3o permitir que voc\u00ea configure este tipo de exclus\u00e3o, voc\u00ea pode mudar para um plugin diferente que o fa\u00e7a.<\/p>\n Por exemplo, o WP Rocket<\/a> exclui automaticamente todas as imagens acima da dobra, incluindo a LCP, do lazy loading, ajudando voc\u00ea a economizar tempo e evitando o trabalho de fazer isso manualmente. O plugin realiza a otimiza\u00e7\u00e3o por padr\u00e3o logo ap\u00f3s a ativa\u00e7\u00e3o, ent\u00e3o voc\u00ea n\u00e3o precisa marcar nenhuma op\u00e7\u00e3o.<\/p>\n Se o seu elemento LCP \u00e9 texto, o processo de carregamento da fonte do seu site pode atrasar o aparecimento do texto, o que diminuir\u00e1 o tempo do seu LCP.<\/p>\n Tipicamente, isto acontece quando se usa fontes personalizadas<\/a>. Se o seu site estiver configurado para esperar para renderizar qualquer texto at\u00e9 que a fonte personalizada tenha sido carregada, isto ir\u00e1 diminuir a velocidade se o arquivo de fonte personalizada levar muito tempo para ser carregado.<\/p>\n Para corrigir isso, voc\u00ea pode usar o Font-Display: Descritor opcional de CSS<\/a>.<\/p>\n Isso diz ao navegador para usar uma fonte fallback se a fonte personalizada n\u00e3o for carregada em uma pequena janela (geralmente em torno de 100ms ou menos).<\/p>\n Em linguagem simples, isto basicamente significa que o navegador deve dar \u00e0 fonte personalizada uma chance de carregar. Mas se a fonte personalizada n\u00e3o for carregada rapidamente o suficiente, o navegador deve apenas usar uma fonte do sistema fallback para evitar mais atrasos no conte\u00fado.<\/p>\n Alternativamente, voc\u00ea tamb\u00e9m pode usar o Font-Display: Swap, que carrega a fonte fallback imediatamente e depois “swaps” na fonte personalizada, uma vez que a fonte personalizada \u00e9 carregada. Entretanto, esta abordagem pode causar problemas com o Cumulative Layout Shift<\/a> se as fontes forem de tamanhos diferentes, ent\u00e3o voc\u00ea vai querer ter cuidado.<\/p>\n A menos que sua fonte personalizada seja absolutamente necess\u00e1ria para o design do seu site, usando o Font-Display: Opcional \u00e9 geralmente a melhor op\u00e7\u00e3o do ponto de vista do Core Web Vitals.<\/p>\n Se voc\u00ea est\u00e1 confort\u00e1vel usando CSS diretamente<\/a>, voc\u00ea pode editar manualmente a propriedade Font-Display na folha de estilo do seu Child Theme<\/a>.<\/p>\n Se voc\u00ea n\u00e3o quer usar CSS, voc\u00ea tamb\u00e9m pode encontrar plugins para ajud\u00e1-lo a fazer isso, embora a maioria deles esteja focada na otimiza\u00e7\u00e3o para o Google Fonts:<\/p>\n Se voc\u00ea est\u00e1 usando a Elementor para projetar seu site, a Elementor tamb\u00e9m inclui uma op\u00e7\u00e3o incorporada para permitir que voc\u00ea use isso para p\u00e1ginas que voc\u00ea cria com a Elementor:<\/p>\n Aprender como melhorar o Largest Contentful Paint \u00e9 importante para melhorar a experi\u00eancia do seu site e maximizar \u00e0 sua classifica\u00e7\u00e3o nos mecanismos de pesquisa.<\/p>\n H\u00e1 geralmente duas partes para melhorar o Largest Contentful Paint – acelerar o tempo de resposta do seu servidor e depois otimizar o c\u00f3digo do seu site para renderizar o elemento LCP o mais r\u00e1pido poss\u00edvel.<\/p>\n Se voc\u00ea n\u00e3o quer se preocupar com o tempo de resposta lento do servidor, voc\u00ea 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\u00e1pido poss\u00edvel.<\/p>\n Al\u00e9m disso, com o recurso de Edge Caching da Kinsta, voc\u00ea pode armazenar em cache as p\u00e1ginas do seu site na rede global do Cloudflare, o que significa que visitantes de todo o mundo, poder\u00e3o desfrutar de tempos de resposta do servidor mais r\u00e1pidos (e, consequentemente, tempos de LCP mais r\u00e1pidos).<\/p>\n Se voc\u00ea quiser saber mais, voc\u00ea pode conferir estas p\u00e1ginas para obter mais informa\u00e7\u00f5es sobre a hospedagem gerenciada de WordPress da Kinsta<\/a> ou a hospedagem gerenciada de WooCommerce da Kinsta<\/a>.<\/p>\n\n
Largest Contentful Paint vs First Contentful Paint<\/h3>\n
\n
Por que o Largest Contentful Paint do seu site \u00e9 importante?<\/h2>\n
\n
Experi\u00eancia do usu\u00e1rio<\/h3>\n
Otimiza\u00e7\u00e3o para mecanismos de pesquisa (SEO)<\/h3>\n
O que pode afetar o maior n\u00famero de pontua\u00e7\u00f5es do Largest Contentful Paint?<\/h2>\n
\n
\n
\n
Qual \u00e9 o tempo ideal para o Largest Contentful Paint?<\/h2>\n
![\"Tempos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/good-largest-contentful-paint-times-1024x253.jpg\")
Como medir o Largest Contentful Paint: Melhores ferramentas de teste de LCP<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
\n
![\"Tempos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-1024x682.jpg\")
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-2-1024x779.jpg\")
Ferramentas do Desenvolvedor Chrome<\/h3>\n
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-1-1024x694.jpg\")
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-2-1024x714.jpg\")
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-3-1024x861.jpg\")
Google Search Console<\/h3>\n
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-times-in-google-search-console-1024x860.jpg\")
WebPageTest<\/h3>\n
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/webpagetest-lcp-test-1-1024x727.jpg\")
Como encontrar o Largest Contentful Paint<\/h2>\n
Como melhorar o Largest Contentful Paint no WordPress (ou outras plataformas)<\/h2>\n
Configure o cache para melhorar o tempo de resposta do servidor<\/h3>\n
Atualize para hospedagem mais r\u00e1pida de WordPress<\/h3>\n
Use uma Rede de Entrega de Conte\u00fado (CDN)<\/h3>\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-edge-caching-1024x704.jpg\")
Evite JavaScript que bloqueia a renderiza\u00e7\u00e3o (Deferir ou Remover)<\/h3>\n
\n
\n
Evite o Render-Blocking CSS e Otimize a Entrega do CSS<\/h3>\n
Minifique o seu HTML, CSS, e JavaScript<\/h3>\n
Use compress\u00e3o de n\u00edvel de servidor (Gzip ou Brotli)<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/gzip-brotli-test-1024x624.jpg\")
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/cloudflare-brotli-compression-1024x865.jpg\")
Como comprimir e redimensionar imagens<\/h3>\n
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-image-optimization-feature-1024x845.jpg\")
Pr\u00e9-carregue o Largest Contentful Paint<\/h3>\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/preload-critical-images-1024x685.jpg\")
Verifique problemas de carregamento pregui\u00e7oso (lazy loading)<\/h3>\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/perfmatters-exclude-leading-images-1024x791.jpg\")
Otimize o carregamento de fontes com o Font-Display: Opcional<\/h3>\n
\n
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/elementor-font-display-1024x795.jpg\")
Resumo<\/h2>\n