{"id":4574,"date":"2017-04-24T16:33:11","date_gmt":"2017-04-24T19:33:11","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=4574"},"modified":"2023-07-21T17:13:13","modified_gmt":"2023-07-21T20:13:13","slug":"como-adiar-a-analise-do-javascript-no-wordpress","status":"publish","type":"post","link":"\/pt\/tutoriais\/como-adiar-a-analise-do-javascript-no-wordpress","title":{"rendered":"Como adiar a an\u00e1lise do JavaScript no WordPress"},"content":{"rendered":"<p>Existem algumas raz&otilde;es pelas quais devemos adiar a an&aacute;lise de JavaScript no WordPress.<\/p><p>O mais importante seria a velocidade e o desempenho. Geralmente, o JavaScript &eacute; colocado entre as tags <code>&lt;head&gt; &lt;\/head&gt;<\/code>&nbsp;e quando um site &eacute; aberto, ele carrega o c&oacute;digo de cima para baixo, o que significa que se voc&ecirc; tiver lotes de JS ou sequ&ecirc;ncias longas, levar&aacute; mais tempo para o conte&uacute;do do site para aparecer, como ele espera primeiro para todos os JavaScript para ser carregado.<\/p><p>Ao adiar a an&aacute;lise de JavaScript, o site n&atilde;o esperaria que o c&oacute;digo JS fosse conclu&iacute;do, o que resultaria em um tempo de carregamento mais r&aacute;pido. Neste guia, vamos abordar duas maneiras de como voc&ecirc; pode adiar a an&aacute;lise de JavaScript no WordPress.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/WordPress-Security-Checklist(pt-br).pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-1024x283.png\" alt=\"\" class=\"wp-image-30402\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-300x83.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-150x41.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-768x212.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR-1536x425.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-o-que-voce-vai-precisar\"><strong>O Que Voc&ecirc; Vai Precisar?<\/strong><\/h2><p>Antes de come&ccedil;ar este guia, voc&ecirc; precisar&aacute; do seguinte:<\/p><ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Acesso ao Painel de Administra&ccedil;&atilde;o do WordPress.<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Acesso FTP \/ cPanel.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-passo-1-analisar-o-site\"><strong>Passo 1 &ndash; Analisar o Site<\/strong><\/h2><p>Para descobrir se isso precisa ser implementado, voc&ecirc; pode analisar seu site WordPress usando a ferramenta <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><u>GTMetrix<\/u><\/a>.<\/p><p>A pontua&ccedil;&atilde;o m&eacute;dia para esta recomenda&ccedil;&atilde;o em GTMetrix &eacute; de pelo menos 71%. Aqui est&atilde;o os resultados depois de analisar um site WordPress de teste:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/03\/defer-js-results1.png\" alt=\"Defer parsing of JavaScript WordPress warning in GTMetrix.\"><\/figure><h2 class=\"wp-block-heading\" id=\"h-passo-2-adiar-a-analise-de-javascript-no-wordpress\"><strong>Passo 2 &ndash; Adiar a An&aacute;lise de JavaScript no WordPress<\/strong><\/h2><p>Existem v&aacute;rias op&ccedil;&otilde;es para escolher que o ajudar&atilde;o a adiar a an&aacute;lise de JS no seu site WordPress.<\/p><p>\n\n\n<div><p class=\"important\"><strong>Importante!<\/strong> Certifique-se de backup seu site antes de prosseguir.<\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-opcao-1-adiando-a-analise-de-javascript-atraves-de-plugins-do-wordpress\">Op&ccedil;&atilde;o&nbsp;1 &ndash; Adiando a An&aacute;lise de JavaScript Atrav&eacute;s de Plugins do WordPress<\/h2><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/wordpress-dashboard-plugins-add-new.png\" alt=\"Adding a new plugin via WordPress dashboard\" class=\"wp-image-3852\"><\/figure><\/div><p>Uma das maneiras mais f&aacute;ceis e r&aacute;pidas de adiar a an&aacute;lise de JS no WordPress &eacute; usando plugins. Podemos ter esse resultado&nbsp;usando uma variedade de plugins e vamos mostrar algumas das&nbsp;op&ccedil;&otilde;es mais populares. Para come&ccedil;ar, voc&ecirc; precisar&aacute; fazer login no Painel de Controle WordPress&nbsp;e acessar <strong>Plugins<\/strong> &rarr; <strong>Add New<\/strong> se&ccedil;&atilde;o.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/pt\/alojamento-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-opcao-1-1-wp-deferred-javascript\">Op&ccedil;&atilde;o 1.1 &ndash;&nbsp;<a href=\"https:\/\/wordpress.org\/plugins\/wp-deferred-javascripts\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">WP Deferred JavaScript<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/wp-deferred-javascript-plugin.png\" alt=\"defer parsing of javascript via wp deferred js plugin\" class=\"wp-image-3853\"><\/figure><\/div><p>Um plugin leve e muito f&aacute;cil de usar. Voc&ecirc; s&oacute; precisa instalar e <strong>ativ&aacute;-lo<\/strong>.<\/p><h3 class=\"wp-block-heading\" id=\"h-opcao-1-2-speed-booster-pack\">Op&ccedil;&atilde;o 1.2 &ndash; <a href=\"https:\/\/wordpress.org\/plugins\/speed-booster-pack\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Speed Booster Pack<br><\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/speed-booster-pack-activate.png\" alt=\"WordPress Speed Booster Pack activation\" class=\"wp-image-3854\"><\/figure><\/div><p>Um plugin alternativo com t&eacute;cnicas de otimiza&ccedil;&atilde;o adicionais, como remo&ccedil;&atilde;o de seq&uuml;&ecirc;ncia de consulta, carregamento de JS de bibliotecas do Google e muito mais. Para come&ccedil;ar, instale e <strong>ative<\/strong> o plugin.<br><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/speed-boster-pack-settings-in-wp-dashboard.png\" alt=\"Speed booster pack settings in WordPress dashboard\" class=\"wp-image-3855\"><\/figure><\/div><p>Pr&oacute;ximo, naveguem pelo seu painel do WordPress, clique em <strong>Configura&ccedil;&otilde;es&nbsp;<\/strong>e entre em&nbsp;<strong>Speed Booster Pack<\/strong>.<br><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/defer-parsing-of-javascript-wordpress-in-speed-booster-pack.png\" alt=\"Defer parsing of Javascript files in wordpress via speed booster pack\" class=\"wp-image-3856\"><\/figure><\/div><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/confirm-deferring-of-js-in-speed-boster-pack.png\" alt=\"confirm deferring of js in wp\" class=\"wp-image-3857\"><\/figure><\/div><p>Marque a caixa perto de <strong>Defer Parsing de Arquivos Javascript<\/strong> e <strong>Salve Mudan&ccedil;as<\/strong> para aplic&aacute;-lo.<\/p><h3 class=\"wp-block-heading\" id=\"h-opcao-1-3-async-javascript\">Op&ccedil;&atilde;o 1.3 &ndash;&nbsp;<a href=\"https:\/\/wordpress.org\/plugins\/async-javascript\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Async JavaScript<\/a><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2016\/10\/async-javascript-plugin-in-wordpress.png\" alt=\"Async JavaScript plugin activation\" class=\"wp-image-3859\"><\/figure><\/div><p>Async JavaScript plugin permite <strong>diferir<\/strong> ou atributos <strong>ass&iacute;ncrono<\/strong> para WordPress JavaScripts que carrega via <code>wp_enqueue_script<\/code> fun&ccedil;&atilde;o. Os seguintes atributos obrigam o JavaScript a carregar diferindo ou assincronamente, resultando em carregamento de p&aacute;gina mais r&aacute;pido. Para us&aacute;-lo, voc&ecirc; s&oacute; precisar&aacute; instalar e <strong>ativar<\/strong> o plug-in.<\/p><h2 class=\"wp-block-heading\" id=\"h-opcao-2-adiando-a-analise-de-javascript-via-functions-php\"><strong>Op&ccedil;&atilde;o 2 &ndash; Adiando a An&aacute;lise de JavaScript via functions.php<\/strong><\/h2><p>Para adiar a an&aacute;lise de JS, este c&oacute;digo deve ser copiado para a parte inferior do seu arquivo <code>wp-includes\/functions.php<\/code>:<\/p><pre class=\"wp-block-preformatted\">function defer_parsing_of_js ( $url ) {\n\nif ( FALSE === strpos( $url, '.js' ) ) return $url;\n\nif ( strpos( $url, 'jquery.js' ) ) return $url;\n\nreturn \"$url' defer \";\n\n}\n\nadd_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );<\/pre><h2 class=\"wp-block-heading\" id=\"h-passo-3-testar-as-alteracoes\"><strong>Passo 3 &ndash; Testar as Altera&ccedil;&otilde;es<\/strong><\/h2><p>Depois de terminar com uma das op&ccedil;&otilde;es acima, use a mesma ferramenta de velocidade do site e teste seu site. Aqui est&atilde;o os resultados de desempenho ap&oacute;s adiar a an&aacute;lise de JavaScript no WordPress:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/03\/defer-js-results2.png\" alt=\"Defer Parsing of Javascript WordPress success in GTMetrix website optimization score\"><\/figure><p>Parab&eacute;ns, seguindo estes poucos passos f&aacute;ceis, voc&ecirc; aumentou o desempenho do seu site para uma experi&ecirc;ncia mais r&aacute;pida e melhor!<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Neste breve guia, aprendemos como melhorar a velocidade eo desempenho do seu site WordPress, adiando a an&aacute;lise de JavaScript. Lembre-se, quanto mais r&aacute;pido e mais suave o seu site, mais tr&aacute;fego e visitantes mais felizes voc&ecirc; ter&aacute;. Alguma outra d&uacute;vida em rela&ccedil;&atilde;o ao JavaScript e WordPress? Temos outros tutoriais que podem te ajudar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Existem algumas raz&otilde;es pelas quais devemos adiar a an&aacute;lise de JavaScript no WordPress. O mais importante seria a velocidade e o desempenho. Geralmente, o JavaScript &eacute; colocado entre as tags &lt;head&gt; &lt;\/head&gt;&nbsp;e quando um site &eacute; aberto, ele carrega o c&oacute;digo de cima para baixo, o que significa que se voc&ecirc; tiver lotes de JS [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/como-adiar-a-analise-do-javascript-no-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":74,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Existem algumas raz\u00f5es pelas quais devemos adiar a an\u00e1lise de JavaScript no WordPress. O mais importante seria a velocidade e o desempenho.","rank_math_focus_keyword":"an\u00e1lise do JavaScript","footnotes":""},"categories":[4911],"tags":[5208,5207,4793,5205,5206,4918,5209,4798,5011,5010,5210],"class_list":["post-4574","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-ativar-javascript","tag-baixar-javascript","tag-javascript","tag-javascript-download","tag-javascript-download-gratis","tag-temas-wordpress","tag-templates-wordpress","tag-wordpress","tag-wordpress-download","tag-wordpress-login","tag-wordpress-themes"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adiar-a-analise-do-javascript-no-wordpress","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adiar-a-analise-do-javascript-no-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=4574"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4574\/revisions"}],"predecessor-version":[{"id":38481,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/4574\/revisions\/38481"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=4574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=4574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=4574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}