{"id":245179,"date":"2022-04-07T12:47:00","date_gmt":"2022-04-07T09:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=245179"},"modified":"2022-05-16T14:21:54","modified_gmt":"2022-05-16T11:21:54","slug":"como-adiar-javascript-com-wordpress-para-tempos-de-carregamento-mais-rapidos","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-adiar-javascript-com-wordpress-para-tempos-de-carregamento-mais-rapidos\/","title":{"rendered":"Como adiar Javascript com WordPress para tempos de carregamento mais r\u00e1pidos"},"content":{"rendered":"

Quer adiar o Javascript em seu site?<\/p>\n

Se voc\u00ea n\u00e3o for um desenvolvedor, isso pode parecer uma tarefa intranspon\u00edvel.<\/p>\n

Adiar o Javascript n\u00e3o \u00e9 dif\u00edcil se voc\u00ea construiu o site do zero, mas com o WordPress, voc\u00ea provavelmente ter\u00e1 um tema e 6 a 10 plug-ins, todos carregando seus pr\u00f3prios arquivos Javascript.<\/p>\n

Encontrar os “ganchos" de que voc\u00ea precisa para mudar a forma como cada arquivo JS \u00e9 carregado levaria uma eternidade!<\/p>\n

Felizmente, existe uma maneira muito mais f\u00e1cil.<\/p>\n

Tudo que voc\u00ea precisa \u00e9 da ferramenta certa.<\/p>\n

Por que voc\u00ea deve adiar arquivos JS<\/h2>\n

Vamos nos certificar de que estamos na mesma p\u00e1gina.<\/p>\n

Os navegadores normalmente carregam arquivos Javascript antes de tentarem renderizar o seu site. Isso significa que os visitantes n\u00e3o poder\u00e3o ver seu site at\u00e9 que todos os arquivos Javascript (e CSS) estejam totalmente carregados.<\/p>\n

Se voc\u00ea adiar um arquivo Javascript, o documento HTML pode ser carregado antes que o arquivo Javascript termine de carregar. O arquivo JS pode carregar ao mesmo tempo, mas n\u00e3o ser\u00e1 executado at\u00e9 que o documento HTML esteja totalmente carregado.<\/p>\n

Em outras palavras, se voc\u00ea adiar seus arquivos Javascript, o documento HTML ser\u00e1 carregado mais cedo, o que significa que seu site ficar\u00e1 vis\u00edvel mais cedo. Isso faz com que seu site apare\u00e7a mais rapidamente para os visitantes, o que \u00e9 o que mais importa.<\/p>\n

Com isso resolvido, vamos chegar ao m\u00e9todo incrivelmente simples dispon\u00edvel para adiar Javascript em seu site.<\/p>\n

Como adiar arquivos Javascript<\/h2>\n

Em vez de tentar localizar e adiar scripts manualmente, voc\u00ea pode usar um plug-in para fazer isso automaticamente para voc\u00ea.<\/p>\n

Existem dois m\u00e9todos diferentes que recomendo.<\/p>\n

Adiar com Javascript Async<\/h3>\n

Em primeiro lugar, existe o plug-in Javascript Async<\/a> gratuito e f\u00e1cil de usar .<\/p>\n

\"Como<\/a><\/p>\n

Simples e popular, o Async Javascript \u00e9 uma escolha s\u00f3lida para adiar scripts JS.<\/p>\n

Ao instalar este plug-in de desempenho, voc\u00ea encontrar\u00e1 o seguinte novo menu de configura\u00e7\u00f5es adicionado ao seu site:<\/p>\n

\"Como<\/a><\/p>\n

Se quiser que tudo comece a funcionar rapidamente, voc\u00ea pode ass\u00edncronizar ou adiar todos os seus arquivos Javascript de uma vez com uma destas configura\u00e7\u00f5es:<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea pode aplicar o m\u00e9todo de carregamento adiado a todos os arquivos, certifique-se de limpar o cache e, em seguida, teste cuidadosamente o seu site. \u00c9 poss\u00edvel que alguns recursos do seu site n\u00e3o funcionem, como o menu do celular ou as barras de pesquisa interativas.<\/p>\n

Se voc\u00ea notar que alguma funcionalidade em seu site n\u00e3o funciona mais, mude para uma das vers\u00f5es que excluem jQuery e muito provavelmente isso resolver\u00e1 todos os problemas.<\/p>\n

Caso contr\u00e1rio, voc\u00ea pode adicionar scripts manualmente para ass\u00edncrono ou adiar, permitindo que voc\u00ea teste cuidadosamente um arquivo por vez.<\/p>\n

\"Como<\/a><\/p>\n

A \u00fanica coisa com essa abordagem \u00e9 que voc\u00ea precisar\u00e1 ter algum conhecimento t\u00e9cnico para encontrar os identificadores de script necess\u00e1rios para identificar quais arquivos devem ser adiados.<\/p>\n

No geral, Async Javascript \u00e9 um \u00f3timo plugin e \u00e9 gr\u00e1tis!<\/p>\n

Se voc\u00ea deseja um plugin de desempenho que seja t\u00e3o simples, mas mais robusto, continue lendo.<\/p>\n

Como adiar JS com WP Rocket<\/h3>\n

O plugin que uso no competethemes.com e recomendo para a maior parte da otimiza\u00e7\u00e3o de desempenho \u00e9 o WP Rocket<\/a>.<\/p>\n

\"Como<\/a><\/p>\n

WP Rocket fornece uma interface simples cheia de recursos de otimiza\u00e7\u00e3o de desempenho. Voc\u00ea pode girar um bot\u00e3o para reduzir e concatenar arquivos, habilitar cache avan\u00e7ado, imagens de carregamento lento<\/a> e muito mais.<\/p>\n

Embora este plugin seja complexo nos bastidores, o painel de configura\u00e7\u00f5es n\u00e3o requer nenhum conhecimento t\u00e9cnico. Isso tamb\u00e9m se aplica ao adiamento de arquivos Javascript.<\/p>\n

No painel do WP Rocket, voc\u00ea encontrar\u00e1 uma se\u00e7\u00e3o File Optimization.<\/p>\n

\"Como<\/a><\/p>\n

Existem muitas ferramentas de otimiza\u00e7\u00e3o excelentes aqui, e o recurso de adiamento de JS \u00e9 encontrado na parte inferior da p\u00e1gina. Se voc\u00ea ativar o adiamento, uma segunda caixa de sele\u00e7\u00e3o aparecer\u00e1 com uma configura\u00e7\u00e3o de “Modo de seguran\u00e7a” ativada automaticamente tamb\u00e9m.<\/p>\n

\"Como<\/a><\/p>\n

Como j\u00e1 mencionei, adiar o jQuery muitas vezes leva a recursos corrompidos em seu site. Embora voc\u00ea possa tentar desligar o Modo de seguran\u00e7a, provavelmente n\u00e3o deveria.<\/p>\n

E isso \u00e9 tudo que realmente importa! Basta marcar uma \u00fanica caixa e seus arquivos Javascript ser\u00e3o adiados.<\/p>\n

Se voc\u00ea quiser explorar mais algumas op\u00e7\u00f5es de desempenho, pode visitar o WP Rocket aqui<\/a> ou revisar nosso tutorial do WP Rocket<\/a>.<\/p>\n

Javascript diferido<\/h2>\n

Com seus arquivos Javascript adiados, o documento HTML de seu site carregar\u00e1 mais cedo e far\u00e1 com que seu site apare\u00e7a muito mais r\u00e1pido.<\/p>\n

Para a maioria dos sites WordPress, esse \u00e9 um ganho de desempenho f\u00e1cil e significativo. Melhor ainda, n\u00e3o requer nenhum conhecimento t\u00e9cnico para aplicar ao seu site.<\/p>\n

Se voc\u00ea tiver alguma d\u00favida sobre como adiar o Javascript com o WordPress, deixe um coment\u00e1rio abaixo.<\/p>\n

Fonte de grava\u00e7\u00e3o: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Encontre dois m\u00e9todos simples para adiar Javascript em seu site WordPress. Cada p\u00e1gina carregar\u00e1 mais r\u00e1pido ap\u00f3s alguns minutos de configura\u00e7\u00e3o.<\/p>\n","protected":false},"author":1,"featured_media":257628,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[586],"tags":[848],"class_list":["post-245179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acelere-o-wordpress","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=245179"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/245179\/revisions"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=245179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=245179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=245179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}