O que \u00e9 First Contentful Paint (FCP)?<\/h2>\n
First Contentful Paint, geralmente abreviado como FCP, \u00e9 uma m\u00e9trica de desempenho focada na experi\u00eancia do usu\u00e1rio que mede o tempo necess\u00e1rio para que o primeiro item da p\u00e1gina fique vis\u00edvel na tela do usu\u00e1rio.<\/p>\n
O FCP \u00e9 uma m\u00e9trica importante porque afeta o desempenho percebido<\/em>. Quando um visitante acessa seu site pela primeira vez, o navegador exibe uma tela em branco, o que n\u00e3o \u00e9 uma boa experi\u00eancia para os visitantes.<\/p>\n Quando o conte\u00fado come\u00e7a a ser carregado, o visitante pelo menos sente que “algo” est\u00e1 acontecendo e que o conte\u00fado completo da p\u00e1gina ser\u00e1 carregado em breve. Assim, ter um tempo de FCP r\u00e1pido pode fazer com que o usu\u00e1rio sinta que seu site \u00e9 r\u00e1pido, mesmo que ainda demore um pouco mais para o restante do conte\u00fado carregar.<\/p>\n Por outro lado, ter um tempo de FCP lento \u00e9 frustrante para os usu\u00e1rios, pois mostra que a p\u00e1gina est\u00e1 demorando muito para carregar. N\u00e3o h\u00e1 nada pior do que ter visitantes olhando para suas telas em branco e at\u00e9 mesmo se perguntando se o seu site est\u00e1 funcionando.<\/p>\n O LCP (Largest Contentful Paint)<\/a> \u00e9 outra m\u00e9trica popular focada na experi\u00eancia do usu\u00e1rio que funciona de forma semelhante ao First Contentful Paint.<\/p>\n Como as m\u00e9tricas s\u00e3o muito semelhantes, pode ser dif\u00edcil entender as diferen\u00e7as entre o First Contentful Paint e o Largest Contentful Paint.<\/p>\n Esta \u00e9 a diferen\u00e7a b\u00e1sica entre eles:<\/p>\n Devido a essa diferen\u00e7a, o tempo de FCP da sua p\u00e1gina deve ser sempre pelo menos um pouco menor do que o tempo de LCP da p\u00e1gina. Pela defini\u00e7\u00e3o das m\u00e9tricas, \u00e9 imposs\u00edvel que o tempo de LCP seja mais r\u00e1pido que o tempo de FCP. Embora eles possam ser tecnicamente iguais caso o “primeiro” elemento a ser carregado seja o mesmo que o elemento “principal”, isso n\u00e3o acontecer\u00e1 na maioria das p\u00e1ginas<\/em>.<\/p>\n Para ilustrar isso, aqui est\u00e1 uma linha do tempo em formato de tira de filme de uma an\u00e1lise do WebPageTest que realizamos na p\u00e1gina inicial da Kinsta.<\/p>\n O Google recomenda que voc\u00ea busque um tempo de First Contentful Paint de 1,8 segundo ou menos nas p\u00e1ginas do seu site.<\/p>\n O Google considera que tempos de FCP entre 1,8 e 3,0 segundos “Precisam melhorar”, enquanto os tempos de FCP acima de 3,0 segundos s\u00e3o “Ruins”.<\/p>\n A maneira mais f\u00e1cil de medir o tempo de First Contentful Paint de uma p\u00e1gina em seu site \u00e9 usar a ferramenta PageSpeed Insights do Google<\/a>, embora tamb\u00e9m existam outras ferramentas que voc\u00ea pode usar<\/a>.<\/p>\n O bom do PageSpeed Insights \u00e9 que fornecer\u00e1 a voc\u00ea tanto resultados de testes simulados quanto dados de FCP de usu\u00e1rios reais (se o seu site tiver tr\u00e1fego suficiente para ser inclu\u00eddo no relat\u00f3rio de experi\u00eancia do usu\u00e1rio do Chrome).<\/em><\/p>\n Ele tamb\u00e9m abrange o desempenho em computadores e dispositivos m\u00f3veis, pois o tempo de FCP da sua p\u00e1gina varia conforme o dispositivo do usu\u00e1rio e a velocidade da conex\u00e3o.<\/p>\n Veja como voc\u00ea pode testar uma p\u00e1gina:<\/p>\n Ap\u00f3s uma breve espera, voc\u00ea dever\u00e1 ver os resultados.<\/p>\n Se o seu site tiver tr\u00e1fego suficiente para ser inclu\u00eddo no relat\u00f3rio Chrome User Experience, voc\u00ea ver\u00e1 dois<\/em> tempos de FCP diferentes:<\/p>\n Voc\u00ea tamb\u00e9m pode alternar entre os resultados para dispositivos m\u00f3veis e computadores usando as abas na parte superior.<\/p>\n Para testar outras p\u00e1ginas do seu site, voc\u00ea pode repetir o processo.<\/p>\n Os tempos de FCP variam dependendo da p\u00e1gina, portanto, recomendamos que voc\u00ea teste v\u00e1rias p\u00e1ginas para ter uma boa no\u00e7\u00e3o do desempenho do seu site.<\/p>\n Por exemplo, voc\u00ea pode testar a p\u00e1gina inicial, a p\u00e1gina de listagem do blog, um \u00fanico artigo do blog, e assim por diante. E, novamente, certifique-se de examinar os dados de dispositivos m\u00f3veis e de computadores.<\/p>\n Embora o PageSpeed Insights ofere\u00e7a uma das maneiras mais simples de ver os tempos de FCP reais e simulados do seu site, h\u00e1 tamb\u00e9m outras ferramentas de teste de desempenho<\/a> que voc\u00ea pode usar como complemento ou substituto do PageSpeed Insights.<\/p>\n Aqui est\u00e3o alguns bons lugares pra voc\u00ea come\u00e7ar:<\/p>\n Em um n\u00edvel elevado, h\u00e1 dois conjuntos de problemas que podem tornar o FCP mais lento:<\/p>\n Dependendo do seu site, voc\u00ea pode ter problemas em apenas uma dessas \u00e1reas ou em ambas.<\/p>\n Agora que voc\u00ea sabe mais sobre o que \u00e9 o First Contentful Paint e por que ele \u00e9 importante, vamos ver algumas dicas pr\u00e1ticas que podem ser implementadas para melhorar os tempos do seu site.<\/p>\n O bom de implementar essas dicas \u00e9 que elas melhorar\u00e3o todas<\/em> as m\u00e9tricas de desempenho do seu site<\/a>, n\u00e3o apenas o FCP.<\/p>\n Aqui est\u00e1 um resumo r\u00e1pido da lista \u2014 vamos analis\u00e1-las em detalhes a seguir:<\/p>\n H\u00e1 um fato inevit\u00e1vel quando se trata de FCP:<\/p>\n Se a hospedagem subjacente do seu site for lenta, o FCP continuar\u00e1 lento, mesmo que voc\u00ea tenha um site perfeitamente otimizado.<\/p>\n A implementa\u00e7\u00e3o das outras dicas desta lista far\u00e1 com que o FCP do seu site melhore<\/em>, mas o desempenho do site sempre ser\u00e1 limitado pela qualidade da hospedagem.<\/p>\n Portanto, voc\u00ea pode ir em frente e implementar as outras dicas desta lista primeiro. Mas se ainda tiver problemas com tempos de FCP lentos depois de fazer todo o resto, talvez seja necess\u00e1rio mudar para uma hospedagem mais r\u00e1pida<\/a>.<\/p>\n Se voc\u00ea n\u00e3o tiver certeza por onde come\u00e7ar, a hospedagem gerenciada de WordPress na Kinsta<\/a> \u00e9 uma \u00f3tima op\u00e7\u00e3o.<\/p>\n N\u00e3o apenas a infraestrutura subjacente \u00e9 otimizada para o desempenho, mas a Kinsta tamb\u00e9m pode ajudar voc\u00ea a implementar automaticamente muitas das outras estrat\u00e9gias desta lista, incluindo cache, rede de distribui\u00e7\u00e3o de conte\u00fado (CDN), DNS otimizado, imagens otimizadas e muito mais.<\/p>\n Se voc\u00ea criou seu site com WordPress, ele precisar\u00e1 processar dinamicamente o c\u00f3digo do lado do servidor para cada visitante (por padr\u00e3o).<\/p>\n Quando uma pessoa visita sua p\u00e1gina, o seu servidor de hospedagem precisa executar o PHP<\/a> do WordPress e consultar o banco de dados do seu site<\/a> para gerar o documento HTML finalizado a ser entregue ao navegador do usu\u00e1rio.<\/p>\n Isso leva tempo, especialmente em uma hospedagem de baixa capacidade, o que pode ter um grande efeito nos tempos de FCP do seu site.<\/p>\n Com o cache de p\u00e1gina<\/a>, voc\u00ea pode “armazenar em cache” a vers\u00e3o HTML finalizada de cada p\u00e1gina. Em vez de precisar processar o c\u00f3digo do lado do servidor para cada visita, seu servidor responder\u00e1 imediatamente com o HTML finalizado em seu cache.<\/p>\n Se voc\u00ea usar a hospedagem Kinsta, ela implementar\u00e1 automaticamente o cache de p\u00e1gina para voc\u00ea por meio da funcionalidade Edge Caching.<\/p>\n O diferencial da abordagem Edge Caching da Kinsta<\/a> \u00e9 que ela pode servir as p\u00e1ginas armazenadas em cache a partir da rede global do Cloudflare<\/a>. Discutiremos o que \u00e9 uma rede de entrega de conte\u00fado na pr\u00f3xima se\u00e7\u00e3o, mas a vantagem de alto n\u00edvel \u00e9 que ela permite que voc\u00ea obtenha tempos de carregamento global muito r\u00e1pidos<\/a>.<\/p>\n Se estiver hospedando em outro lugar, voc\u00ea pode verificar se o seu provedor de hospedagem tem um recurso de cache no n\u00edvel do servidor ou usar um dos muitos plugins de cache do WordPress, como o WP Rocket e o FlyingPress.<\/p>\n Um CDN (rede de distribui\u00e7\u00e3o de conte\u00fado)<\/a> \u00e9 uma rede global de servidores que armazenam uma c\u00f3pia de parte ou de todo o conte\u00fado\/arquivos do seu site.<\/p>\n Quando uma pessoa visita o seu site, o CDN automaticamente fornece os arquivos do site a partir do local que est\u00e1 fisicamente mais pr\u00f3ximo do visitante.<\/p>\n Como a dist\u00e2ncia f\u00edsica ainda desempenha um papel nos tempos de carregamento (ainda n\u00e3o superamos a velocidade da luz!<\/em>), o navegador do visitante receber\u00e1 os arquivos do seu site mais rapidamente<\/a>, melhorando o tempo de FCP.<\/p>\n Se voc\u00ea usar a hospedagem Kinsta, a Kinsta implementar\u00e1 automaticamente um CDN gratuito alimentado pelo Cloudflare<\/a> para todas as p\u00e1ginas do seu site, o que fornece o mais r\u00e1pido desempenho global.<\/p>\n Se estiver hospedando em outro lugar, voc\u00ea mesmo pode implementar um CDN usando provedores como Cloudflare, Amazon CloudFront, Fastly e outros.<\/p>\n Antes que o navegador de um usu\u00e1rio possa se conectar ao servidor do seu site, ele precisa primeiro usar o DNS (Sistema de Nomes de Dom\u00ednio)<\/a> para localizar o servidor web real associado ao nome de dom\u00ednio do seu site.<\/p>\n O provedor de DNS que voc\u00ea configurou para usar o seu nome de dom\u00ednio afetar\u00e1 o tempo que esse processo leva, o que, consequentemente, afetar\u00e1 o FCP do seu site.<\/p>\n Por exemplo, segundo o DNSPerf<\/a>, a diferen\u00e7a entre o provedor mais r\u00e1pido e o mais lento \u00e9 de mais de 130 ms, o que \u00e9 bastante significativo.<\/p>\n Se voc\u00ea hospeda com a Kinsta<\/a>, j\u00e1 obt\u00e9m acesso ao DNS premium com tecnologia Amazon Route53<\/a> ao usar os servidores de nomes<\/a> da Kinsta.<\/p>\n Se voc\u00ea estiver hospedando em outro lugar, o Cloudflare oferece um dos melhores servi\u00e7os de DNS gratuitos.<\/p>\n Agora que voc\u00ea j\u00e1 corrigiu os problemas de tempo de resposta do servidor, \u00e9 hora de otimizar o c\u00f3digo do seu site, come\u00e7ando pelo CSS.<\/p>\n O CSS controla o design e o estilo<\/a> dos elementos da sua p\u00e1gina. Embora seja uma parte essencial de qualquer site<\/a>, seu CSS pode estar diminuindo o tempo de FCP se estiver sendo carregado de forma n\u00e3o otimizada e\/ou se voc\u00ea estiver carregando CSS em p\u00e1ginas onde n\u00e3o \u00e9 necess\u00e1rio.<\/p>\n Temos um artigo inteiro sobre como otimizar o CSS<\/a>, mas vamos examinar as t\u00e1ticas mais importantes para acelerar o FCP.<\/p>\n Em primeiro lugar, voc\u00ea deve remover qualquer CSS n\u00e3o utilizado das p\u00e1ginas em que n\u00e3o \u00e9 necess\u00e1rio.<\/p>\n Uma maneira de fazer isso \u00e9 o m\u00e9todo manual. Uma ferramenta como o PurifyCSS<\/a> pode verificar se h\u00e1 CSS n\u00e3o utilizado em suas p\u00e1ginas, e ent\u00e3o voc\u00ea pode remover manualmente esse c\u00f3digo. O PageSpeed Insights tamb\u00e9m sinalizar\u00e1 o CSS n\u00e3o utilizado na se\u00e7\u00e3o “Reduce unused CSS” dos seus diagn\u00f3sticos.<\/p>\n Entretanto, se voc\u00ea estiver usando o WordPress, h\u00e1 alguns plugins \u00fateis que podem automatizar todo o processo, o que \u00e9 muito mais f\u00e1cil (especialmente para quem n\u00e3o \u00e9 desenvolvedor). Algumas boas op\u00e7\u00f5es a considerar s\u00e3o WP Rocket<\/a>, FlyingPress<\/a> e Perfmatters<\/a>.<\/p>\n Todos esses plugins s\u00e3o ferramentas premium. Mas acreditamos que o investimento vale a pena, pois eles tamb\u00e9m podem ajudar voc\u00ea a implementar muitas das outras dicas desta lista.<\/p>\n Por padr\u00e3o, seu site provavelmente esperar\u00e1 at\u00e9 que todo<\/em> o c\u00f3digo CSS seja carregado antes de come\u00e7ar a renderizar o conte\u00fado acima da dobra. Contudo, isso n\u00e3o \u00e9 o ideal do ponto de vista da experi\u00eancia do usu\u00e1rio, porque voc\u00ea realmente s\u00f3 precisa do CSS necess\u00e1rio para o conte\u00fado acima da dobra \u2014 todo o resto pode esperar at\u00e9 mais tarde.<\/p>\n O CSS para o conte\u00fado acima da dobra de uma p\u00e1gina \u00e9 chamado de CSS cr\u00edtico<\/strong>.<\/p>\n Para acelerar o FCP da p\u00e1gina e outras m\u00e9tricas de desempenho, voc\u00ea pode colocar esse CSS cr\u00edtico diretamente na se\u00e7\u00e3o Para usu\u00e1rios mais avan\u00e7ados, voc\u00ea pode gerar manualmente o CSS cr\u00edtico de uma p\u00e1gina usando uma ferramenta como esta<\/a>.<\/p>\n Mas, novamente, no WordPress, voc\u00ea pode automatizar esse processo para cada p\u00e1gina individual do seu site usando o FlyingPress ou o WP Rocket.<\/p>\n Ap\u00f3s colocar inline o CSS cr\u00edtico em uma p\u00e1gina, voc\u00ea pode adiar com seguran\u00e7a o carregamento do restante do CSS da p\u00e1gina at\u00e9 mais tarde no processo de carregamento (depois que o conte\u00fado acima da dobra j\u00e1 tiver sido renderizado<\/em>).<\/p>\n Tanto o WP Rocket quanto o FlyingPress far\u00e3o isso automaticamente para voc\u00ea como parte da sua funcionalidade cr\u00edtica de CSS, o que \u00e9 outro motivo para considerar us\u00e1-los.<\/p>\n Por fim, outra maneira de aumentar um pouco<\/em> o desempenho do c\u00f3digo CSS do seu site \u00e9 minific\u00e1-lo. Quando voc\u00ea minifica o c\u00f3digo CSS, ele \u00e9 reduzido. Ao minificar o c\u00f3digo CSS, voc\u00ea remove caracteres e espa\u00e7os em branco desnecess\u00e1rios, o que pode aumentar ainda mais a economia de tamanho.<\/p>\n Plugins como o WP Rocket e o FlyingPress podem fazer isso pra voc\u00ea. Voc\u00ea tamb\u00e9m pode encontrar plugins espec\u00edficos de minifica\u00e7\u00e3o, como o Fast Velocity Minify<\/a>.<\/p>\n Al\u00e9m do CSS, o JavaScript<\/a> do seu site \u00e9 outra \u00e1rea \u00e0 qual voc\u00ea deve dedicar algum tempo para otimizar o c\u00f3digo do site.<\/p>\n Assim como no CSS, h\u00e1 v\u00e1rias estrat\u00e9gias diferentes que voc\u00ea pode implementar para reduzir o impacto do JavaScript nos tempos de FCP do seu site.<\/p>\n Se voc\u00ea utilizar o JavaScript para habilitar funcionalidades importantes acima da dobra, tais como o menu de navega\u00e7\u00e3o do seu site<\/a> (isso \u00e9 especialmente comum na vers\u00e3o para dispositivos m\u00f3veis de um site, pois muitos dos seus menus dependem de JavaScript),<\/em> isso poder\u00e1 reduzir o tempo de FCP, pois os navegadores dos usu\u00e1rios precisam carregar o JavaScript pesado antes de come\u00e7ar a renderizar a p\u00e1gina.<\/p>\n Se estiver usando WordPress, escolher um tema com desempenho otimizado<\/a> deve ajud\u00e1-lo a evitar isso, pois bons desenvolvedores evitar\u00e3o depender do JavaScript para essas fun\u00e7\u00f5es.<\/p>\n Voc\u00ea tamb\u00e9m pode tentar evitar o uso de controles deslizantes<\/a> e outros elementos acionados por JavaScript em \u00e1reas acima da dobra.<\/p>\n Embora voc\u00ea queira dar uma \u00eanfase especial em reduzir o uso de JavaScript em elementos acima da dobra, geralmente tamb\u00e9m \u00e9 uma boa ideia remover o m\u00e1ximo poss\u00edvel de JavaScript desnecess\u00e1rio\u00a0de cada p\u00e1gina.<\/p>\n Para come\u00e7ar, voc\u00ea deve excluir todos os plugins de WordPress<\/a> que n\u00e3o melhoram significativamente o seu site, pois muitos desses plugins dependem de JavaScript para sua funcionalidade.<\/p>\n Outra op\u00e7\u00e3o \u00e9 usar um plugin de gerenciador de scripts como o Asset CleanUp<\/a> ou o Perfmatters<\/a> para desativar o JavaScript p\u00e1gina por p\u00e1gina, o que permite desativar os scripts nas p\u00e1ginas em que eles n\u00e3o s\u00e3o necess\u00e1rios, mas ainda deix\u00e1-los ativados em outras p\u00e1ginas.<\/p>\n Tamb\u00e9m temos um guia mais t\u00e9cnico sobre como desativar plugins<\/a> p\u00e1gina por p\u00e1gina.<\/p>\n N\u00e3o importa o que aconte\u00e7a, voc\u00ea provavelmente ainda precisar\u00e1 carregar pelo menos algum JavaScript na sua p\u00e1gina. Para garantir que esse JavaScript n\u00e3o interfira no carregamento do conte\u00fado acima da dobra, h\u00e1 duas estrat\u00e9gias comuns que voc\u00ea pode implementar:<\/p>\n Voc\u00ea pode implementar ambas as t\u00e1ticas no WordPress por meio de plugins como o WP Rocket ou o FlyingPress.<\/p>\n Tamb\u00e9m temos guias sobre como adiar a an\u00e1lise de JavaScript<\/a> e como eliminar recursos de bloqueio de renderiza\u00e7\u00e3o<\/a>.<\/p>\n Por fim, voc\u00ea deve reduzir o JavaScript restante do seu site<\/a> para obter alguns pequenos benef\u00edcios adicionais de desempenho com a remo\u00e7\u00e3o de caracteres desnecess\u00e1rios.<\/p>\n Assim como na redu\u00e7\u00e3o do CSS, a maioria dos plugins de cache e desempenho (incluindo WP Rocket e FlyingPress) pode fazer isso pra voc\u00ea. Voc\u00ea tamb\u00e9m pode usar um plugin espec\u00edfico, como o Fast Velocity Minify.<\/p>\n Com o lazy loading (carregamento pregui\u00e7oso)<\/a>\u00a0de imagens, voc\u00ea pode atrasar o carregamento das imagens do seu site<\/a> at\u00e9 que sejam necess\u00e1rias (por exemplo, quando um usu\u00e1rio rola a p\u00e1gina pra baixo).<\/p>\n Normalmente, o lazy loading \u00e9 bom para o desempenho se voc\u00ea estiver carregando imagens que est\u00e3o abaixo da<\/em> dobra. No entanto, o lazy loading de imagens acima da<\/em> dobra pode, na verdade, afetar negativamente os tempos de FCP e LCP do seu site.<\/p>\n Portanto, voc\u00ea deve certificar-se de excluir todas as imagens acima da dobra do lazy loading.<\/p>\n Se voc\u00ea estiver usando o recurso padr\u00e3o de lazy loading do WordPress, ele deve<\/em> fazer isso automaticamente. Mas se tiver problemas, ajuste manualmente esse comportamento usando a fun\u00e7\u00e3o wp_omit_loading_attr_threshold<\/a>.<\/p>\n Se voc\u00ea estiver usando um plugin para lazy loading, espera-se que o plugin ofere\u00e7a uma op\u00e7\u00e3o para fazer isso. Por exemplo, o Perfmatters permite que voc\u00ea exclua automaticamente um determinado n\u00famero de imagens principais e exclua manualmente imagens espec\u00edficas, se necess\u00e1rio.<\/p>\n Se o seu plugin n\u00e3o oferece esse recurso, considere a possibilidade de mudar para um que ofere\u00e7a.<\/p>\n Para garantir que o conte\u00fado de texto fique vis\u00edvel durante o carregamento (o que pode afetar os tempos de FCP e a experi\u00eancia do usu\u00e1rio), \u00e9 importante otimizar tamb\u00e9m a forma como as fontes s\u00e3o carregadas se voc\u00ea estiver usando fontes personalizadas<\/a> (como fontes <\/em>encontradas no Google Fonts<\/a><\/em>).<\/em><\/p>\n Para evitar problemas, voc\u00ea pode usar os descritores CSS Font-Display: <\/strong>Optional<\/strong> ou Font-Display: Swap<\/strong><\/a>.<\/p>\n Com Font-Display: Optional<\/strong>, voc\u00ea pode informar aos navegadores dos usu\u00e1rios que devem usar uma fonte alternativa se a fonte personalizada n\u00e3o for carregada r\u00e1pido o suficiente.<\/p>\n Se voc\u00ea n\u00e3o quiser adicionar isso usando seu pr\u00f3prio CSS, h\u00e1 v\u00e1rios plugins de WordPress que podem otimizar o carregamento de fontes pra voc\u00ea, incluindo WP Rocket, FlyingPress e Perfmatters.<\/p>\n Segundo a\u00a0<\/a>Mozilla<\/a>, o Document Object Model (DOM) \u00e9 “a representa\u00e7\u00e3o de dados dos objetos que comp\u00f5em a estrutura e o conte\u00fado de um documento na web”.<\/p>\n Embora os visitantes humanos n\u00e3o interajam diretamente com o DOM, o DOM de uma p\u00e1gina \u00e9 importante para ajudar os navegadores web a entender e exibir o conte\u00fado de uma p\u00e1gina.<\/p>\n Como regra geral, ter um DOM maior e mais complexo levar\u00e1 a tempos de FCP mais lentos do que uma estrutura DOM menor e otimizada.<\/p>\n Aqui est\u00e3o algumas dicas para reduzir o tamanho do DOM do seu site:<\/p>\n Os redirecionamentos permitem enviar tr\u00e1fego de uma URL para outra URL antes que a p\u00e1gina seja carregada. Por exemplo, voc\u00ea pode redirecionar algu\u00e9m que visita a vers\u00e3o HTTP<\/strong> do seu site para a vers\u00e3o HTTPS<\/strong>.<\/p>\n N\u00e3o obstante, como o redirecionamento precisa ser conclu\u00eddo antes que o navegador do usu\u00e1rio possa carregar a p\u00e1gina, cada redirecionamento normalmente adiciona centenas de milissegundos de atraso ao tempo de FCP do seu site (e outras m\u00e9tricas de desempenho).<\/p>\n Aqui est\u00e3o algumas dicas para evitar redirecionamentos desnecess\u00e1rios:<\/p>\n Para encontrar problemas de redirecionamento, voc\u00ea pode usar a ferramenta gratuita de verifica\u00e7\u00e3o de redirecionamento Kinsta<\/a>. Tamb\u00e9m temos um artigo sobre pr\u00e1ticas recomendadas de redirecionamento em WordPress<\/a>.<\/p>\n Por exemplo, aqui voc\u00ea pode ver que o verificador de redirecionamento da Kinsta detectou v\u00e1rios redirecionamentos quando inserimos http:\/\/www.wordpress.org como URL:<\/p>\nFirst Contentful Paint vs Largest Contentful Paint<\/h3>\n
\n
\n
![\"A](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/first-contentful-paint-vs-largest-contentful-paint-example-1024x450.jpg\")
O que \u00e9 um bom tempo de First Contentful Paint?<\/h2>\n
![\"Diretrizes](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/good-fcp-time-1024x269.jpg\")
Como medir o tempo do First Contentful Paint de uma p\u00e1gina<\/h2>\n
\n
\n
![\"Tempos](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/fcp-time-pagespeed-insights-683x1024.jpg\")
Outras maneiras de medir os tempos de First Contentful Paint<\/h3>\n
\n
O que pode afetar os tempos de FCP do seu site?<\/h2>\n
\n
Como acelerar o First Contentful Paint: 10 dicas que funcionam<\/h2>\n
1. Mude para uma hospedagem mais r\u00e1pida<\/h3>\n
2. Use o cache de p\u00e1gina (de prefer\u00eancia no n\u00edvel do servidor)<\/h3>\n
![\"A](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/kinsta-page-caching-edge-1024x771.jpg\")
3. Implemente uma rede de distribui\u00e7\u00e3o de conte\u00fado (CDN)<\/h3>\n
![\"O](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/cloudflare-global-network-1024x645.jpg\")
4. Use um provedor de DNS mais r\u00e1pido<\/h3>\n
![\"Voc\u00ea](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/kinsta-dns-management-1024x663.jpg\")
5. Otimize o CSS do seu site<\/h3>\n
Remova o CSS n\u00e3o utilizado<\/h4>\n
![\"Como](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-remove-unused-css-1024x847.jpg\")
Coloque inline o CSS cr\u00edtico e adie o CSS n\u00e3o cr\u00edtico<\/h4>\n
<head><\/code> da p\u00e1gina (tamb\u00e9m conhecido como coloc\u00e1-lo <\/em>inline<\/em><\/strong>) em vez de carreg\u00e1-lo como parte de uma folha de estilo externa.<\/p>\n![\"Como](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-css-delivery-1024x705.jpg\")
Minifique o c\u00f3digo CSS<\/h4>\n
6. Otimize o JavaScript do seu site<\/h3>\n
N\u00e3o use elementos dependentes de JavaScript acima da dobra<\/h4>\n
Remova o JavaScript desnecess\u00e1rio<\/h4>\n
Elimine o JavaScript que bloqueia a renderiza\u00e7\u00e3o (adiando ou atrasando)<\/h4>\n
\n
![\"Como](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/wp-rocket-javascript-optimization-1024x986.jpg\")
Minifique o c\u00f3digo JavaScript<\/h4>\n
7. Desative o lazy loading para imagens acima da dobra<\/h3>\n
![\"Como](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/perfmatters-optimize-lazy-loading-1024x822.jpg\")
8. Otimize a entrega das fontes<\/h3>\n
![\"Como](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/flyingpress-optimize-fonts-1024x721.jpg\")
9. Tente reduzir o tamanho do DOM o m\u00e1ximo poss\u00edvel<\/h3>\n
\n
10. Evite redirecionamentos (especialmente redirecionamentos m\u00faltiplos)<\/h3>\n
\n
![\"V\u00e1rios](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/04\/kinsta-redirect-tool-1024x812.jpg\")