{"id":27707,"date":"2022-05-26T13:25:58","date_gmt":"2022-05-26T16:25:58","guid":{"rendered":"\/tutoriais\/?p=27707"},"modified":"2025-12-18T11:45:28","modified_gmt":"2025-12-18T14:45:28","slug":"core-web-vitals","status":"publish","type":"post","link":"\/br\/tutoriais\/core-web-vitals","title":{"rendered":"O que s\u00e3o core web vitals e como medi-los para melhorar seu site"},"content":{"rendered":"<p>O Core Web Vitals &eacute; um conjunto de m&eacute;tricas estabelecido pelo Google para medir a velocidade de carregamento, a interatividade e estabilidade visual de qualquer p&aacute;gina da web. Entre outros fatores, como seguran&ccedil;a e compatibilidade com dispositivos m&oacute;veis, os Core Web Vitals s&atilde;o um elemento essencial dos&nbsp;<a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/page-experience\" target=\"_blank\" rel=\"noopener\"><strong>sinais de experi&ecirc;ncia de p&aacute;gina<\/strong><\/a>&nbsp;do Google.&nbsp;<\/p><p>Como a experi&ecirc;ncia da p&aacute;gina faz parte do algoritmo de classifica&ccedil;&atilde;o da plataforma, otimizar seu site de acordo com essas m&eacute;tricas pode melhorar a visibilidade e o ranqueamento das suas p&aacute;ginas.<\/p><p>&Eacute; exatamente para isso que estamos aqui: se voc&ecirc; deseja chegar ao topo no Google, este guia vai te ajudar a entender o que s&atilde;o os Core Web Vitals, a import&acirc;ncia deles e como medir suas m&eacute;tricas. Vamos l&aacute;!<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-core-web-vitals\"><strong>O que &eacute; Core Web Vitals?<\/strong><\/h2><p><strong>Core Web Vitals (CWV)<\/strong>&nbsp;&eacute; um conjunto de m&eacute;tricas usadas para avaliar a usabilidade de uma p&aacute;gina da web. Essas m&eacute;tricas fazem parte de uma iniciativa maior do Google que tem como objetivo incentivar melhores experi&ecirc;ncias de navega&ccedil;&atilde;o e aumentar a satisfa&ccedil;&atilde;o dos usu&aacute;rios.<\/p><p>O Core Web Vitals &eacute; composto de tr&ecirc;s m&eacute;tricas:<\/p><ul class=\"wp-block-list\">\n<li><strong>Largest Contentful Paint (LCP)<\/strong>, representando o tempo de carregamento da p&aacute;gina.<\/li>\n\n\n\n<li><strong>Interaction to Next Paint (INP)<\/strong>, representando a responsividade.<\/li>\n\n\n\n<li><strong>Cumulative Layout Shift (CLS)<\/strong>, representando a estabilidade visual.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1018\" height=\"405\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/lcp-inp-cls.png\/public\" alt=\"principais m&eacute;tricas do core web vitals: LCP, INP e CLS\" class=\"wp-image-43417\" title=\"core-web-vitals-metricas\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/lcp-inp-cls.png\/w=1018,fit=scale-down 1018w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/lcp-inp-cls.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/lcp-inp-cls.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/lcp-inp-cls.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure><\/div><p>Cada uma dessas m&eacute;tricas tem uma faixa pr&eacute;-determinada que determina se a experi&ecirc;ncia na sua p&aacute;gina &eacute;&nbsp;<strong>Boa<\/strong>,&nbsp;<strong>Precisa de Melhorias<\/strong>, ou&nbsp;<strong>Ruim<\/strong>.<\/p><p>Para classificar o desempenho geral da sua p&aacute;gina na web, o Google aplica o m&eacute;todo do&nbsp;<a href=\"https:\/\/web.dev\/articles\/defining-core-web-vitals-thresholds\" target=\"_blank\" rel=\"noopener\"><strong>valor do 75&ordm; percentil<\/strong><\/a>. Em outras palavras, sua p&aacute;gina &eacute; considerada boa se&nbsp;<strong>pelo menos 75%&nbsp;<\/strong>das visualiza&ccedil;&otilde;es de p&aacute;gina atenderem ao limite&nbsp;<strong>Bom<\/strong> de cada Core Web Vital.<\/p><p>Por outro lado, se mais de&nbsp;<strong>25%<\/strong>&nbsp;das visualiza&ccedil;&otilde;es de p&aacute;gina atingirem o limite de&nbsp;<strong>Ruim<\/strong>, isso indica que sua p&aacute;gina precisa melhorar seu desempenho.<\/p><h3 class=\"wp-block-heading\"><strong>Por que os Core Web Vitals s&atilde;o importantes?<\/strong><\/h3><p>Para definir a posi&ccedil;&atilde;o de um site em uma determinada busca, o Google considera v&aacute;rios sinais de experi&ecirc;ncia da p&aacute;gina (<em>page experience<\/em>), incluindo seus Core Web Vitals.<\/p><p>Quanto melhores forem as pontua&ccedil;&otilde;es do Core Web Vitals do seu site, mais prov&aacute;vel que ele ocupe uma posi&ccedil;&atilde;o alta nas&nbsp;<strong>p&aacute;ginas de resultados dos motores de busca (SERPs)<\/strong>.<\/p><p>Mas, mais importante ainda, ter um site r&aacute;pido e responsivo mant&eacute;m os visitantes por mais tempo nos seus dom&iacute;nios. Isso porque, de acordo com pesquisas,&nbsp;<a href=\"https:\/\/www.webfx.com\/blog\/seo\/site-speed-statistics\/\" target=\"_blank\" rel=\"noopener\"><strong>40% dos usu&aacute;rios<\/strong><\/a>&nbsp;abandonam uma p&aacute;gina da web que demora mais de 3 segundos para carregar.<\/p><p>Ou seja: se voc&ecirc; conseguir convencer seus visitantes a permanecer nas suas p&aacute;ginas, tamb&eacute;m ter&aacute; mais oportunidades de convert&ecirc;-los em clientes.<\/p><h3 class=\"wp-block-heading\"><strong>Hist&oacute;rico do Core Web Vitals<\/strong><\/h3><p>As m&eacute;tricas do Core Web Vitals n&atilde;o s&atilde;o fixas: elas podem mudar ao longo do tempo com base nos feedbacks do usu&aacute;rio. Por exemplo, em mar&ccedil;o de 2024, a m&eacute;trica First Input Delay (FID) foi&nbsp;<a href=\"https:\/\/developers.google.com\/search\/blog\/2023\/05\/introducing-inp\" target=\"_blank\" rel=\"noopener\"><strong>substitu&iacute;da pela Interaction to Next Paint (INP)<\/strong><\/a>.<\/p><p>Cada m&eacute;trica do Core Web Vitals passa por v&aacute;rias etapas antes de se tornar est&aacute;vel:<\/p><ul class=\"wp-block-list\">\n<li><strong>Experimental<\/strong>. O Google testa novas m&eacute;tricas e coleta feedback de usu&aacute;rios e desenvolvedores.<\/li>\n\n\n\n<li><strong>Pendente<\/strong>. M&eacute;tricas que passaram pela fase experimental entram no per&iacute;odo pendente por pelo menos seis meses. Com isso, a comunidade da web tem tempo suficiente para se adaptar e dar mais feedbacks sobre a nova m&eacute;trica.<\/li>\n\n\n\n<li><strong>Est&aacute;vel<\/strong>. Se a recep&ccedil;&atilde;o da nova m&eacute;trica for boa, ela se torna oficialmente parte dos Core Web Vitals do Google.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-principais-metricas-dos-core-web-vitals\"><strong>Principais m&eacute;tricas dos Core Web Vitals<\/strong><\/h2><p>Atualmente, tr&ecirc;s principais m&eacute;tricas da web comp&otilde;em os Core Web Vitals:<\/p><h3 class=\"wp-block-heading\"><strong>Largest Contentful Paint (LCP)<\/strong><\/h3><p><a href=\"\/br\/tutoriais\/largest-contentful-paint\"><strong>Largest Contentful Paint<\/strong><\/a>, ou Largest Content Paint, mede o desempenho de carregamento de uma p&aacute;gina da web. Ele monitora quanto tempo a p&aacute;gina leva para renderizar os elementos mais importantes da p&aacute;gina, como imagens, v&iacute;deos ou blocos de texto.<\/p><p>O que &eacute; considerado uma boa pontua&ccedil;&atilde;o LCP? De acordo com o Google, suas p&aacute;ginas devem carregar em&nbsp;<strong>menos de 2,5 segundos<\/strong>&nbsp;para proporcionar uma experi&ecirc;ncia positiva ao usu&aacute;rio.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"316\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/public\" alt=\"infogr&aacute;fico indicando faixas do lcp (largest Contentful paint)\" class=\"wp-image-46704\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=960,fit=scale-down 960w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div><p>Uma resposta&nbsp;<strong>entre 2,5 e 4 segundos<\/strong>&nbsp;ainda &eacute; aceit&aacute;vel, mas voc&ecirc; precisa ajustar alguns elementos para melhorar o desempenho. Qualquer coisa&nbsp;<strong>acima de 4 segundos<\/strong>&nbsp;&eacute; compreendida como uma m&aacute; experi&ecirc;ncia do usu&aacute;rio, e voc&ecirc; pode perder muitos visitantes.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Dica<\/h4>\n                    <p>Em nosso site, vimos uma melhoria significativa no tr&aacute;fego ap&oacute;s reduzir nosso tempo de carregamento para menos de dois segundos. Conseguimos conquistar esse objetivo comprimindo imagens, ajustando nossa estrat&eacute;gia de cache, minimizando o JavaScript e usando uma rede de distribui&ccedil;&atilde;o de conte&uacute;do (CDN).<br>- <strong>Sean Begg Flint<\/strong>, Fundador e Diretor da Position Digital<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\"><strong>Interaction to Next Paint (INP)<\/strong><\/h3><p>O&nbsp;<a href=\"\/br\/tutoriais\/interaction-to-next-paint\"><strong>Interaction to Next Paint<\/strong><\/a>&nbsp;determina a responsividade de uma p&aacute;gina. Ela mede o tempo que o seu site leva para reagir ap&oacute;s uma a&ccedil;&atilde;o do usu&aacute;rio, como clicar em um bot&atilde;o ou abrir um determinado conte&uacute;do.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/como-a-INP-funciona.png\/public\" alt=\"infogr&aacute;fico sobre como a inp funciona no core web vitals\" class=\"wp-image-40896\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/como-a-INP-funciona.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/como-a-INP-funciona.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/como-a-INP-funciona.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/como-a-INP-funciona.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>O INP &eacute; medido em milissegundos (ms); quanto menor a sua pontua&ccedil;&atilde;o de INP, melhor. Idealmente, o conte&uacute;do da sua p&aacute;gina deve responder &agrave;s solicita&ccedil;&otilde;es do usu&aacute;rio em&nbsp;<strong>menos de 200 ms<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"406\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/pontuacoes-de-inp.png\/public\" alt=\"infogr&aacute;fico com pontua&ccedil;&otilde;es de inp\" class=\"wp-image-40897\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/pontuacoes-de-inp.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/pontuacoes-de-inp.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/pontuacoes-de-inp.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/10\/pontuacoes-de-inp.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Seu site precisa de melhorias se sua pontua&ccedil;&atilde;o INP estiver&nbsp;<strong>entre 200 e 500 ms<\/strong>. Qualquer resultado&nbsp;<strong>acima de 500 ms<\/strong>&nbsp;&eacute; considerado insatisfat&oacute;rio.<\/p><h3 class=\"wp-block-heading\"><strong>Cumulative Layout Shift (CLS)<\/strong><\/h3><p>O&nbsp;<a href=\"\/br\/tutoriais\/cumulative-layout-shift\"><strong>Cumulative Layout Shift<\/strong><\/a>&nbsp;mede a estabilidade visual da sua p&aacute;gina por meio do n&uacute;mero de mudan&ccedil;as inesperadas de layout que ocorrem durante as intera&ccedil;&otilde;es do usu&aacute;rio, incluindo elementos que surgem, s&atilde;o redimensionados ou reposicionados.<\/p><p>Um exemplo de mudan&ccedil;a inesperada de layout &eacute; um banner de an&uacute;ncio que aparece de repente quando os usu&aacute;rios est&atilde;o prestes a clicar em um link ou ler um artigo.<\/p><p>Essa interrup&ccedil;&atilde;o pode fazer com que os usu&aacute;rios cliquem na URL errada ou se esforcem mais tentando encontrar o texto que estavam lendo.<\/p><p>Isso n&atilde;o soa exatamente como uma experi&ecirc;ncia de navega&ccedil;&atilde;o agrad&aacute;vel, n&atilde;o &eacute;?<\/p><p>Se voc&ecirc; quer firmar uma boa experi&ecirc;ncia de usu&aacute;rio, busque uma pontua&ccedil;&atilde;o CLS de&nbsp;<strong>0,1 ou menos<\/strong>. Isso indica que o conte&uacute;do da sua p&aacute;gina &eacute; muito est&aacute;vel e que h&aacute; pouca ou nenhuma altera&ccedil;&atilde;o inesperada de elementos.<\/p><p>Uma pontua&ccedil;&atilde;o CLS&nbsp;<strong>entre 0,1 e 0,25<\/strong>&nbsp;significa que a estabilidade visual da sua p&aacute;gina precisa de reparos. Qualquer pontua&ccedil;&atilde;o&nbsp;<strong>acima de 0,25<\/strong>&nbsp;sugere que os elementos da sua p&aacute;gina se movem muito, o que &eacute; ruim para a experi&ecirc;ncia geral do usu&aacute;rio.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"899\" height=\"320\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Cumulative-Layout-Shift-benchmarks.jpg\/public\" alt=\"infogr&aacute;fico indicando faixas do cls (cumulative layout shift)\" class=\"wp-image-46705\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Cumulative-Layout-Shift-benchmarks.jpg\/w=899,fit=scale-down 899w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Cumulative-Layout-Shift-benchmarks.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Cumulative-Layout-Shift-benchmarks.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Cumulative-Layout-Shift-benchmarks.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 899px) 100vw, 899px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-como-medir-os-core-web-vitals\"><strong>Como medir os Core Web Vitals<\/strong><\/h2><p>J&aacute; falamos sobre as pontua&ccedil;&otilde;es para todas as m&eacute;tricas do Core Web Vitals, mas como voc&ecirc; pode medi-las?<\/p><p>N&atilde;o precisa se preocupar! Voc&ecirc; pode usar ferramentas gratuitas, como o&nbsp;<strong>Google Search Console<\/strong>&nbsp;e o&nbsp;<strong>PageSpeed Insights<\/strong>, para verificar suas medi&ccedil;&otilde;es do Core Web Vitals.<\/p><h3 class=\"wp-block-heading\"><strong>Google Search Console<\/strong><\/h3><p>O&nbsp;<a href=\"https:\/\/search.google.com\/search-console\/welcome\" target=\"_blank\" rel=\"noopener\"><strong>Google Search Console (GSC)<\/strong><\/a>&nbsp;coleta dados do&nbsp;<strong>Relat&oacute;rio de Experi&ecirc;ncia do Usu&aacute;rio do Chrome (CrUX)<\/strong>, que indica a conex&atilde;o de usu&aacute;rios reais interagindo com o seu site.<\/p><p>Depois de conectar seu site com o Search Console, voc&ecirc; encontrar&aacute; o relat&oacute;rio Core Web Vitals navegando at&eacute;&nbsp;<strong>Experience<\/strong>&nbsp;&rarr;&nbsp;<strong>Core Web Vitals<\/strong>&nbsp;na barra lateral esquerda.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Core-Web-Vitals-report-on-Search-Console.png\/public\" alt=\"relat&oacute;rio de Core Web Vitals no Google Search Console\" class=\"wp-image-46710\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Core-Web-Vitals-report-on-Search-Console.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Core-Web-Vitals-report-on-Search-Console.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Core-Web-Vitals-report-on-Search-Console.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Core-Web-Vitals-report-on-Search-Console.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Como voc&ecirc; pode ver, o Search Console permite que voc&ecirc; verifique o desempenho de todas as suas p&aacute;ginas da web juntas. Este &eacute; um diferencial que n&atilde;o est&aacute; dispon&iacute;vel em outras ferramentas online semelhantes.<\/p><p>Acesse&nbsp;<strong>Open Report<\/strong> (Abrir Relat&oacute;rio)&nbsp;ao lado de<strong>&nbsp;Mobile&nbsp;<\/strong>e<strong>&nbsp;Desktop&nbsp;<\/strong>para ver como o desempenho do seu site se d&aacute; nos dois tipos de dispositivos. Ao rolar para baixo, voc&ecirc; ver&aacute; mais detalhes sobre cada problema dos Core Web Vitals no seu site.<\/p><p>Na se&ccedil;&atilde;o&nbsp;<strong>Why URLs aren&rsquo;t considered good <\/strong>(por que as URLs n&atilde;o s&atilde;o consideradas boas), clique em um dos problemas para ver quais URLs s&atilde;o afetadas por uma pontua&ccedil;&atilde;o de baixo desempenho.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Search-Console-data-on-URLs-that-are-affected-by-low-Core-Web-Vitals-scores.png\/public\" alt=\"se&ccedil;&atilde;o &quot;why aren't urls considered good&quot; no google search console\" class=\"wp-image-46711\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Search-Console-data-on-URLs-that-are-affected-by-low-Core-Web-Vitals-scores.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Search-Console-data-on-URLs-that-are-affected-by-low-Core-Web-Vitals-scores.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Search-Console-data-on-URLs-that-are-affected-by-low-Core-Web-Vitals-scores.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Search-Console-data-on-URLs-that-are-affected-by-low-Core-Web-Vitals-scores.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Voc&ecirc; n&atilde;o conseguir&aacute; verificar cada p&aacute;gina no seu site individualmente. Em vez disso, o GSC agrupa m&uacute;ltiplas p&aacute;ginas da web com problemas semelhantes para que voc&ecirc; saiba quais altera&ccedil;&otilde;es precisa implementar no site como um todo.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-URL-groups-report-on-Search-Console.png\/public\" alt=\"relat&oacute;rio de grupos de urls no Google Search Console\" class=\"wp-image-46712\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-URL-groups-report-on-Search-Console.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-URL-groups-report-on-Search-Console.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-URL-groups-report-on-Search-Console.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-URL-groups-report-on-Search-Console.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\"><strong>PageSpeed Insights<\/strong><\/h3><p>Se os dados de desempenho do seu site ainda n&atilde;o est&atilde;o dispon&iacute;veis no Search Console, ou se voc&ecirc; deseja analisar uma p&aacute;gina web espec&iacute;fica, voc&ecirc; pode usar o&nbsp;<a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>PageSpeed Insights<\/strong><\/a>.<\/p><p>Basta digitar a URL que voc&ecirc; deseja verificar e clicar em&nbsp;<strong>Analisar<\/strong>. A ferramenta exibir&aacute; barras de pontua&ccedil;&atilde;o para v&aacute;rias m&eacute;tricas e indicar&aacute; se a sua p&aacute;gina da web &eacute; aprovada ou n&atilde;o na avalia&ccedil;&atilde;o do Core Web Vitals.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-2.png\/public\" alt=\"analisando m&eacute;tricas do pagespeed insights\" class=\"wp-image-42756\" title=\"search-console-detalhado\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Voc&ecirc; pode alternar entre as guias&nbsp;<strong>Mobile<\/strong>&nbsp;e&nbsp;<strong>Desktop<\/strong>&nbsp;para ver a an&aacute;lise em cada tipo de dispositivo. Clique em&nbsp;<strong>Expandir Visualiza&ccedil;&atilde;o<\/strong>&nbsp;para ver as pontua&ccedil;&otilde;es mais detalhadas de cada m&eacute;trica do Core Web Vitals.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-1.png\/public\" alt=\"google pagespeed insights com indica&ccedil;&atilde;o de Core Web Vitals\" class=\"wp-image-42769\" title=\"hostinger-tutoriais-core-web-vitals\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/pagespeed-insights-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Role para baixo at&eacute;&nbsp;<strong>Diagn&oacute;stico<\/strong>&nbsp;para conferir sugest&otilde;es de como melhorar o desempenho da p&aacute;gina.<\/p><p>No exemplo abaixo, a ferramenta detecta que a imagem do&nbsp;<strong>iPhone 16 Pro<\/strong>&nbsp;&eacute; o elemento LCP na p&aacute;gina inicial da Apple.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"713\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Diagnostics-section-on-PageSpeed-Insights.png\/public\" alt=\"se&ccedil;&atilde;o de diagn&oacute;sticos no pagespeed insights\" class=\"wp-image-46706\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Diagnostics-section-on-PageSpeed-Insights.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Diagnostics-section-on-PageSpeed-Insights.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Diagnostics-section-on-PageSpeed-Insights.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Diagnostics-section-on-PageSpeed-Insights.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Se voc&ecirc; &eacute; cliente da Hostinger, pode realizar rapidamente um teste de velocidade do seu site e ver sua pontua&ccedil;&atilde;o de desempenho diretamente no hPanel.<\/p><p>Para fazer isso, v&aacute; at&eacute;&nbsp;<strong>Sites<\/strong>&nbsp;&rarr;&nbsp;<strong>Painel de Controle<\/strong>. Ent&atilde;o, selecione&nbsp;<strong>Desempenho<\/strong>&nbsp;&rarr;&nbsp;<strong>Velocidade da P&aacute;gina<\/strong>&nbsp;no menu &agrave; esquerda.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-melhorar-os-core-web-vitals\"><strong>Como melhorar os Core Web Vitals<\/strong><\/h2><p>Se o desempenho atual do seu site deixa a desejar, preparamos uma lista com as melhores pr&aacute;ticas que voc&ecirc; pode realizar para melhorar suas pontua&ccedil;&otilde;es no Core Web Vitals.<\/p><p>Embora alguns ajustes mais simples possam ser realizados por conta pr&oacute;pria, talvez voc&ecirc; precise da ajuda de um desenvolvedor profissional para alguns dos problemas mais t&eacute;cnicos, caso voc&ecirc; n&atilde;o tenha experi&ecirc;ncia na &aacute;rea.<\/p><h3 class=\"wp-block-heading\"><strong>Melhorando o LCP<\/strong><\/h3><p>A maneira mais eficaz de aumentar sua pontua&ccedil;&atilde;o LCP &eacute; fazer o&nbsp;<a href=\"https:\/\/gtmetrix.com\/preload-largest-contentful-paint-image.html\" target=\"_blank\" rel=\"noopener\"><strong>pr&eacute;-carregamento do maior conte&uacute;do<\/strong><\/a>&nbsp;em sua p&aacute;gina da web, como sua imagem de destaque.<\/p><p>Ao fazer isso, os visitantes poder&atilde;o visualizar a vers&atilde;o completa da sua p&aacute;gina muito mais cedo, resultando em uma melhor experi&ecirc;ncia do usu&aacute;rio.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/tempo-de-carregamento.png\/public\" alt=\"infogr&aacute;fico ilustrando dois exemplos de carregamento de site\" class=\"wp-image-42765\" title=\"pre-load-largest-content\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/tempo-de-carregamento.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/tempo-de-carregamento.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/tempo-de-carregamento.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/tempo-de-carregamento.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Para fazer o pr&eacute;-carregamento da sua imagem principal, adicione este trecho de c&oacute;digo ao cabe&ccedil;alho HTML do seu site:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"preload\" href=\"image\/path\/placeholder.jpg\" as=\"image\"&gt;<\/pre><p>Substitua&nbsp;<strong>image\/path\/placeholder.jpg<\/strong>&nbsp;pelo URL real da imagem que voc&ecirc; deseja pr&eacute;-carregar.<\/p><p>Precisa de ajuda para editar o seu arquivo HTML? Se voc&ecirc; tem um site WordPress, pode usar um plugin como o&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/head-footer-code\/\" target=\"_blank\" rel=\"noopener\"><strong>Head &amp; Footer Code<\/strong><\/a>&nbsp;para simplificar o processo.<\/p><p>Depois de instalar o plugin, siga estas etapas:<\/p><ol class=\"wp-block-list\">\n<li>V&aacute; para&nbsp;<strong>Ferramentas<\/strong>&nbsp;&rarr;&nbsp;<strong>Head &amp; Footer Code&nbsp;<\/strong>.<\/li>\n\n\n\n<li>Role para baixo at&eacute;&nbsp;<strong>Article specific settings<\/strong>, e marque as caixas&nbsp;<strong>Posts<\/strong>&nbsp;e&nbsp;<strong>Pages<\/strong>. Salve suas altera&ccedil;&otilde;es.<\/li>\n\n\n\n<li>Abra o post ou a p&aacute;gina que voc&ecirc; deseja otimizar.<\/li>\n\n\n\n<li>Em&nbsp;<strong>Behavior<\/strong>, defina o comportamento do plugin para&nbsp;<strong>Replace the site-wide code (substituir o c&oacute;digo do site inteiro).<\/strong><\/li>\n\n\n\n<li>Insira o c&oacute;digo de pr&eacute;-carregamento mais acima, em&nbsp;<strong>Head Code<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"364\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Head-Footer-Code-plugin-inside-the-WordPress-block-editor.png\/public\" alt=\"adicionando c&oacute;digo html no plugin head &amp; footer code para wordpress\" class=\"wp-image-46707\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Head-Footer-Code-plugin-inside-the-WordPress-block-editor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Head-Footer-Code-plugin-inside-the-WordPress-block-editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Head-Footer-Code-plugin-inside-the-WordPress-block-editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-Head-Footer-Code-plugin-inside-the-WordPress-block-editor.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Ap&oacute;s publicar o post ou p&aacute;gina e verificar o arquivo HTML, voc&ecirc; notar&aacute; que a tag de pr&eacute;-carregamento j&aacute; foi adicionada.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1560\" height=\"136\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-preload-tag-in-the-HTML-header.png\/public\" alt=\"tag preload num cabe&ccedil;alho html do wordpress\" class=\"wp-image-46708\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-preload-tag-in-the-HTML-header.png\/w=1560,fit=scale-down 1560w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-preload-tag-in-the-HTML-header.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-preload-tag-in-the-HTML-header.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-preload-tag-in-the-HTML-header.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-preload-tag-in-the-HTML-header.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1560px) 100vw, 1560px\" \/><\/figure><\/div><p>Al&eacute;m do seu conte&uacute;do principal, voc&ecirc; precisa&nbsp;<a href=\"\/br\/tutoriais\/otimizar-imagens\"><strong>otimizar outras imagens no seu site<\/strong><\/a>&nbsp;para impulsionar o seu desempenho. Use ferramentas gratuitas, como o&nbsp;<a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\"><strong>TinyPNG<\/strong><\/a>, para comprimir imagens JPEG, PNG e WebP antes de fazer o upload delas para o seu site.<\/p><p>Outra boa ideia &eacute; fazer o upgrade do seu plano de hospedagem web para um servi&ccedil;o mais robusto, como a hospedagem Cloud, para melhorar efetivamente sua pontua&ccedil;&atilde;o LCP.<\/p><p>Por exemplo, nossas solu&ccedil;&otilde;es de <a href=\"\/br\/hospedagem-cloud\">hospedagem Cloud<\/a>&nbsp;<strong>fornecem 20 vezes mais<\/strong>&nbsp;recursos de servidor do que a hospedagem padr&atilde;o, oferecendo ao seu site mais poder de processamento para gerenciar conte&uacute;do multim&iacute;dia de maneira eficiente.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/hospedagem-cloud\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Cloud-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32925\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Cloud-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Cloud-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Cloud-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Cloud-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Cloud-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>Todos os nossos planos de hospedagem Cloud v&ecirc;m com uma rede de distribui&ccedil;&atilde;o de conte&uacute;do (CDN). Ela armazena c&oacute;pias do conte&uacute;do do seu site em uma rede global de servidores.<\/p><p>Em outras palavras, quando algu&eacute;m visita seu site, o conte&uacute;do ser&aacute; carregado a partir do servidor CDN mais pr&oacute;ximo. Como os dados percorrem uma dist&acirc;ncia menor, seu conte&uacute;do carrega muito mais r&aacute;pido no navegador do usu&aacute;rio.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"887\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/Como-Funciona-uma-CDN.png\/public\" alt=\"infogr&aacute;fico: como funciona uma cdn\" class=\"wp-image-36937\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/Como-Funciona-uma-CDN.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/Como-Funciona-uma-CDN.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/Como-Funciona-uma-CDN.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/05\/Como-Funciona-uma-CDN.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Nossos testes indicam que a&nbsp;<a href=\"https:\/\/support.hostinger.com\/pt\/articles\/7935917-hostinger-cdn-otimizacao-de-sites\" target=\"_blank\" rel=\"noopener\"><strong>CDN da Hostinger pode aumentar o desempenho do seu site<\/strong><\/a>&nbsp;em at&eacute; 40%.<\/p><h3 class=\"wp-block-heading\"><strong>Melhorando o INP<\/strong><\/h3><p>Um script de front-end JavaScript pesado costuma ser uma causa comum de problemas na responsividade das suas p&aacute;ginas. Isso porque o navegador fica ocupado carregando os arquivos JavaScript necess&aacute;rios, o que prejudica as respostas &agrave;s intera&ccedil;&otilde;es do usu&aacute;rio.<\/p><p>Nesse caso, a solu&ccedil;&atilde;o mais indicada &eacute; minificar o JavaScript usando ferramentas como o&nbsp;<a href=\"https:\/\/www.uglifyjs.net\/\" target=\"_blank\" rel=\"noopener\"><strong>UglifyJS<\/strong><\/a>.<\/p><p>Minifica&ccedil;&atilde;o significa remover otimizar seus scripts removendo elementos desnecess&aacute;rios, como espa&ccedil;os em branco, al&eacute;m de usar formatos mais simples e encurtar nomes de fun&ccedil;&otilde;es.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"717\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-comparison-between-the-original-JS-code-and-the-minified-one-on-UglifyJS.png\/public\" alt=\"mitificando c&oacute;digo javascript no uglifyJS\" class=\"wp-image-46709\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-comparison-between-the-original-JS-code-and-the-minified-one-on-UglifyJS.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-comparison-between-the-original-JS-code-and-the-minified-one-on-UglifyJS.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-comparison-between-the-original-JS-code-and-the-minified-one-on-UglifyJS.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/The-comparison-between-the-original-JS-code-and-the-minified-one-on-UglifyJS.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Al&eacute;m da minifica&ccedil;&atilde;o, outra boa ideia &eacute;&nbsp;<a href=\"https:\/\/www.w3schools.com\/tags\/att_script_defer.asp\" target=\"_blank\" rel=\"noopener\"><strong>adiar o carregamento do JavaScript<\/strong><\/a>. Esse m&eacute;todo atrasar&aacute; o carregamento de todos os arquivos JS at&eacute; que outros elementos na sua p&aacute;gina estejam prontos.<\/p><p>Al&eacute;m disso, lembre-se de remover todos os c&oacute;digos de terceiros n&atilde;o utilizados, pois eles podem desacelerar o carregamento do seu conte&uacute;do. Aqui, podemos citar scripts de rastreamento do Google Analytics ou do Hotjar que voc&ecirc; n&atilde;o precisa mais.<\/p><p>Se voc&ecirc; n&atilde;o tem familiaridade com esses coinceitos, considere contratar um desenvolvedor web para realizar todas essas corre&ccedil;&otilde;es. Afinal de contas, mexer em c&oacute;digo pode ser uma tarefa um tanto quanto complexa &mdash; e voc&ecirc; n&atilde;o quer bagun&ccedil;ar o c&oacute;digo do seu site, n&atilde;o &eacute; mesmo?<\/p><h3 class=\"wp-block-heading\"><strong>Melhorando o CLS<\/strong><\/h3><p>Deslocamentos inesperados de layout geralmente ocorrem porque o navegador n&atilde;o consegue prever o tamanho final do conte&uacute;do multim&iacute;dia na p&aacute;gina, como banners, imagens e v&iacute;deos.<\/p><p>Ent&atilde;o, quando a imagem ou banner finalmente carregar, ela mover&aacute; todos os elementos dentro da janela de visualiza&ccedil;&atilde;o.<\/p><p>A maneira mais f&aacute;cil de evitar esse problema &eacute; definir uma dimens&atilde;o fixa para seus elementos visuais.<\/p><p>Como seu navegador sabe exatamente a altura e a largura da sua imagem, ele pode reservar o espa&ccedil;o apropriado na p&aacute;gina, mantendo tudo alinhado corretamente.<\/p><p>Voc&ecirc; pode adicionar atributos de tamanho &agrave;s imagens adicionando este trecho de c&oacute;digo ao seu arquivo HTML:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"nome-da-imagem.jpg\" width=\"1140\" height=\"1140\" alt=\"Descri&ccedil;&atilde;o da imagem\"&gt;<\/pre><p>Basta substituir os espa&ccedil;os provis&oacute;rios pelo nome, largura, altura e descri&ccedil;&atilde;o de texto alternativo da sua imagem.<\/p><p>Os usu&aacute;rios do WordPress tamb&eacute;m podem usar o&nbsp;<a href=\"https:\/\/docs.wp-rocket.me\/article\/1366-add-missing-image-dimensions\" target=\"_blank\" rel=\"noopener\"><strong>WP Rocket<\/strong><\/a>&nbsp;para adicionar automaticamente dimens&otilde;es de imagem ausentes &agrave;s p&aacute;ginas em cache.<\/p><h2 class=\"wp-block-heading\" id=\"h-outras-metricas-de-desempenho-do-site\"><strong>Outras m&eacute;tricas de desempenho do site<\/strong><\/h2><p>Al&eacute;m das tr&ecirc;s principais m&eacute;tricas do Core Web Vitals, os propriet&aacute;rios de sites tamb&eacute;m precisam considerar outros elementos para oferecer uma experi&ecirc;ncia de usu&aacute;rio aprimorada:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/web.dev\/articles\/fcp\" target=\"_blank\" rel=\"noopener\"><strong>First Contentful Paint (FCP)<\/strong><\/a>. Calcula o intervalo de tempo entre o usu&aacute;rio chegar na sua p&aacute;gina e o primeiro conte&uacute;do ser exibido. O conte&uacute;do aqui inclui texto, imagens e quaisquer elementos diversos. Para proporcionar uma boa experi&ecirc;ncia ao usu&aacute;rio, busque uma pontua&ccedil;&atilde;o FCP de&nbsp;<strong>1,8 segundo ou menos<\/strong>.<\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/articles\/tti\" target=\"_blank\" rel=\"noopener\"><strong>Time to Interactive (TTI)<\/strong><\/a>. Mede a quantidade de tempo que uma p&aacute;gina precisa para se tornar totalmente interativa&nbsp;&mdash; isto &eacute;, quando os usu&aacute;rios podem realmente clicar em um bot&atilde;o ou passar o mouse sobre uma imagem. Uma boa pontua&ccedil;&atilde;o TTI &eacute; de&nbsp;<strong>menos de 5 segundos<\/strong>.<\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/articles\/tbt\" target=\"_blank\" rel=\"noopener\"><strong>Total Blocking Time (TBT)<\/strong><\/a>. &Eacute; o per&iacute;odo em que uma p&aacute;gina est&aacute; bloqueada e n&atilde;o pode responder &agrave;s entradas do usu&aacute;rio. Uma pontua&ccedil;&atilde;o TBT de&nbsp;<strong>200 milissegundos ou menos<\/strong>&nbsp;indica uma alta responsividade da p&aacute;gina.<\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/articles\/ttfb\" target=\"_blank\" rel=\"noopener\"><strong>Time to First Byte (TTFB)<\/strong><\/a>. Especifica qu&atilde;o r&aacute;pido o seu servidor web responde a uma solicita&ccedil;&atilde;o e envia dados para o navegador de um usu&aacute;rio. Geralmente, um TTFB de&nbsp;<strong>0,8 segundos ou menos<\/strong>&nbsp;&eacute; considerado bom. Se voc&ecirc; administra um site WordPress, aqui est&aacute;&nbsp;<a href=\"\/br\/tutoriais\/reduza-o-tempo-de-resposta-inicial-do-servidor\"><strong>como reduzir o tempo de resposta do seu servidor<\/strong><\/a>.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Os Core Web Vitals s&atilde;o indicadores que estabelecem um padr&atilde;o para melhorar a experi&ecirc;ncia e facilidade de uso das suas p&aacute;ginas. Quanto melhor a experi&ecirc;ncia do usu&aacute;rio em seu site, mais prov&aacute;vel que os visitantes permane&ccedil;am e interajam com seu conte&uacute;do.<\/p><p>Al&eacute;m disso, o Google leva o Core Web Vitals em conta no seu sistema de raqnueamento. Em outras palavras, se voc&ecirc; quer ter uma posi&ccedil;&atilde;o de destaque nas buscas, melhorar suas pontua&ccedil;&otilde;es CWV deve ser uma das suas prioridades no gerenciamento do seu site.<\/p><p>Existem tr&ecirc;s m&eacute;tricas principais no Core Web Vitals:<\/p><ul class=\"wp-block-list\">\n<li><strong>Largest Contentful Paint (LCP)<\/strong>. Calcula o tempo que a sua p&aacute;gina leva para carregar o conte&uacute;do mais pesado.<\/li>\n\n\n\n<li><strong>Interaction to Next Paint (INP)<\/strong>. Mede a responsividade da sua p&aacute;gina quando os usu&aacute;rios interagem com o seu conte&uacute;do.<\/li>\n\n\n\n<li><strong>Cumulative Layout Shift (CLS)<\/strong>. Verifica a quantidade de mudan&ccedil;as inesperadas de layout que ocorrem durante a intera&ccedil;&atilde;o do usu&aacute;rio.<\/li>\n<\/ul><p>Cada uma dessas m&eacute;tricas tem uma faixa determinada que determina se a sua p&aacute;gina tem um bom desempenho, precisa de melhorias ou entrega um desempenho ruim.<\/p><p>Para verificar as pontua&ccedil;&otilde;es do Core Web Vitals do seu site, use ferramentas como o Google Search Console e o PageSpeed Insights.<\/p><p>Esperamos que este artigo tenha ajudado voc&ecirc; a entender o que &eacute; Core Web Vitals, como medi-los e como melhorar o desempenho do seu site para conquistar melhores posi&ccedil;&otilde;es nas buscas. At&eacute; a pr&oacute;xima!<\/p><h2 class=\"wp-block-heading\" id=\"h-perguntas-frequentes-sobre-core-web-vitals\"><strong>Perguntas frequentes sobre Core Web Vitals<\/strong><\/h2><p>Tem outras perguntas? Aqui, responderemos algumas quest&otilde;es frequentes sobre o Core Web Vitals.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694413888f89e\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Como os Core Web Vitals impactam o SEO?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>O Google confirmou que os Core Web Vitals s&atilde;o um fator de ranqueamento. Isso significa que se o seu site tiver boas pontua&ccedil;&otilde;es no Core Web Vitals, ele ter&aacute; mais chances de ocupar uma posi&ccedil;&atilde;o de destaque nos resultados de pesquisa.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694413888f8a2\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>O que acontece se minha p&aacute;gina tiver Core Web Vitals ruins?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ter um site lento, pouco responsivo e inst&aacute;vel &eacute; ruim para a reputa&ccedil;&atilde;o da sua marca e para a satisfa&ccedil;&atilde;o do usu&aacute;rio. Se voc&ecirc; n&atilde;o resolver esses problemas imediatamente, come&ccedil;ar&aacute; a ver taxas de rejei&ccedil;&atilde;o mais altas, posi&ccedil;&otilde;es de busca mais baixas e, eventualmente, vendas reduzidas.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694413888f8a3\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Os Core Web Vitals ainda s&atilde;o relevantes?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sim, totalmente. O Google est&aacute; incentivando os sites a serem mais amig&aacute;veis para os usu&aacute;rios, e o Core Web Vitals fornece orienta&ccedil;&otilde;es unificadas para que propriet&aacute;rios e desenvolvedores continuem melhorando o desempenho de seus sites.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>O Core Web Vitals &eacute; um conjunto de m&eacute;tricas estabelecido pelo Google para medir a velocidade de carregamento, a interatividade e estabilidade visual de qualquer p&aacute;gina da web. Entre outros fatores, como seguran&ccedil;a e compatibilidade com dispositivos m&oacute;veis, os Core Web Vitals s&atilde;o um elemento essencial dos&nbsp;sinais de experi&ecirc;ncia de p&aacute;gina&nbsp;do Google.&nbsp; Como a experi&ecirc;ncia [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/core-web-vitals\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"O que s\u00e3o Core Web Vitals e como medi-los para melhorar seu site","rank_math_description":"Core Web Vitals s\u00e3o m\u00e9tricas que avaliam o tempo de carregamento, a interatividade e a estabilidade visual de um site. Saiba tudo sobre elas!","rank_math_focus_keyword":"core web vitals","footnotes":""},"categories":[4941],"tags":[7391],"class_list":["post-27707","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-core-web-vitals"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/core-web-vitals","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/core-web-vitals","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/core-web-vitals","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/core-web-vitals","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/core-web-vitals","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/core-web-vitals","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/core-web-vitals","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/core-web-vitals","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/core-web-vitals","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/core-web-vitals","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/core-web-vitals","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/core-web-vitals","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/core-web-vitals","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/core-web-vitals","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/core-web-vitals","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/core-web-vitals","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=27707"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27707\/revisions"}],"predecessor-version":[{"id":51736,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27707\/revisions\/51736"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=27707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=27707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=27707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}