{"id":57397,"date":"2023-04-18T07:00:32","date_gmt":"2023-04-18T14:00:32","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=57397"},"modified":"2025-05-26T12:57:21","modified_gmt":"2025-05-26T19:57:21","slug":"relatorio-do-pagespeed-insights","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/","title":{"rendered":"Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo &#038; Dicas para Alcan\u00e7ar 100)"},"content":{"rendered":"\n<p>Na Internet, n\u00e3o h\u00e1 limite de velocidade \u2013 mas, felizmente, h\u00e1 um veloc\u00edmetro.<\/p>\n\n\n\n<p>A velocidade e o desempenho do seu site t\u00eam um grande impacto nos neg\u00f3cios. Isso pode melhorar suas classifica\u00e7\u00f5es de pesquisa e SEO, aumentar o engajamento do site e impulsionar mais convers\u00f5es \u2013 e receita.<\/p>\n\n\n\n<p>Mas antes de otimizar a velocidade do seu site, voc\u00ea precisa saber como ele se comporta.<\/p>\n\n\n\n<p>\u00c9 a\u00ed que entra o <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights.jpg\" alt=\"Screenshot do PageSpeed Insights\" class=\"wp-image-40108 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Esta ferramenta gratuita da Google ajuda voc\u00ea a entender o desempenho do seu site, mas pode ser complicado come\u00e7ar.<\/p>\n\n\n\n<p>Afinal, o que significam todos esses termos e pontua\u00e7\u00f5es diferentes? Como voc\u00ea deve saber o que fazer ou por onde come\u00e7ar?<\/p>\n\n\n\n<p>Este guia est\u00e1 focado no que fazer com os resultados do seu relat\u00f3rio do PageSpeed Insights e como trabalhar estrategicamente atrav\u00e9s de solu\u00e7\u00f5es espec\u00edficas para melhorar cada uma das suas pontua\u00e7\u00f5es, independentemente dos problemas que precisam ser resolvidos!<\/p>\n\n\n\n<p>Hoje, vamos percorrer cada um dos fatores-chave e mostrar estrat\u00e9gias para melhorar seu desempenho em cada um.<\/p>\n\n\n\n<h2 id=\"h-what-is-google-pagespeed-insights\" class=\"wp-block-heading\">O que \u00e9 o Google PageSpeed Insights?<\/h2>\n\n\n\n<p>PageSpeed Insights \u00e9 uma ferramenta que testa, mede e relata o desempenho do seu site. Ela captura dados vitais sobre como os usu\u00e1rios experienciam e interagem com seu site analisando aspectos como velocidade do site, tempo de carregamento e experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<p>Al\u00e9m de avaliar o seu site em um conjunto de m\u00e9tricas de desempenho chave, o PageSpeed Insights executa uma s\u00e9rie de diagn\u00f3sticos e tamb\u00e9m recomenda a\u00e7\u00f5es espec\u00edficas para ajud\u00e1-lo a melhorar o desempenho do seu site.<\/p>\n\n\n\n<p>O PageSpeed Insights \u00e9 alimentado pelo <a href=\"https:\/\/developers.google.com\/search\/blog\/2018\/11\/pagespeed-insights-now-powered-by#:~:text=Historically%2C%20these%20tools%20have%20used,Lighthouse%20as%20its%20analysis%20engine.\" target=\"_blank\" rel=\"noopener\">motor de an\u00e1lise de c\u00f3digo aberto da Google, Lighthouse<\/a>.<\/p>\n\n\n\n<p>O que torna o PageSpeed Insights particularmente importante para webmasters e profissionais de marketing \u00e9 que o desempenho do site est\u00e1 intrinsecamente ligado \u00e0 experi\u00eancia do usu\u00e1rio (UX), SEO, tr\u00e1fego, convers\u00f5es e todos os outros KPIs que mais importam para o neg\u00f3cio.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Desempenho do Site<\/h3>\n    <p>O desempenho de um site refere-se \u00e0 velocidade e ao tempo de atividade do site. Um site com melhor desempenho ter\u00e1 tempos de carregamento mais r\u00e1pidos, funcionar\u00e1 de maneira mais suave e ter\u00e1 pouco ou nenhum tempo de inatividade.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/website-performance\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Obter 100% no PageSpeed Insights \u00e9 como tirar nota m\u00e1xima no seu SAT.<\/p>\n\n\n\n<p>Isso n\u00e3o significa necessariamente que voc\u00ea ter\u00e1 um \u00f3timo desempenho na faculdade, mas definitivamente lhe d\u00e1 uma vantagem.<\/p>\n\n\n\n<h2 id=\"h-page-speed-and-seo\" class=\"wp-block-heading\">Velocidade da P\u00e1gina e SEO<\/h2>\n\n\n\n<p>Vamos responder \u00e0 principal pergunta primeiro.<\/p>\n\n\n\n<p>Sim, a velocidade e o desempenho do seu site podem impactar a otimiza\u00e7\u00e3o para motores de busca (SEO).<\/p>\n\n\n\n<p>Em particular, um desempenho fraco pode <i>prejudicar <\/i>o seu SEO. \u00c9 \u00fatil pensar nos seus Insights de PageSpeed como um &#8220;governador&#8221; para o seu site. Se suas pontua\u00e7\u00f5es s\u00e3o baixas, significa que o site est\u00e1 lento \u2013 o que tamb\u00e9m desacelera seu crescimento nos SERPs (P\u00e1gina de Resultados do Motor de Busca)!<\/p>\n\n\n\n<p>Google declarou publicamente que utiliza sinais de velocidade do site, que denomina de &#8220;experi\u00eancia da p\u00e1gina&#8221;, como um fator de classifica\u00e7\u00e3o SEO.<\/p>\n\n\n\n<p>Existem tr\u00eas fatores centrais inclu\u00eddos no algoritmo de busca que o Google denomina como <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/melhorar-core-web-vitals\/\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Carregamento &#8211; Maior Pintura de Conte\u00fado (LCP)<\/li>\n\n\n\n<li>Interatividade &#8211; Atraso na Primeira Entrada (FID)<\/li>\n\n\n\n<li>Estabilidade Visual &#8211; Mudan\u00e7a de Layout Cumulativa (CLS)<\/li>\n\n\n<\/ol>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>O que s\u00e3o Core Web Vitals?<\/h3>\n    <p>Core Web Vitals (CWV) foi desenvolvido pelo Google e representa um trio de m\u00e9tricas de experi\u00eancia do usu\u00e1rio projetadas para ajudar a criar uma experi\u00eancia de navega\u00e7\u00e3o na web mais r\u00e1pida, acess\u00edvel e de maior qualidade. As tr\u00eas m\u00e9tricas Core Web Vitals incluem Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/core-web-vitals\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Todos esses fatores medem a rapidez com que seu site carrega e a velocidade e qualidade da experi\u00eancia do usu\u00e1rio, o que tamb\u00e9m pode impactar a acessibilidade.<\/p>\n\n\n\n<p>Estes tr\u00eas fatores fazem parte das seis m\u00e9tricas totais medidas pelo PageSpeed Insights.<\/p>\n\n\n\n<h2 id=\"h-how-pagespeed-insights-works\" class=\"wp-block-heading\">Como funciona o PageSpeed Insights<\/h2>\n\n\n\n<p>Agora que entendemos o quem, o qu\u00ea, o onde e o porqu\u00ea&#8230; s\u00f3 falta o <i>como<\/i>.<\/p>\n\n\n\n<p>Como funciona o PageSpeedInsights e como voc\u00ea utiliza as informa\u00e7\u00f5es que ele fornece?<\/p>\n\n\n\n<p>Primeiro, um pouco sobre como a ferramenta funciona por tr\u00e1s dos bastidores, diretamente do Google:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cPageSpeed Insights oferece dados de laborat\u00f3rio e de campo sobre uma p\u00e1gina. Os dados de laborat\u00f3rio s\u00e3o \u00fateis para depurar problemas, pois s\u00e3o coletados em um ambiente controlado. No entanto, podem n\u00e3o capturar gargalos do mundo real. Os dados de campo s\u00e3o \u00fateis para capturar a verdadeira experi\u00eancia do usu\u00e1rio no mundo real &#8211; mas possuem um conjunto mais limitado de m\u00e9tricas.\u201d<\/p>\n\n\n<\/blockquote>\n\n\n\n<p>Em outras palavras, o PageSpeed Insights est\u00e1 analisando duas coisas.<\/p>\n\n\n\n<p>Primeiro, os computadores do Google carregam seu site para ver como ele se comporta.<\/p>\n\n\n\n<p>Em segundo lugar, uma vez que os computadores do Google n\u00e3o s\u00e3o os mesmos que um laptop que voc\u00ea pode usar em casa ou no trabalho, eles analisam um registro de dados hist\u00f3ricos de usu\u00e1rios reais que visitaram seu site nos \u00faltimos 28 dias. (Esses dados v\u00eam do Chrome User Experience Report, frequentemente chamado de \u201cCrUX\u201d, e s\u00e3o coletados de usu\u00e1rios que usam o navegador Chrome.)<\/p>\n\n\n\n<p>Em seguida, o PageSpeed Insights combina esses dois testes e classifica seu site com base em como usu\u00e1rios reais podem experienci\u00e1-lo.<\/p>\n\n\n\n<p>A Pontua\u00e7\u00e3o do PageSpeed Insights \u00e9 uma cole\u00e7\u00e3o de m\u00e9tricas sobre o desempenho do seu site que detalha quais \u00e1reas est\u00e3o boas e quais podem precisar de melhorias.<\/p>\n\n\n\n<p>H\u00e1 6 pontua\u00e7\u00f5es a conhecer:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First Contentful Paint (FCP)<\/li>\n\n\n\n<li>First Input Delay (FID)<\/li>\n\n\n\n<li>Largest Contentful Paint (LCP)<\/li>\n\n\n\n<li>Cumulative Layout Shift (CLS)<\/li>\n\n\n\n<li>Interaction to Next Paint (INP)<\/li>\n\n\n\n<li>Time to First Byte (TTFB)<\/li>\n\n\n<\/ol>\n\n\n\n<p>Cada uma dessas m\u00e9tricas \u00e9 medida e ent\u00e3o pontuada de acordo com o n\u00edvel de desempenho.<\/p>\n\n\n\n<p>Quando voc\u00ea executa um relat\u00f3rio de PageSpeed Insights em seu site, voc\u00ea receber\u00e1 uma pontua\u00e7\u00e3o e uma \u201cnota\u201d para cada um deles, que se enquadrar\u00e1 em uma de tr\u00eas categorias:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Bom<\/li>\n\n\n\n<li>Precisa Melhorar<\/li>\n\n\n\n<li>Ruim<\/li>\n\n\n<\/ol>\n\n\n\n<p>Estas notas s\u00e3o determinadas por faixas predefinidas estabelecidas pelo Google:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&nbsp;<\/td><td><b>Bom<\/b><\/td><td><b>Precisa Melhorar<\/b><\/td><td><b>Pobre<\/b><\/td><\/tr><tr><td>FCP<\/td><td>[0, 1800ms]<\/td><td>(1800ms, 3000ms]<\/td><td>acima de 3000ms<\/td><\/tr><tr><td>FID<\/td><td>[0, 100ms]<\/td><td>(100ms, 300ms]<\/td><td>acima de 300ms<\/td><\/tr><tr><td>LCP<\/td><td>[0, 2500ms]<\/td><td>(2500ms, 4000ms]<\/td><td>acima de 4000ms<\/td><\/tr><tr><td>CLS<\/td><td>[0, 0.1]<\/td><td>(0.1, 0.25]<\/td><td>acima de 0.25<\/td><\/tr><tr><td>INP (experimental)<\/td><td>[0, 200ms]<\/td><td>(200ms, 500ms]<\/td><td>acima de 500ms<\/td><\/tr><tr><td>TTFB (experimental)<\/td><td>[0, 800ms]<\/td><td>(800ms, 1800ms]<\/td><td>acima de 1800ms<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"h-how-to-use-this-guide-to-improve-your-pagespeed-insights-score\" class=\"wp-block-heading\">Como Usar Este Guia para Melhorar Sua Pontua\u00e7\u00e3o no PageSpeed Insights<\/h2>\n\n\n\n<p>Entender o PageSpeed Insights \u00e9 a primeira parte da batalha.<\/p>\n\n\n\n<p>Em seguida, precisamos descobrir como traduzir todas as pontua\u00e7\u00f5es, n\u00fameros e sugest\u00f5es em um plano de a\u00e7\u00e3o para melhoria.<\/p>\n\n\n\n<p>Aqui est\u00e1 como usar este guia:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">Execute o relat\u00f3rio de Insights de Velocidade da P\u00e1gina do seu site<\/a>.<\/li>\n\n\n\n<li>Procure por testes de CWV falhos ou m\u00e9tricas na extremidade &#8220;Ruim&#8221; da escala.<\/li>\n\n\n\n<li>Encontre a se\u00e7\u00e3o abaixo que se relaciona com essas m\u00e9tricas espec\u00edficas.<\/li>\n\n\n\n<li>Siga os passos (apresentados em ordem do maior para o menor impacto).<\/li>\n\n\n\n<li>Execute novamente o relat\u00f3rio de Insights de Velocidade da P\u00e1gina.<\/li>\n\n\n\n<li>Se necess\u00e1rio, repita o processo para quaisquer m\u00e9tricas ainda marcadas como \u201cRuim\u201d.<\/li>\n\n\n\n<li>Passe para as m\u00e9tricas marcadas como \u201cPrecisa de Melhoria\u201d.<\/li>\n\n\n\n<li>Repita desde o in\u00edcio.<\/li>\n\n\n<\/ul>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-1-first-contentful-paint-fcp\" class=\"wp-block-heading\">#1 &#8211; Primeira Pintura com Conte\u00fado (FCP)<\/h2>\n\n\n\n<p>Vamos mergulhar na primeira m\u00e9trica da lista do Google.<\/p>\n\n\n\n<p>\u00c9 o Primeiro Pintura de Conte\u00fado, ou FCP, e mede a rapidez com que o usu\u00e1rio pode ver seu site enquanto ele est\u00e1 carregando.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-first-contentful-paint\">O que \u00e9 o Primeiro Preenchimento de Conte\u00fado?<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/first-contentful-paint\/\" target=\"_blank\" rel=\"noopener\">First Contentful Paint<\/a> (FCP) \u00e9 o tempo que leva para o primeiro objeto carregar no navegador do usu\u00e1rio. Isso \u00e9 diferente da velocidade de carregamento da p\u00e1gina ou do tempo de carregamento, porque n\u00e3o \u00e9 o tempo para renderizar a p\u00e1gina inteira \u2014 \u00c9 apenas a primeira pe\u00e7a da p\u00e1gina a aparecer na tela.<\/p>\n\n\n\n<p>Isso \u00e9 importante do ponto de vista do usu\u00e1rio porque eles podem ver o progresso \u00e0 medida que a p\u00e1gina come\u00e7a a aparecer.<\/p>\n\n\n\n<p>Isso tamb\u00e9m significa que as estrat\u00e9gias para acelerar o FCP s\u00e3o \u00fanicas, diferentemente de apenas tornar o carregamento da p\u00e1gina inteira mais r\u00e1pido.<\/p>\n\n\n\n<p>O FCP \u00e9 medido em segundos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bom: &lt; 1.8 segundos<\/li>\n\n\n\n<li>Precisa de melhorias: 1.8 &#8211; 3 segundos<\/li>\n\n\n\n<li>Ruim: &gt; 3 segundos<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-fcp\">T\u00e9cnicas para Melhorar o FCP<\/h3>\n\n\n\n<p>Vamos supor que voc\u00ea obteve 2.2s na sua pontua\u00e7\u00e3o FCP. Voc\u00ea espera reduzi-la para 1.8s.<\/p>\n\n\n\n<p>Quais ferramentas est\u00e3o \u00e0 sua disposi\u00e7\u00e3o?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-minimizing-render-blocking-resources\">Minimizando Recursos que Bloqueiam a Renderiza\u00e7\u00e3o<\/h4>\n\n\n\n<p>Lembre-se, o First Contentful Paint n\u00e3o \u00e9 apenas sobre quanto tempo a p\u00e1gina inteira demora para carregar. \u00c9 sobre fazer os primeiros pixels aparecerem na tela o mais r\u00e1pido poss\u00edvel.<\/p>\n\n\n\n<p>Uma estrat\u00e9gia chave \u00e9 simplesmente alterar a ordem do conte\u00fado na sua p\u00e1gina.<\/p>\n\n\n\n<p>Deixe o navegador renderizar o texto mais importante, imagens e estilos <i>antes<\/i> de come\u00e7ar a carregar scripts pesados, anima\u00e7\u00f5es sofisticadas e conte\u00fado que est\u00e1 \u201cabaixo da dobra\u201d.<\/p>\n\n\n\n<p>A primeira coisa que voc\u00ea deve fazer: <b>Exclua quaisquer estilos ou scripts n\u00e3o utilizados da sua p\u00e1gina.<\/b><\/p>\n\n\n\n<p>Se voc\u00ea est\u00e1 carregando JavaScript ou CSS na p\u00e1gina (geralmente na se\u00e7\u00e3o Head do site), isso vai desacelerar o FCP. Se voc\u00ea n\u00e3o est\u00e1 usando-os, ent\u00e3o est\u00e1 apenas te atrasando sem necessidade.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>JavaScript<\/h3>\n    <p>JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o que permite criar coisas dentro de uma p\u00e1gina da web ou em um servidor web. Quando voc\u00ea visualiza uma p\u00e1gina da web, o c\u00f3digo JavaScript executa automaticamente.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/javascript\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>No WordPress, voc\u00ea geralmente pode conseguir isso desativando Plugins inutilizados, que podem carregar c\u00f3digo na p\u00e1gina mesmo que o Plugin n\u00e3o esteja sendo usado ou exibido.<\/p>\n\n\n\n<p>Se voc\u00ea observar as descobertas no seu relat\u00f3rio de PageSpeed Insights, ele indicar\u00e1 o c\u00f3digo que est\u00e1 sendo carregado na p\u00e1gina, mas n\u00e3o est\u00e1 sendo usado:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report.jpg\" alt=\"Relat\u00f3rio do PageSpeed Insights (PSI)\" class=\"wp-image-40109 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Isso deve indicar qual c\u00f3digo ou plugins voc\u00ea pode remover com seguran\u00e7a.<\/p>\n\n\n\n<p>(Nota: S\u00f3 porque o c\u00f3digo n\u00e3o \u00e9 usado em uma p\u00e1gina n\u00e3o significa que ele n\u00e3o esteja em outras p\u00e1ginas do seu site! Tenha cuidado antes de come\u00e7ar a cortar e eliminar coisas das suas p\u00e1ginas.)<\/p>\n\n\n\n<p>Pr\u00f3ximo: <b>Atrasar ou carregar scripts de forma ass\u00edncrona.<\/b><\/p>\n\n\n\n<p>Se voc\u00ea precisa de scripts ou estiliza\u00e7\u00e3o na sua p\u00e1gina, mas eles n\u00e3o s\u00e3o imediatamente vitais para o primeiro conte\u00fado que o usu\u00e1rio v\u00ea, ent\u00e3o voc\u00ea pode fazer o que \u00e9 chamado de adiar ou carreg\u00e1-los de forma ass\u00edncrona. Isso indica ao navegador para esperar para carreg\u00e1-los ao inv\u00e9s de carreg\u00e1-los na ordem em que aparecem na p\u00e1gina.<\/p>\n\n\n\n<p>Isso \u00e9 bastante simples \u2014 Voc\u00ea pode adicionar um pouco de c\u00f3digo extra ao seu site que instruir\u00e1 o navegador a adiar ou carregar de forma ass\u00edncrona (ou ambos):<\/p>\n\n\n\n<p><code>&lt;script src=\"app.js\" async&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<p>(Nota do Nerd: Async e defer n\u00e3o s\u00e3o tecnicamente a mesma coisa. Mas, para a maioria de n\u00f3s, a diferen\u00e7a \u00e9 principalmente sem\u00e2ntica. No entanto, sinta-se \u00e0 vontade para <a href=\"https:\/\/stackoverflow.com\/questions\/10808109\/script-tag-async-defer\" target=\"_blank\" rel=\"noopener\">explorar mais a fundo e descobrir mais sobre as nuances sutis<\/a>.)<\/p>\n\n\n\n<p>Se voc\u00ea deseja uma maneira mais f\u00e1cil de lidar com esta etapa, considere usar o <a href=\"https:\/\/wordpress.org\/plugins\/jetpack-boost\/\" target=\"_blank\" rel=\"noopener\">JetPack Boost plugin for WordPress<\/a>.<\/p>\n\n\n\n<p>JetPack \u00e9 um conjunto de Plugins gratuito que oferece todos os tipos de ferramentas para otimizar a velocidade e o desempenho do seu site. Notavelmente, voc\u00ea pode escolher adiar o carregamento de JavaScript n\u00e3o essencial com um simples clique.<\/p>\n\n\n\n<p>Dentro do WordPress, v\u00e1 para <i>Plugins &gt; Adicionar Novo<\/i>.<\/p>\n\n\n\n<p>Em seguida, procure por Boost. Clique em \u201cInstalar\u201d e \u201cAtivar\u201d.<\/p>\n\n\n\n<p>Voc\u00ea deve ver um novo menu na sua navega\u00e7\u00e3o \u00e0 esquerda chamado &#8220;JetPack&#8221;.<\/p>\n\n\n\n<p>V\u00e1 para <i>JetPack &gt; Boost<\/i>.<\/p>\n\n\n\n<p>O plugin ir\u00e1 renderizar seu site em segundo plano e mostrar sua pontua\u00e7\u00e3o, al\u00e9m de op\u00e7\u00f5es para melhoria. Para adiar JS n\u00e3o essencial, basta clicar na altern\u00e2ncia para ativ\u00e1-lo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost.jpg\" alt=\"Captura de tela do plugin JetPack Boost para WordPress\" class=\"wp-image-40111 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Finalmente: <b>Reestruture o CSS (estiliza\u00e7\u00e3o).<\/b><\/p>\n\n\n\n<p>Se voc\u00ea \u00e9 familiarizado com CSS, voc\u00ea sabe que \u00e9 comum colocar todos os seus estilos em um grande bloco de c\u00f3digo e carreg\u00e1-los todos em um arquivo padr\u00e3o como style.css.<\/p>\n\n\n\n<p>N\u00e3o est\u00e1 <i>errado<\/i>. Apenas n\u00e3o \u00e9 muito eficiente.<\/p>\n\n\n\n<p>Para melhorar o FCP, voc\u00ea pode otimizar a estrutura do seu CSS:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Remova todos os estilos que se aplicam ao conte\u00fado que faz parte do FCP (qualquer coisa &#8220;acima da dobra.&#8221;)<\/li>\n\n\n\n<li>Adicione esses estilos como um bloco de estilo inline no cabe\u00e7alho do seu site.<\/li>\n\n\n\n<li>Carregue os estilos restantes de forma ass\u00edncrona com uma fun\u00e7\u00e3o de \u201cpreload\u201d (mostrada abaixo.)<\/li>\n\n\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;preload&quot; href=&quot;styles.css&quot; as=&quot;style&quot; onload=&quot;this.onload=null;this.rel=&#039;stylesheet&#039;&quot;&gt;\n&amp;lt;noscript&gt;&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;&amp;lt;\/noscript&gt;\n<\/pre><\/div>\n\n\n<p>Alternativamente, se voc\u00ea tem muitos estilos separados para diferentes dispositivos e navegadores, voc\u00ea pode querer dividir sua folha de estilos em m\u00faltiplos arquivos e usar uma <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noopener\">consulta de m\u00eddia @import para carregar apenas os estilos apropriados<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimizing-images-and-videos\">Otimizando Imagens e V\u00eddeos<\/h4>\n\n\n\n<p>Uma vez que o FCP \u00e9 principalmente sobre otimiza\u00e7\u00e3o para os primeiros cent\u00edmetros no topo da p\u00e1gina, n\u00e3o entraremos em muitos detalhes sobre otimiza\u00e7\u00e3o para imagens e v\u00eddeos aqui.<\/p>\n\n\n\n<p>Mas se o seu cabe\u00e7alho tem muitas imagens ou voc\u00ea tem um v\u00eddeo no topo da p\u00e1gina, ent\u00e3o pode valer a pena investigar como otimizar esses ativos para melhorar a velocidade de carregamento inicial. Veja abaixo para mais detalhes sobre como abordar a otimiza\u00e7\u00e3o.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-a-content-delivery-network-cdn\">Usando uma Rede de Distribui\u00e7\u00e3o de Conte\u00fado (CDN)<\/h4>\n\n\n\n<p>Igual ao acima. Os CDNs podem ajudar a carregar toda a sua p\u00e1gina mais rapidamente, o que proporciona um pequeno impulso ao FCP. Veja abaixo para mais detalhes sobre o uso de um CDN.<\/p>\n\n\n\n<h2 id=\"h-2-first-input-delay-fid-total-blocking-time-tbt-and-time-to-interactive-tti\" class=\"wp-block-heading\">#2 &#8211; First Input Delay (FID), Total Blocking Time (TBT) e Time to Interactive (TTI)<\/h2>\n\n\n\n<p>Agora vamos falar sobre compensa\u00e7\u00f5es.<\/p>\n\n\n\n<p>Se voc\u00ea apenas prestasse aten\u00e7\u00e3o ao First Contentful Paint, poderia pensar que tudo o que precisa fazer para melhorar sua pontua\u00e7\u00e3o no PageSpeed Insights \u00e9 adiar e carregar todos os seus recursos mais tarde para fazer com que a parte superior do seu site carregue rapidamente.<\/p>\n\n\n\n<p>Mas se o site <i>parece <\/i>carregar rapidamente, mas eu n\u00e3o posso realmente interagir com ele, ent\u00e3o isso tamb\u00e9m \u00e9 uma experi\u00eancia ruim para o usu\u00e1rio.<\/p>\n\n\n\n<p>Insira: Primeiro Atraso na Entrada.<\/p>\n\n\n\n<p>O Primeiro Atraso na Entrada tamb\u00e9m est\u00e1 relacionado ao Tempo Total de Bloqueio (TBT) e \u00e0s m\u00e9tricas de Tempo para Interatividade (TTI).<\/p>\n\n\n\n<p>Vamos desempacotar cada um destes e como eles est\u00e3o relacionados, mas s\u00e3o diferentes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-first-input-delay\">O que \u00e9 o Primeiro Atraso de Entrada?<\/h3>\n\n\n\n<p>O First Input Delay (FID) \u00e9 o tempo que leva para o navegador responder ao primeiro input ou intera\u00e7\u00e3o do usu\u00e1rio (por exemplo, clicar em um link ou bot\u00e3o). O desempenho do seu site impacta no atraso porque a maioria das intera\u00e7\u00f5es n\u00e3o pode ser processada enquanto o navegador est\u00e1 carregando ou renderizando o c\u00f3digo.<\/p>\n\n\n\n<p>Em outras palavras, se seu c\u00f3digo demorar muito para terminar de carregar, isso impedir\u00e1 que o usu\u00e1rio interaja com o site, e haver\u00e1 um atraso ou tempo de espera entre o momento em que eles clicam e quando a a\u00e7\u00e3o ocorre.<\/p>\n\n\n\n<p>Esta m\u00e9trica \u00e9 medida em milissegundos e baseada em dados reais de usu\u00e1rios.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bom: &lt; 100ms<\/li>\n\n\n\n<li>Precisa Melhorar: 100 &#8211; 300ms<\/li>\n\n\n\n<li>Ruim: &gt; 300ms<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-time-to-interactive-tti\">O que \u00e9 Tempo para Interativo (TTI)?<\/h3>\n\n\n\n<p>Tempo at\u00e9 se Tornar Interativo \u00e9 o tempo que leva para a p\u00e1gina se tornar &#8220;confiavelmente interativa&#8221;.<\/p>\n\n\n\n<p>Google define \u201cinteratividade confi\u00e1vel\u201d como quando o thread principal do navegador est\u00e1 livre por pelo menos 5 segundos, tornando a p\u00e1gina totalmente interativa para o usu\u00e1rio.<\/p>\n\n\n\n<p>Esta \u00e9 uma m\u00e9trica medida pelo Lighthouse do Google, portanto, n\u00e3o \u00e9 baseada em dados reais de usu\u00e1rios. Em vez disso, \u00e9 medida sob crit\u00e9rios espec\u00edficos e controlados.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-total-blocking-time-tbt\">O que \u00e9 Tempo Total de Bloqueio (TBT)?<\/h3>\n\n\n\n<p>O Tempo Total de Bloqueio mede o per\u00edodo completo de tempo entre FCP e TTI.<\/p>\n\n\n\n<p>Em outras palavras, o rel\u00f3gio n\u00e3o come\u00e7a a contar at\u00e9 que o topo da p\u00e1gina seja renderizado, e ent\u00e3o ele para depois que a p\u00e1gina \u00e9 considerada &#8220;confiavelmente interativa&#8221; ou 5 segundos ap\u00f3s o thread principal estar livre.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-first-input-delay-vs-time-to-interactive-vs-total-blocking-time\">Atraso na Primeira Entrada vs Tempo para Interatividade vs Tempo Total de Bloqueio<\/h3>\n\n\n\n<p>Estas tr\u00eas m\u00e9tricas est\u00e3o relacionadas, mas n\u00e3o s\u00e3o id\u00eanticas.<\/p>\n\n\n\n<p>O Atraso na Primeira Entrada \u00e9 baseado em dados reais de usu\u00e1rios e nos Principais Indicadores Web. TTI e TBT s\u00e3o medidos pelo relat\u00f3rio de desempenho no PageSpeed Insights, fornecido pelo Lighthouse do Google.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"2560\" height=\"1920\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-scaled.jpg\" alt=\"Atraso na Primeira Entrada vs Tempo para Interativo vs Tempo Total de Bloqueio\" class=\"wp-image-40112 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-scaled.jpg 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-300x225.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1024x768.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-768x576.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1536x1152.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-2048x1536.jpg 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-600x450.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1200x900.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-730x548.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1460x1095.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-784x588.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1568x1176.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-877x658.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1754x1316.jpg.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/1920;\" \/><\/figure>\n\n\n\n<p>Em termos de melhorar o desempenho dessas tr\u00eas m\u00e9tricas, as solu\u00e7\u00f5es s\u00e3o semelhantes, mas n\u00e3o id\u00eanticas. Notavelmente, solu\u00e7\u00f5es para melhorar o FID que envolvem adiar a renderiza\u00e7\u00e3o de JavaScript n\u00e3o melhorar\u00e3o o TTI ou TBT porque o JavaScript ainda precisa ser carregado.<\/p>\n\n\n\n<p>Mas solu\u00e7\u00f5es como remover, minimizar e fazer Cache devem ajudar a melhorar todas as tr\u00eas m\u00e9tricas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-fid-tti-and-tbt\">T\u00e9cnicas para Melhorar FID, TTI e TBT<\/h3>\n\n\n\n<p>De longe, o maior impacto no FID \u00e9 o JavaScript carregado na sua p\u00e1gina.<\/p>\n\n\n\n<p>Voc\u00ea pode pensar em JavaScript como um trilho de trem separado para o navegador. Enquanto ele est\u00e1 renderizando ou executando c\u00f3digo JavaScript, n\u00e3o pode completar outras tarefas ou responder a entradas como um usu\u00e1rio clicando em um link (o \u201cthread principal\u201d precisa estar livre para que o navegador possa responder).<\/p>\n\n\n\n<p>Portanto, quanto mais tempo ele gasta lendo e executando o JavaScript quando a p\u00e1gina \u00e9 carregada pela primeira vez, maior ser\u00e1 o atraso se o usu\u00e1rio come\u00e7ar a interagir com a p\u00e1gina.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-reduce-the-impact-of-third-party-code\">Reduza o Impacto do C\u00f3digo de Terceiros<\/h4>\n\n\n\n<p>Um suspeito comum para a resposta lenta de entrada \u00e9 que o site ainda est\u00e1 carregando todos os tipos de ferramentas, widgets e aplicativos de terceiros no seu site.<\/p>\n\n\n\n<p>Toda vez que voc\u00ea adiciona coisas como Facebook, Drift, Intercom, HotJar ou outras ferramentas e servi\u00e7os de terceiros ao seu site, \u00e9 adicionado um pouco de c\u00f3digo que precisar\u00e1 ser carregado e renderizado na p\u00e1gina.<\/p>\n\n\n\n<p>Se voc\u00ea tem muitos desses servi\u00e7os, pode demorar um tempo para carregar todos.<\/p>\n\n\n\n<p>Pior ainda, voc\u00ea n\u00e3o tem controle algum sobre a rapidez com que esses recursos s\u00e3o carregados no seu site. Ent\u00e3o, se o navegador estiver tentando buscar algum JavaScript de um site de terceiros em um servidor lento, isso pode causar atrasos significativos.<\/p>\n\n\n\n<p>Vamos consertar isso.<\/p>\n\n\n\n<p>Op\u00e7\u00e3o #1: <b>Excluir todas as ferramentas de terceiros n\u00e3o utilizadas.<\/b><\/p>\n\n\n\n<p>\u00c9 prov\u00e1vel que voc\u00ea tenha instalado todos os tipos de servi\u00e7os, plugins e ferramentas em seu site ao longo dos anos. E voc\u00ea provavelmente usa apenas alguns deles.<\/p>\n\n\n\n<p>Agora \u00e9 a hora de deletar ou desinstalar aqueles que voc\u00ea n\u00e3o est\u00e1 usando ativamente.<\/p>\n\n\n\n<p>Para obter uma lista completa dos JavaScripts de terceiros que est\u00e3o sendo carregados em sua p\u00e1gina, consulte seu relat\u00f3rio do PageSpeed Insights ou <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noopener\">execute um relat\u00f3rio Lighthouse separado<\/a>.<\/p>\n\n\n\n<p>Voc\u00ea dever\u00e1 ver uma lista de todos os scripts que est\u00e3o sendo carregados e quanto tempo eles levam:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"960\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools.jpg\" alt=\"Exclua todas as ferramentas de terceiros n\u00e3o utilizadas. \u00c9 prov\u00e1vel que voc\u00ea tenha instalado todos os tipos de servi\u00e7os, plugins e ferramentas em seu site ao longo dos anos.\" class=\"wp-image-40113 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-300x180.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-1024x614.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-768x461.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-1536x922.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-600x360.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1200x720.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-730x438.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1460x876.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-784x470.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1568x941.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-877x526.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/960;\" \/><\/figure>\n\n\n\n<p>Agora, usando essa informa\u00e7\u00e3o, voc\u00ea pode decidir quais desses s\u00e3o cr\u00edticos e quais podem ser removidos com seguran\u00e7a.<\/p>\n\n\n\n<p>Dependendo dos servi\u00e7os que voc\u00ea deseja excluir, pode ser necess\u00e1rio remover manualmente o c\u00f3digo do seu site, desinstalar um plugin do WordPress ou remover o c\u00f3digo que foi adicionado via Google Tag Manager para melhorar o desempenho da p\u00e1gina.<\/p>\n\n\n\n<p>Op\u00e7\u00e3o #2: <b>Carregar JavaScript de forma ass\u00edncrona<\/b>.<\/p>\n\n\n\n<p>A menos que seja essencial para renderizar o FCP, \u00e9 quase sempre aconselh\u00e1vel renderizar scripts de terceiros de forma ass\u00edncrona. Se voc\u00ea tem um JavaScript vital que est\u00e1 desacelerando o FID, mas n\u00e3o pode remov\u00ea-lo, ent\u00e3o <a href=\"https:\/\/web.dev\/efficiently-load-third-party-javascript\/\" target=\"_blank\" rel=\"noopener\">tente faz\u00ea-lo carregar de forma ass\u00edncrona<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-minimizing-javascript-execution-time\">Minimizando o Tempo de Execu\u00e7\u00e3o do JavaScript<\/h4>\n\n\n\n<p>O c\u00f3digo de terceiros pode ser um vil\u00e3o, mas e o nosso pr\u00f3prio c\u00f3digo que colocamos no nosso site?<\/p>\n\n\n\n<p>\u00c9 prov\u00e1vel que n\u00e3o seja inocente no tempo lento de carregamento.<\/p>\n\n\n\n<p>Se voc\u00ea tem JavaScript n\u00e3o essencial que adicionou ao seu pr\u00f3prio site, talvez queira remov\u00ea-lo.<\/p>\n\n\n\n<p>Analisando o relat\u00f3rio do PageSpeed Insights, voc\u00ea dever\u00e1 ver uma se\u00e7\u00e3o que menciona JavaScript n\u00e3o utilizado:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript.jpg\" alt=\"Uma se\u00e7\u00e3o de JavaScript n\u00e3o utilizado no relat\u00f3rio PSI\" class=\"wp-image-40114 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-1024x448.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-1536x672.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1200x525.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-730x319.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1460x639.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1568x686.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/700;\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se o JavaScript estiver 100% sem uso, considere exclu\u00ed-lo<\/li>\n\n\n\n<li>Se o JavaScript \u00e9 usado em outras p\u00e1ginas, considere entreg\u00e1-lo seletivamente apenas nas p\u00e1ginas onde \u00e9 necess\u00e1rio (tamb\u00e9m conhecido como &#8220;<a href=\"https:\/\/web.dev\/reduce-javascript-payloads-with-code-splitting\/\" target=\"_blank\" rel=\"noopener\">code splitting<\/a>&#8220;)<\/li>\n\n\n<\/ul>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode explorar op\u00e7\u00f5es para melhorar o tempo de carregamento do JavaScript.<\/p>\n\n\n\n<p>A maneira mais comum de acelerar o tempo de carregamento \u00e9 reduzir o tamanho do arquivo. E com JavaScript, existem duas estrat\u00e9gias principais:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Minifica\u00e7\u00e3o \u2013 Remo\u00e7\u00e3o de todos os espa\u00e7os, quebras de linha, etc., no c\u00f3digo<\/li>\n\n\n\n<li>Compress\u00e3o \u2013 \u201cCompacta\u00e7\u00e3o\u201d do arquivo para torn\u00e1-lo menor<\/li>\n\n\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/web.dev\/reduce-network-payloads-using-text-compression\/\" target=\"_blank\" rel=\"noopener\">Qualquer uma dessas op\u00e7\u00f5es poderia tornar seu c\u00f3digo mais eficiente<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-prioritizing-visible-content\">Priorizando o Conte\u00fado Vis\u00edvel<\/h4>\n\n\n\n<p>Se voc\u00ea est\u00e1 principalmente preocupado em melhorar o FID, ent\u00e3o pode querer focar em adiar o JavaScript e outros elementos da p\u00e1gina para focar apenas no conte\u00fado dentro da primeira pintura com conte\u00fado.<\/p>\n\n\n\n<p>Afinal, os usu\u00e1rios n\u00e3o podem interagir com elementos que n\u00e3o foram renderizados.<\/p>\n\n\n\n<h2 id=\"h-3-largest-contentful-paint-lcp\" class=\"wp-block-heading\">#3 &#8211; Maior Pintura de Conte\u00fado Significativo (LCP)<\/h2>\n\n\n\n<p>Se o FCP \u00e9 o tempo de 0 a 60 do seu carro, ent\u00e3o o LCP \u00e9 a sua milha final.<\/p>\n\n\n\n<p>Ok, para aqueles que n\u00e3o s\u00e3o entusiastas da tecnologia, o que quero dizer \u00e9 que o LCP mede a rapidez com que o usu\u00e1rio pode ver o conte\u00fado \u201cprincipal\u201d na sua p\u00e1gina web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-largest-contentful-paint\">O que \u00e9 o Largest Contentful Paint?<\/h3>\n\n\n\n<p>Largest Contentful Paint (LCP) \u00e9 uma m\u00e9trica que mede quanto tempo leva para o maior bloco de conte\u00fado em uma p\u00e1gina ficar vis\u00edvel para o usu\u00e1rio. Ao contr\u00e1rio do FCP, ela observa o tempo de carregamento do maior bloco de imagem ou texto na p\u00e1gina, independentemente de sua posi\u00e7\u00e3o ou ordem.<\/p>\n\n\n\n<p>Mede o maior bloco de conte\u00fado com base em suas dimens\u00f5es dentro da visualiza\u00e7\u00e3o do usu\u00e1rio. Em outras palavras, se houver um \u00fanico &lt;div&gt; com muito texto ou uma \u00fanica imagem que ocupe uma grande parte da tela, isso pode ser considerado o maior bloco de conte\u00fado e usado para calcular o LCP.<\/p>\n\n\n\n<p>\u00c9 medido em segundos e baseado em dados de usu\u00e1rios reais (ou &#8220;em campo&#8221;):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bom: &lt; 2.5s<\/li>\n\n\n\n<li>Precisa Melhorar: 2.5 &#8211; 4s<\/li>\n\n\n\n<li>Ruim: &gt; 4s<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-lcp\">T\u00e9cnicas para Melhorar o LCP<\/h3>\n\n\n\n<p>Antes de come\u00e7ar a trabalhar para otimizar seu LCP, voc\u00ea pode querer determinar qual parte da sua p\u00e1gina \u00e9 considerada o maior bloco de conte\u00fado.<\/p>\n\n\n\n<p>Isso pode ajud\u00e1-lo a direcionar seus esfor\u00e7os para melhorar o desempenho em uma p\u00e1gina espec\u00edfica ou modelo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"750\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost.jpg\" alt=\"Captura de tela da p\u00e1gina inicial da DreamHost\" class=\"wp-image-40115 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-300x141.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-1024x480.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-768x360.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-1536x720.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-600x281.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1200x563.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-730x342.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1460x684.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-784x368.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1568x735.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-877x411.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/750;\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode fazer isso <a href=\"https:\/\/www.twicpics.com\/blog\/how-to-find-the-lcp-element-a-complete-guide\" target=\"_blank\" rel=\"noopener\">usando o Chrome DevTools no seu navegador para identificar o recurso LCP<\/a> em qualquer p\u00e1gina espec\u00edfica.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimize-loading-priority\">Otimizar Prioridade de Carregamento<\/h4>\n\n\n\n<p>Nas se\u00e7\u00f5es acima, discutimos op\u00e7\u00f5es como usar estrat\u00e9gias de ass\u00edncrono ou adiamento para acelerar a renderiza\u00e7\u00e3o de partes chave da p\u00e1gina.<\/p>\n\n\n\n<p>Voc\u00ea pode querer considerar essas op\u00e7\u00f5es aqui como uma primeira linha de escolha.<\/p>\n\n\n\n<p>Remover ou adiar recursos que bloqueiam a renderiza\u00e7\u00e3o pode ajudar o conte\u00fado principal a carregar mais rapidamente. Mas tenha em mente que, se esses recursos alterarem significativamente o layout ou a estrutura da p\u00e1gina, isso poderia mudar qual bloco \u00e9 considerado o maior e desacelerar o LCP em vez de melhor\u00e1-lo!<\/p>\n\n\n\n<p>Voc\u00ea pode levar essa estrat\u00e9gia um passo adiante. Especialmente se o maior bloco de conte\u00fado for uma imagem.<\/p>\n\n\n\n<p>Voc\u00ea pode aplicar o que \u00e9 conhecido como framework <a href=\"https:\/\/web.dev\/apply-instant-loading-with-prpl\/\" target=\"_blank\" rel=\"noopener\">PRPL<\/a> (Preload, Render, Precache, Lazy load) para direcionar recursos espec\u00edficos em sua p\u00e1gina e para carregar primeiro na fila. Se essa imagem for o maior bloco de conte\u00fado, ent\u00e3o isso melhorar\u00e1 dramaticamente sua pontua\u00e7\u00e3o LCP.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Lazy Loading<\/h3>\n    <p>Lazy Loading \u00e9 um padr\u00e3o de design utilizado no desenvolvimento de software para melhorar o desempenho e reduzir o consumo de recursos. Consiste em adiar a inicializa\u00e7\u00e3o ou carregamento de um objeto at\u00e9 que seja necess\u00e1rio.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/lazy-loading\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Al\u00e9m das op\u00e7\u00f5es de renderiza\u00e7\u00e3o ass\u00edncrona, este framework oferece outras estrat\u00e9gias para otimizar o caminho de renderiza\u00e7\u00e3o.<\/p>\n\n\n\n<p>Uma das maneiras mais simples \u00e9 o pr\u00e9-carregamento de recursos cr\u00edticos.<\/p>\n\n\n\n<p>Voc\u00ea pode fazer isso simplesmente adicionando um pequeno trecho ao cabe\u00e7alho do seu site que indica ao navegador para priorizar imagens cr\u00edticas, fontes, estilos ou scripts, que podem ser essenciais para a maior se\u00e7\u00e3o de conte\u00fado.<\/p>\n\n\n\n<p>Por exemplo, se voc\u00ea tem uma imagem de destaque que \u00e9 o maior bloco da p\u00e1gina, ent\u00e3o voc\u00ea pode querer pr\u00e9-carregar essa imagem em cada p\u00e1gina usando um trecho como este:<\/p>\n\n\n\n<p><code>&lt;link rel=\"preload\" as=\"image\" href=\"image1.png\"&gt;<\/code><\/p>\n\n\n\n<p>Isso indica ao navegador para come\u00e7ar a carregar este recurso imediatamente, antes de ser descoberto na p\u00e1gina.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimize-file-resource-size\">Otimizar Tamanho do Arquivo (Recurso)<\/h4>\n\n\n\n<p>Agora vamos falar sobre tamanho de arquivo.<\/p>\n\n\n\n<p>Arquivos maiores demoram mais para carregar. Isso se aplica a imagens, scripts, v\u00eddeos, fontes e qualquer outra coisa em sua p\u00e1gina que possa ser carregada como parte do maior bloco de conte\u00fado.<\/p>\n\n\n\n<p>Uma maneira de acelerar sua pontua\u00e7\u00e3o LCP \u00e9 a otimiza\u00e7\u00e3o do tamanho do arquivo.<\/p>\n\n\n\n<p>As estrat\u00e9gias para otimizar o tamanho do arquivo depender\u00e3o do formato do arquivo.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-images\">Otimizando Imagens<\/h5>\n\n\n\n<p>Comumente, voc\u00ea obter\u00e1 grandes ganhos comprimindo e otimizando suas imagens.<\/p>\n\n\n\n<p>Comece por avaliar estas \u00e1reas para melhoria:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Formato<\/b>: Diferentes formatos de imagem oferecem n\u00edveis variados de compress\u00e3o e qualidade. Para a maioria dos casos de uso na web, JPEG, PNG e WebP s\u00e3o os formatos mais comuns.\n<ul class=\"wp-block-list\">\n<li>JPEG \u00e9 geralmente melhor para fotos.<\/li>\n\n\n\n<li>PNG \u00e9 geralmente melhor para imagens desenhadas com texto ou bordas n\u00edtidas.<\/li>\n\n\n\n<li>WebP \u00e9 um formato mais eficiente que oferece melhor compress\u00e3o sem sacrificar a qualidade, mas pode n\u00e3o ser suportado por todos os navegadores.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n\n<li><b>Compress\u00e3o<\/b>: Em muitos casos, voc\u00ea pode comprimir o tamanho do arquivo de uma imagem sem perder muita ou nenhuma qualidade visual.\n<ul class=\"wp-block-list\">\n<li>Ferramentas de compress\u00e3o de imagem online: <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">TinyPNG<\/a> (para PNG e JPEG), <a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noopener\">Squoosh<\/a> (para WebP).<\/li>\n\n\n\n<li>Ferramentas de compress\u00e3o de imagem do WordPress: <a href=\"https:\/\/shortpixel.com\/\" target=\"_blank\" rel=\"noopener\">ShortPixel<\/a>, <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener\">Imagify<\/a>.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n\n<li><b>Tamanho da imagem<\/b>: Se voc\u00ea est\u00e1 fazendo upload de imagens brutos ou fotos para o seu site e depois adicionando-as \u00e0 sua p\u00e1gina, \u00e9 prov\u00e1vel que elas sejam muito maiores do que o necess\u00e1rio, o que diminui o tempo de carregamento.\n<ul class=\"wp-block-list\">\n<li>Redimensione suas imagens e fa\u00e7a upload apenas do tamanho necess\u00e1rio.<\/li>\n\n\n\n<li>Use um <a href=\"https:\/\/wordpress.org\/plugins\/resize-image-after-upload\/\" target=\"_blank\" rel=\"noopener\">plugin do WordPress para redimensionar automaticamente as imagens<\/a> quando forem carregadas.<\/li>\n\n\n\n<li>Use os atributos <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" target=\"_blank\" rel=\"noopener\">&#8220;srcset&#8221; e &#8220;sizes&#8221; na tag &#8220;img&#8221;<\/a> para especificar v\u00e1rias fontes de imagem e tamanhos. O navegador escolhe automaticamente a imagem mais apropriada com base no tamanho da tela e resolu\u00e7\u00e3o do usu\u00e1rio.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-scripts-and-styles\">Otimizando Scripts e Estilos<\/h5>\n\n\n\n<p>Qualquer recurso necess\u00e1rio para renderizar o maior bloco de conte\u00fado precisar\u00e1 ser totalmente carregado antes que o LCP seja calculado.<\/p>\n\n\n\n<p>Isso inclui scripts e estilos que impactam seu maior bloco de conte\u00fado.<\/p>\n\n\n\n<p>Usando algumas das t\u00e9cnicas que discutimos anteriormente, voc\u00ea pode melhorar o LCP otimizando o tamanho do arquivo e o caminho de renderiza\u00e7\u00e3o para JavaScript, CSS, etc.:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Minificar os arquivos.<\/li>\n\n\n\n<li>Divis\u00e3o de c\u00f3digo para reduzir o tamanho do arquivo.<\/li>\n\n\n\n<li>Adicionar estilos e scripts em linha.<\/li>\n\n\n\n<li>Pr\u00e9-carregar ou <em>cache<\/em>.<\/li>\n\n\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-videos\">Otimizando V\u00eddeos<\/h5>\n\n\n\n<p>Se o seu recurso LCP pode ser um v\u00eddeo, ent\u00e3o voc\u00ea deve considerar maneiras de otimizar v\u00eddeos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hospede o v\u00eddeo no YouTube ou outro servi\u00e7o com uma CDN r\u00e1pida em vez de fazer o upload diretamente.<\/li>\n\n\n\n<li>Comprima o tamanho do arquivo de v\u00eddeo.<\/li>\n\n\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-fonts\">Otimizando Fontes<\/h5>\n\n\n\n<p>Se o recurso LCP em quest\u00e3o for texto e esse texto usar uma fonte importada (por exemplo, do Google Fonts), ent\u00e3o voc\u00ea pode otimizar melhorando a velocidade de carregamento do arquivo de fonte.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use apenas <a href=\"http:\/\/caniuse.com\/#feat=woff2\" target=\"_blank\" rel=\"noopener\">fontes de arquivo WOFF e WOFF2.0<\/a> para a web.<\/li>\n\n\n\n<li>Pr\u00e9-carregue o arquivo de fonte usando uma tag link rel (veja acima).<\/li>\n\n\n\n<li>Explore mais op\u00e7\u00f5es para <a href=\"https:\/\/web.dev\/reduce-webfont-size\/\" target=\"_blank\" rel=\"noopener\">reduzir ainda mais o tempo de carregamento do tamanho do arquivo de fonte<\/a>.<\/li>\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-implement-a-cdn\">Implementar uma CDN<\/h4>\n\n\n\n<p>Pense em uma CDN como uma faixa HOV em uma autoestrada.<\/p>\n\n\n\n<p>Ajuda o navegador a baixar recursos mais rapidamente ao <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/um-guia-abrangente-para-cache-de-sites\/\" target=\"_blank\" rel=\"noopener\">cachear<\/a> em servidores pelo mundo.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CDN<\/h3>\n    <p>CDN \u00e9 a sigla para u201cContent Delivery Networku201d. Refere-se a uma rede de servidores web distribu\u00eddos geograficamente (e seus centros de dados). As entidades que comp\u00f5em um CDN colaboram para garantir a entrega r\u00e1pida de conte\u00fado via internet.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/cdn\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>A principal coisa a saber \u00e9 esta: Implementar uma CDN pode melhorar dramaticamente o desempenho do site de forma geral. E, especialmente quando se trata de LCP, pode ajudar a renderizar imagens, scripts e outros ativos mais rapidamente do que o servidor normal do seu provedor de hospedagem.<\/p>\n\n\n\n<p>Para implementar um CDN:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Selecione um provedor de CDN<\/b>: Existem v\u00e1rios provedores de CDN populares dispon\u00edveis no mercado, como <a href=\"http:\/\/cloudflare.com\" target=\"_blank\" rel=\"noopener\">Cloudflare<\/a>, <a href=\"https:\/\/aws.amazon.com\/cloudfront\/\" target=\"_blank\" rel=\"noopener\">Amazon CloudFront<\/a>, <a href=\"https:\/\/cloud.google.com\/cdn\" target=\"_blank\" rel=\"noopener\">Google Cloud CDN<\/a> e <a href=\"https:\/\/www.fastly.com\/\" target=\"_blank\" rel=\"noopener\">Fastly<\/a>.<\/li>\n\n\n\n<li><b>Crie uma conta e configure o CDN<\/b>: Depois de selecionar um provedor de CDN, inscreva-se para uma conta e configure as configura\u00e7\u00f5es do CDN. Isso normalmente envolve criar uma zona de CDN, configurar regras de cache e configurar a criptografia SSL\/TLS.<\/li>\n\n\n\n<li><b>Integre o CDN ao seu site<\/b>: Para integrar o CDN ao seu site, voc\u00ea precisar\u00e1 atualizar os URLs do conte\u00fado que deseja servir atrav\u00e9s do CDN. Isso envolve alterar os nameservers para apontar para o CDN em vez do seu servidor normal.<\/li>\n\n\n\n<li><b>Teste o CDN<\/b>: Ap\u00f3s integrar o CDN ao seu site, execute testes para garantir que o conte\u00fado est\u00e1 sendo servido atrav\u00e9s do CDN e que o desempenho do LCP melhorou.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Para um guia mais detalhado, confira nosso artigo sobre <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-de-uso-de-cdn-com-wordpress\/\" target=\"_blank\" rel=\"noopener\">usar um CDN com WordPress<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-improve-server-performance\">Melhorar o Desempenho do Servidor<\/h4>\n\n\n\n<p>Por \u00faltimo, mas certamente n\u00e3o menos importante, o desempenho do servidor do seu <a href=\"https:\/\/www.dreamhost.com\/pt\/\" target=\"_blank\" rel=\"noopener\">web host<\/a> tamb\u00e9m desempenha um papel fundamental no LCP.<\/p>\n\n\n\n<p>Cobriremos isso completamente quando mergulharmos no TTFB; basta dizer que o navegador s\u00f3 pode baixar recursos t\u00e3o rapidamente quanto o servidor permite. Se demorar muito para o servidor responder, demorar\u00e1 muito para o recurso carregar.<\/p>\n\n\n\n<h2 id=\"h-4-cumulative-layout-shift-cls\" class=\"wp-block-heading\">#4 &#8211; Deslocamento Cumulativo de Layout (CLS)<\/h2>\n\n\n\n<p>Voc\u00ea sabia que sites podem dan\u00e7ar?<\/p>\n\n\n\n<p>Bem, mais ou menos. E n\u00e3o muito bem.<\/p>\n\n\n\n<p>Mais precisamente, eles podem mudar. Os elementos na p\u00e1gina se movem enquanto diferentes imagens, scripts, estilos e textos s\u00e3o renderizados at\u00e9 que a p\u00e1gina esteja completamente carregada.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-cumulative-layout-shift\">O que \u00e9 Deslocamento de Layout Cumulativo?<\/h3>\n\n\n\n<p>A mudan\u00e7a de layout cumulativa mede o quanto as imagens, textos, bot\u00f5es e outros elementos na sua p\u00e1gina se movem na tela enquanto o usu\u00e1rio espera que a p\u00e1gina carregue. Um CLS menor \u00e9 considerado melhor para a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<p>Isso n\u00e3o \u00e9 realmente surpreendente se voc\u00ea considerar seus pr\u00f3prios h\u00e1bitos de navega\u00e7\u00e3o.<\/p>\n\n\n\n<p>Se voc\u00ea se sente como se estivesse jogando bate-bate enquanto tenta clicar em um link que continua se movendo para baixo na p\u00e1gina, provavelmente ficar\u00e1 frustrado e sair\u00e1 do site por completo. (Ol\u00e1, taxa de rejei\u00e7\u00e3o!)<\/p>\n\n\n\n<p>Esta experi\u00eancia pode ser especialmente irritante ao navegar em um dispositivo m\u00f3vel.<\/p>\n\n\n\n<p>CLS \u00e9 um dado de campo de usu\u00e1rios reais, e \u00e9 medido como uma pontua\u00e7\u00e3o que combina a &#8220;fra\u00e7\u00e3o de impacto&#8221; (qual porcentagem dos elementos na visualiza\u00e7\u00e3o foi deslocada) e a &#8220;fra\u00e7\u00e3o de dist\u00e2ncia&#8221; (qu\u00e3o longe eles se moveram em rela\u00e7\u00e3o ao tamanho total da tela).<\/p>\n\n\n\n<p>Existe tamb\u00e9m uma designa\u00e7\u00e3o especial para &#8220;mudan\u00e7as esperadas&#8221; (por exemplo, clicar em um bot\u00e3o que abre uma nova se\u00e7\u00e3o na p\u00e1gina) e &#8220;mudan\u00e7as inesperadas&#8221;, que n\u00e3o s\u00e3o provocadas pela entrada do usu\u00e1rio.<\/p>\n\n\n\n<p>O CLS \u00e9 medido multiplicando a fra\u00e7\u00e3o de impacto e a fra\u00e7\u00e3o de dist\u00e2ncia:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bom: &lt; 0.1<\/li>\n\n\n\n<li>Precisa Melhorar: 0.1 &#8211; 0.25<\/li>\n\n\n\n<li>Ruim: &gt; 0.25<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-cls\">T\u00e9cnicas para Melhorar o CLS<\/h3>\n\n\n\n<p>As chances s\u00e3o de que, se voc\u00ea n\u00e3o est\u00e1 intencionalmente tentando enganar seus usu\u00e1rios movendo coisas na sua p\u00e1gina, seu CLS \u00e9 bastante baixo por padr\u00e3o, mas existem alguns erros inocentes que voc\u00ea pode cometer e que valem a pena corrigir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-define-the-sizes-of-all-images-and-videos\">Defina os Tamanhos de Todas as Imagens e V\u00eddeos<\/h4>\n\n\n\n<p>Um pequeno detalhe com um grande impacto. Se voc\u00ea n\u00e3o definir explicitamente o tamanho das imagens e v\u00eddeos na sua p\u00e1gina, isso pode levar a uma mudan\u00e7a no layout porque o navegador n\u00e3o tem certeza de quanto espa\u00e7o reservar para esse recurso.<\/p>\n\n\n\n<p>Isso \u00e9 t\u00e3o simples quanto adicionar o atributo para qualquer imagem ou v\u00eddeo na p\u00e1gina:<\/p>\n\n\n\n<p><code>&lt;img src=\"hero_image.jpg\" width=\"400\" height=\"400\"&gt;<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-avoid-ads-and-pop-ups-that-cause-layout-shifts\">Evite An\u00fancios e Pop-ups que Causam Deslocamentos de Layout<\/h4>\n\n\n\n<p>Voc\u00ea precisa pagar as contas de alguma forma, mas evite usar pop-ins ou pop-ups que alterem o layout da p\u00e1gina. Se n\u00e3o houver outra op\u00e7\u00e3o, use uma <a href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\" target=\"_blank\" rel=\"noopener\">caixa de propor\u00e7\u00e3o de aspecto CSS<\/a> para \u201creservar\u201d espa\u00e7o para an\u00fancios ou outras mensagens que carregam na p\u00e1gina \u00e0 medida que o usu\u00e1rio interage.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-choose-animations-wisely\">Escolha Anima\u00e7\u00f5es com Sabedoria<\/h4>\n\n\n\n<p>Com CSS moderno e JavaScript, podemos implementar todos os tipos de anima\u00e7\u00f5es legais e sofisticadas na p\u00e1gina.<\/p>\n\n\n\n<p>Mas, do ponto de vista do usu\u00e1rio, a fun\u00e7\u00e3o sempre prevalece sobre a forma.<\/p>\n\n\n\n<p>Remova quaisquer anima\u00e7\u00f5es que acionem mudan\u00e7as de layout, uma vez que cada mudan\u00e7a de estado pode contribuir para a mudan\u00e7a de layout geral e impactar sua pontua\u00e7\u00e3o de CLS.<\/p>\n\n\n\n<h2 id=\"h-5-interaction-to-next-paint-inp\" class=\"wp-block-heading\">#5 &#8211; Intera\u00e7\u00e3o at\u00e9 a Pr\u00f3xima Pintura (INP)<\/h2>\n\n\n\n<p>Como Jay-Z uma vez disse, \u201cN\u00e3o tenho paci\u00eancia. E odeio esperar.\u201d<\/p>\n\n\n\n<p><i>N\u00e3o \u00e9 mesmo?<\/i><\/p>\n\n\n\n<p>Embora j\u00e1 tenhamos abordado o atraso de entrada na primeira intera\u00e7\u00e3o com seu site (FID), o INP \u00e9 uma m\u00e9trica mais abrangente que avalia a responsividade geral do seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-interaction-to-next-paint\">O que \u00e9 Intera\u00e7\u00e3o at\u00e9 a Pr\u00f3xima Pintura?<\/h3>\n\n\n\n<p>Intera\u00e7\u00e3o at\u00e9 a Pr\u00f3xima Pintura mede quanto tempo leva para o pr\u00f3ximo \u201cpintura\u201d ou quadro atualizado no seu site aparecer ap\u00f3s o usu\u00e1rio interagir com um bot\u00e3o ou elemento da p\u00e1gina. Ele mede a capacidade de resposta geral do site e como as intera\u00e7\u00f5es se sentem fluidas.<\/p>\n\n\n\n<p>Isso \u00e9 especialmente importante para aplicativos web que requerem significativa intera\u00e7\u00e3o do usu\u00e1rio e podem parecer lentos e confusos se houver um atraso muito longo entre a a\u00e7\u00e3o e o resultado.<\/p>\n\n\n\n<p>INP \u00e9 medido em milissegundos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bom: &lt; 200ms<\/li>\n\n\n\n<li>Precisa de Melhoria: 200 &#8211; 500ms<\/li>\n\n\n\n<li>Ruim: &gt; 500ms<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-inp\">T\u00e9cnicas para Melhorar o INP<\/h3>\n\n\n\n<p>Se voc\u00ea est\u00e1 tendo problemas com INP, sinto muito por voc\u00ea, filho. (Desculpe, essa \u00e9 outra letra de Jay-Z.)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint.jpg\" alt=\"Analisando a Intera\u00e7\u00e3o at\u00e9 a Pr\u00f3xima Pintura\" class=\"wp-image-40116 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1024x512.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-768x384.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1536x768.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-600x300.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1200x600.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-730x365.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1460x730.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-784x392.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1568x784.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-877x439.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n\n<p>Felizmente, voc\u00ea pode dividir a maioria dos problemas em tr\u00eas problemas principais:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Atraso na entrada<\/li>\n\n\n\n<li>Atraso na intera\u00e7\u00e3o<\/li>\n\n\n\n<li>Atraso na apresenta\u00e7\u00e3o<\/li>\n\n\n<\/ol>\n\n\n\n<p>Esta \u00e9 a parte realmente complicada; Para diagnosticar o problema mais de perto, voc\u00ea precisar\u00e1 usar o <a href=\"https:\/\/web.dev\/optimize-inp\/\" target=\"_blank\" rel=\"noopener\">perfil de desempenho do Google Chrome ou a funcionalidade de registro do Lighthouse<\/a>.<\/p>\n\n\n\n<p>Aqui voc\u00ea pode ampliar uma intera\u00e7\u00e3o individual e ver onde ocorre o maior atraso.<\/p>\n\n\n\n<p>A partir da\u00ed, podemos procurar algumas solu\u00e7\u00f5es para cada um.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-input-delay\">Corrigindo o Atraso de Entrada<\/h4>\n\n\n\n<p>O atraso na entrada \u00e9 causado quando a thread principal est\u00e1 ocupada no momento da intera\u00e7\u00e3o. Isso significa que algo mais est\u00e1 acontecendo quando o clique ou a tecla s\u00e3o pressionados.<\/p>\n\n\n\n<p>Para corrigir, voc\u00ea vai querer investigar quais processos est\u00e3o sendo executados como parte do thread principal:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Remover ou otimizar JavaScript de terceiros.<\/li>\n\n\n\n<li>Use <a href=\"https:\/\/web.dev\/off-main-thread\/\" target=\"_blank\" rel=\"noopener\">web workers<\/a> para executar JavaScript fora do thread principal.<\/li>\n\n\n\n<li>Use listeners como isInputPending() para ceder o thread principal (esta \u00e9 a op\u00e7\u00e3o mais avan\u00e7ada.)<\/li>\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-interaction-delay\">Corrigindo Atraso de Intera\u00e7\u00e3o<\/h4>\n\n\n\n<p>Se a pr\u00f3pria intera\u00e7\u00e3o \u00e9 a culpada \u2013 o que significa que leva um longo tempo para a intera\u00e7\u00e3o ser realmente executada \u2013 ent\u00e3o voc\u00ea precisar\u00e1 refatorar o c\u00f3digo para esta entrada.<\/p>\n\n\n\n<p>A principal recomenda\u00e7\u00e3o aqui \u00e9 adiar c\u00e1lculos n\u00e3o essenciais.<\/p>\n\n\n\n<p>Em outras palavras, execute a parte da intera\u00e7\u00e3o que o usu\u00e1rio v\u00ea imediatamente e espera. Depois, ap\u00f3s atualizar o quadro, realize quaisquer outros c\u00e1lculos ou intera\u00e7\u00f5es nos bastidores.<\/p>\n\n\n\n<p>Imagine, por exemplo, que o usu\u00e1rio clica em um bot\u00e3o que abre uma janela e tamb\u00e9m registra um evento mostrando que ele clicou no bot\u00e3o. Voc\u00ea iria querer que seu c\u00f3digo abrisse a janela primeiro, &#8220;completando&#8221; a intera\u00e7\u00e3o do ponto de vista do usu\u00e1rio.<\/p>\n\n\n\n<p>Ent\u00e3o, uma vez que a intera\u00e7\u00e3o for conclu\u00edda, registre o evento que o usu\u00e1rio n\u00e3o ver\u00e1 ou experimentar\u00e1 diretamente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-presentation-delay\">Corrigindo o Atraso na Apresenta\u00e7\u00e3o<\/h4>\n\n\n\n<p>\u00c9 poss\u00edvel que a entrada e a intera\u00e7\u00e3o estejam ocorrendo de forma bastante r\u00e1pida, mas est\u00e1 demorando muito para o navegador atualizar a apresenta\u00e7\u00e3o com o novo quadro.<\/p>\n\n\n\n<p>Infelizmente, n\u00e3o h\u00e1 muita <i>reestrutura\u00e7\u00e3o<\/i> que possa ajudar com isso.<\/p>\n\n\n\n<p>Mas algumas coisas podem causar um atraso maior que o normal:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uso excessivo de <b>requestAnimationFrame()<\/b>. Cada vez que essa fun\u00e7\u00e3o \u00e9 chamada, cria-se um pequeno atraso. Portanto, procure casos em que ela possa ser usada com muita frequ\u00eancia ou desnecessariamente.<\/li>\n\n\n\n<li>Atributos &#8220;Async&#8221; descontrolados. Dependendo do contexto, alguns recursos que voc\u00ea marcou para renderiza\u00e7\u00e3o ass\u00edncrona podem ignorar a diretiva ou carregar de forma inesperada. Se isso acontecer, atrasar\u00e1 outros itens do caminho de renderiza\u00e7\u00e3o e o pr\u00f3ximo quadro.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"h-6-time-to-first-byte-ttfb\" class=\"wp-block-heading\">#6 &#8211; Tempo at\u00e9 o Primeiro Byte (TTFB)<\/h2>\n\n\n\n<p>Agora, encontramo-nos a pensar sobre aquele primeiro instante quando uma p\u00e1gina web \u00e9 carregada.<\/p>\n\n\n\n<p>Antes da p\u00e1gina come\u00e7ar a ser renderizada, o navegador do usu\u00e1rio precisa fazer contato com o servidor web, descobrir com quem est\u00e1 se conectando e obter instru\u00e7\u00f5es sobre o que come\u00e7ar a carregar e em que ordem.<\/p>\n\n\n\n<p>Aquele aperto de m\u00e3o inicial cont\u00e9m o primeiro byte de informa\u00e7\u00e3o. A rapidez com que esse byte chega \u00e9 como o tiro de partida no in\u00edcio de uma corrida de cavalos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-time-to-first-byte\">O que \u00e9 Tempo at\u00e9 o Primeiro Byte?<\/h3>\n\n\n\n<p>O Tempo at\u00e9 o Primeiro Byte \u00e9 o tempo que leva para o seu navegador passar por processos como busca DNS, apertos de m\u00e3o TCP e SSL, e configura\u00e7\u00e3o de conex\u00e3o para solicitar \u2013 e receber \u2013 os primeiros bytes de informa\u00e7\u00e3o de um servidor web. A velocidade de estabelecimento de conex\u00e3o com o servidor web depende quase inteiramente do pr\u00f3prio servidor e de como o site est\u00e1 hospedado.<\/p>\n\n\n\n<p>\u00c9 medido em milissegundos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bom: &lt; 800ms<\/li>\n\n\n\n<li>Precisa Melhorar: 800 &#8211; 1800ms<\/li>\n\n\n\n<li>Ruim: &gt; 1800ms<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-ttfb\">T\u00e9cnicas para Melhorar o TTFB<\/h3>\n\n\n\n<p>Voc\u00ea pode pensar no TTFB como o tempo que voc\u00ea passa na linha de partida antes de o pistola ser disparada. Qualquer coisa que atrase o sinal verde inicial ir\u00e1 adicionar tempo ao TTFB e ao tempo total de carregamento da p\u00e1gina.<\/p>\n\n\n\n<p>Ent\u00e3o, quais s\u00e3o suas op\u00e7\u00f5es para melhorar?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-eliminate-redirects\">Eliminar Redirecionamentos<\/h4>\n\n\n\n<p>Primeiramente, elimine os redirecionamentos de p\u00e1gina sempre que poss\u00edvel. Se voc\u00ea est\u00e1 redirecionando usu\u00e1rios de uma p\u00e1gina para outra, o tempo necess\u00e1rio para executar isso est\u00e1 dentro da janela TTFB, o que significa que voc\u00ea adicionar\u00e1 uma quantidade significativa de tempo \u00e0 sua pontua\u00e7\u00e3o.<\/p>\n\n\n\n<p>Isso inclui redirecionamentos 301 de URLs antigas para uma nova, bem como redirecionamentos tempor\u00e1rios e outras implementa\u00e7\u00f5es.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-upgrade-your-web-hosting\">Atualize Sua Hospedagem<\/h4>\n\n\n\n<p>A Hospedagem desempenha um papel crucial na velocidade geral do seu site e no \u00edndice de desempenho, especialmente quando se trata de TTFB.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Provedor de Hosting<\/h3>\n    <p>Um provedor de hosting \u00e9 um neg\u00f3cio que cobra uma taxa em troca de u201calugaru201d espa\u00e7o e recursos de servidor. Voc\u00ea pode escolher qualquer provedor de hosting que desejar para lan\u00e7ar um novo site.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/hosting-provider\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Voc\u00ea vai querer observar os detalhes do seu provedor de hospedagem, prestando muita aten\u00e7\u00e3o a coisas como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Shared vs Dedicated Hosting<\/b>: O seu site est\u00e1 hospedado em sua pr\u00f3pria inst\u00e2ncia ou est\u00e1 compartilhando recursos com outros usu\u00e1rios e seus sites? O Hosting Dedicado geralmente custa mais, mas proporciona um desempenho mais consistente.<\/li>\n\n\n\n<li><b>Mem\u00f3ria (RAM)<\/b>: A mem\u00f3ria que seu site pode acessar no servidor desempenha um papel importante em seu desempenho geral. Se a mem\u00f3ria estiver esgotada, o servidor n\u00e3o ser\u00e1 capaz de processar e responder a novas solicita\u00e7\u00f5es.<\/li>\n\n\n\n<li><b>CPU \/ Processador:<\/b> A velocidade do processador do servidor tamb\u00e9m influencia na velocidade de resposta e no tempo de processamento.<\/li>\n\n\n\n<li><b>Atualiza\u00e7\u00f5es de Infraestrutura<\/b>: O software que est\u00e1 rodando no servidor est\u00e1 atualizado e livre de erros ou conflitos? Atualize para as vers\u00f5es mais recentes do PHP, MySQL e outras aplica\u00e7\u00f5es essenciais para maximizar o desempenho.<\/li>\n\n\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-implement-caching\">Implementar Cache<\/h4>\n\n\n\n<p>Em sites chamados de &#8220;din\u00e2micos&#8221;, como os que funcionam com WordPress, fazer o cache de suas p\u00e1ginas pode trazer grandes melhorias para os tempos de carregamento das p\u00e1ginas e TTFB.<\/p>\n\n\n\n<p>O caching basicamente significa que, em vez de buscar informa\u00e7\u00f5es do banco de dados do seu site cada vez que uma p\u00e1gina \u00e9 carregada, o site armazenar\u00e1 uma c\u00f3pia da p\u00e1gina e fornecer\u00e1 essa c\u00f3pia ao usu\u00e1rio. \u00c9 muito mais r\u00e1pido do que procurar informa\u00e7\u00f5es todas as vezes.<\/p>\n\n\n\n<p>Para entender como isso funciona, leia <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/um-guia-abrangente-para-cache-de-sites\/\" target=\"_blank\" rel=\"noopener\">nosso guia sobre Cache de sites<\/a>.<\/p>\n\n\n\n<h2 id=\"h-a-note-about-speed-index\" class=\"wp-block-heading\">Uma Nota Sobre o \u00cdndice de Velocidade<\/h2>\n\n\n\n<p>N\u00e3o inclu\u00edmos uma se\u00e7\u00e3o separada focada na m\u00e9trica de \u00cdndice de Velocidade neste guia porque isso mede essencialmente o tempo de carregamento <i>total<\/i> da p\u00e1gina.<\/p>\n\n\n\n<p>Isso significa que abordar quest\u00f5es do \u00cdndice de Velocidade geralmente \u00e9 uma quest\u00e3o de lidar com as outras m\u00e9tricas relacionadas que j\u00e1 cobrimos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Primeira Pintura com Conte\u00fado<\/li>\n\n\n\n<li>Maior Pintura com Conte\u00fado<\/li>\n\n\n\n<li>Intera\u00e7\u00e3o at\u00e9 a Pr\u00f3xima Pintura<\/li>\n\n\n\n<li>Tempo para o Primeiro Byte<\/li>\n\n\n<\/ul>\n\n\n\n<p>Cada um desempenhar\u00e1 um pequeno papel na velocidade acumulada da p\u00e1gina e abord\u00e1-los diretamente deve melhorar sua pontua\u00e7\u00e3o geral no \u00cdndice de Velocidade.<\/p>\n\n\n\n<h2 id=\"h-final-thoughts-on-pagespeed-insights\" class=\"wp-block-heading\">Considera\u00e7\u00f5es Finais sobre o PageSpeed Insights<\/h2>\n\n\n\n<p>Neste guia, cobrimos praticamente tudo o que h\u00e1 para saber sobre o relat\u00f3rio PageSpeed Insights e como voc\u00ea pode abordar estrategicamente cada problema potencial.<\/p>\n\n\n\n<p>No total, eu espero que o desempenho da p\u00e1gina, acessibilidade e melhores pr\u00e1ticas t\u00e9cnicas continuem crescendo em import\u00e2ncia. Estamos construindo a web juntos \u2013 um site por vez \u2013 e isso depende de todos n\u00f3s investirmos em manter a web aberta, acess\u00edvel e bonita.<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Assuma o Controle com a Hospedagem VPS Flex\u00edvel\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Veja como a oferta de VPS da DreamHost se destaca: suporte ao cliente 24\/7, um painel intuitivo, RAM escal\u00e1vel, largura de banda ilimitada, dom\u00ednios de hospedagem ilimitados e armazenamento SSD.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/vps\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Escolha Seu Plano VPS                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Na Internet, n\u00e3o h\u00e1 limite de velocidade \u2013 mas, felizmente, existe um veloc\u00edmetro. A velocidade e o desempenho do seu site t\u00eam um grande impacto nos neg\u00f3cios. Ele pode melhorar seu ranking de pesquisa e SEO, aumentar o envolvimento do site e impulsionar mais convers\u00f5es \u2013 e receita. Mas antes de voc\u00ea poder otimizar a velocidade do seu site, voc\u00ea precisa de [\u2026]<\/p>\n","protected":false},"author":1060,"featured_media":40101,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-what-is-google-pagespeed-insights\",\"O que \u00e9 o Google PageSpeed Insights?\"],[\"h-page-speed-and-seo\",\"Velocidade da P\u00e1gina e SEO\"],[\"h-how-pagespeed-insights-works\",\"Como funciona o PageSpeed Insights\"],[\"h-how-to-use-this-guide-to-improve-your-pagespeed-insights-score\",\"Como Usar Este Guia para Melhorar Sua Pontua\u00e7\u00e3o no PageSpeed Insights\"],[\"h-1-first-contentful-paint-fcp\",\"#1 - Primeira Pintura com Conte\u00fado (FCP)\"],[\"h-2-first-input-delay-fid-total-blocking-time-tbt-and-time-to-interactive-tti\",\"#2 - First Input Delay (FID), Total Blocking Time (TBT) e Time to Interactive (TTI)\"],[\"h-3-largest-contentful-paint-lcp\",\"#3 - Maior Pintura de Conte\u00fado Significativo (LCP)\"],[\"h-4-cumulative-layout-shift-cls\",\"#4 - Deslocamento Cumulativo de Layout (CLS)\"],[\"h-5-interaction-to-next-paint-inp\",\"#5 - Intera\u00e7\u00e3o at\u00e9 a Pr\u00f3xima Pintura (INP)\"],[\"h-6-time-to-first-byte-ttfb\",\"#6 - Tempo at\u00e9 o Primeiro Byte (TTFB)\"],[\"h-a-note-about-speed-index\",\"Uma Nota Sobre o \u00cdndice de Velocidade\"],[\"h-final-thoughts-on-pagespeed-insights\",\"Considera\u00e7\u00f5es Finais sobre o PageSpeed Insights\"]]","hide_toc":false,"footnotes":""},"categories":[14389,14391],"tags":[],"class_list":["post-57397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-pt","category-tutoriais-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo &amp; Dicas para Alcan\u00e7ar 100) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo &amp; Dicas para Alcan\u00e7ar 100)\" \/>\n<meta property=\"og:description\" content=\"Na Internet, n\u00e3o h\u00e1 limite de velocidade \u2013 mas, felizmente, existe um veloc\u00edmetro. A velocidade e o desempenho do seu site t\u00eam um grande impacto nos neg\u00f3cios. Ele pode melhorar seu ranking de pesquisa e SEO, aumentar o envolvimento do site e impulsionar mais convers\u00f5es \u2013 e receita. Mas antes de voc\u00ea poder otimizar a velocidade do seu site, voc\u00ea precisa de [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-18T14:00:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:57:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"34 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo & Dicas para Alcan\u00e7ar 100) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/","og_locale":"en_US","og_type":"article","og_title":"Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo & Dicas para Alcan\u00e7ar 100)","og_description":"Na Internet, n\u00e3o h\u00e1 limite de velocidade \u2013 mas, felizmente, existe um veloc\u00edmetro. A velocidade e o desempenho do seu site t\u00eam um grande impacto nos neg\u00f3cios. Ele pode melhorar seu ranking de pesquisa e SEO, aumentar o envolvimento do site e impulsionar mais convers\u00f5es \u2013 e receita. Mas antes de voc\u00ea poder otimizar a velocidade do seu site, voc\u00ea precisa de [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-04-18T14:00:32+00:00","article_modified_time":"2025-05-26T19:57:21+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"34 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo &#038; Dicas para Alcan\u00e7ar 100)","datePublished":"2023-04-18T14:00:32+00:00","dateModified":"2025-05-26T19:57:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/"},"wordCount":6861,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","articleSection":["Marketing","Tutoriais"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/","name":"Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo & Dicas para Alcan\u00e7ar 100) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","datePublished":"2023-04-18T14:00:32+00:00","dateModified":"2025-05-26T19:57:21+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","width":1460,"height":1095,"caption":"PageSpeed Insights Report Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/relatorio-do-pagespeed-insights\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Insights de Velocidade de P\u00e1gina: Mergulho Profundo (Passo a Passo Completo &#038; Dicas para Alcan\u00e7ar 100)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"pt","translations":{"pt":57397,"es":40181,"en":40100,"de":52146,"pl":57393,"ru":57400,"uk":57406,"it":68951,"fr":71550,"nl":71577},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=57397"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57397\/revisions"}],"predecessor-version":[{"id":62265,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57397\/revisions\/62265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40101"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=57397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=57397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=57397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}