{"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":"\/br\/tutoriais\/como-adiar-a-analise-do-javascript-no-wordpress\/","title":{"rendered":"Como adiar a an\u00e1lise do JavaScript no WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Existem algumas raz&otilde;es pelas quais devemos adiar a an&aacute;lise de JavaScript no WordPress.<\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-30402\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1536,fit=scale-down 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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/03\/defer-js-results1.png\/public\" 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 class=\"wp-block-paragraph\">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 class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Importante!<\/strong> Certifique-se de backup seu site antes de prosseguir.\n            <\/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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/wordpress-dashboard-plugins-add-new.png\/public\" alt=\"Adding a new plugin via WordPress dashboard\" class=\"wp-image-3852\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/wp-deferred-javascript-plugin.png\/public\" alt=\"defer parsing of javascript via wp deferred js plugin\" class=\"wp-image-3853\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/speed-booster-pack-activate.png\/public\" alt=\"WordPress Speed Booster Pack activation\" class=\"wp-image-3854\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/speed-boster-pack-settings-in-wp-dashboard.png\/public\" alt=\"Speed booster pack settings in WordPress dashboard\" class=\"wp-image-3855\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/defer-parsing-of-javascript-wordpress-in-speed-booster-pack.png\/public\" alt=\"Defer parsing of Javascript files in wordpress via speed booster pack\" class=\"wp-image-3856\"><\/figure>\n<\/div><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/confirm-deferring-of-js-in-speed-boster-pack.png\/public\" alt=\"confirm deferring of js in wp\" class=\"wp-image-3857\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2016\/10\/async-javascript-plugin-in-wordpress.png\/public\" alt=\"Async JavaScript plugin activation\" class=\"wp-image-3859\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/03\/defer-js-results2.png\/public\" alt=\"Defer Parsing of Javascript WordPress success in GTMetrix website optimization score\"><\/figure><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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=\"\/br\/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\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=4574"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4574\/revisions"}],"predecessor-version":[{"id":38481,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4574\/revisions\/38481"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=4574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=4574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=4574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}