{"id":254458,"date":"2022-04-07T12:47:00","date_gmt":"2022-04-07T09:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=254458"},"modified":"2022-05-16T14:53:22","modified_gmt":"2022-05-16T11:53:22","slug":"como-diferir-javascript-con-wordpress-para-tiempos-de-carga-mas-rapidos","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-diferir-javascript-con-wordpress-para-tiempos-de-carga-mas-rapidos\/","title":{"rendered":"C\u00f3mo diferir Javascript con WordPress para tiempos de carga m\u00e1s r\u00e1pidos"},"content":{"rendered":"

\u00bfQuiere aplazar Javascript en su sitio?<\/p>\n

Si usted no es un desarrollador, esto puede parecer una tarea insuperable.<\/p>\n

Aplazar Javascript no es dif\u00edcil si cre\u00f3 el sitio desde cero, pero con WordPress, es probable que tenga un tema y 6-10 complementos que cargan sus propios archivos Javascript.<\/p>\n

\u00a1Encontrar los "ganchos" que necesita para cambiar la forma en que se carga cada archivo JS tomar\u00eda una eternidad!<\/p>\n

Afortunadamente, existe una forma mucho m\u00e1s sencilla.<\/p>\n

Todo lo que necesita es la herramienta adecuada.<\/p>\n

Por qu\u00e9 deber\u00eda aplazar los archivos JS<\/h2>\n

Asegur\u00e9monos de estar en la misma p\u00e1gina.<\/p>\n

Los navegadores normalmente cargan archivos Javascript antes de intentar representar su sitio. Esto significa que los visitantes no podr\u00e1n ver su sitio hasta que todos los archivos Javascript (y CSS) est\u00e9n completamente cargados.<\/p>\n

Si aplaza un archivo Javascript, el documento HTML se puede cargar antes de que termine de cargarse. El archivo JS puede cargarse al mismo tiempo, pero no se ejecutar\u00e1 hasta que el documento HTML est\u00e9 completamente cargado.<\/p>\n

En otras palabras, si pospone sus archivos Javascript, el documento HTML se cargar\u00e1 antes, lo que significa que su sitio ser\u00e1 visible antes. Esto hace que su sitio parezca m\u00e1s r\u00e1pido para los visitantes, que es en \u00faltima instancia lo m\u00e1s importante.<\/p>\n

Con eso fuera del camino, vayamos al m\u00e9todo incre\u00edblemente simple disponible para diferir Javascript en su sitio.<\/p>\n

C\u00f3mo diferir archivos Javascript<\/h2>\n

En lugar de intentar buscar y aplazar scripts manualmente, puede utilizar un complemento para que lo haga autom\u00e1ticamente.<\/p>\n

Hay dos m\u00e9todos diferentes que recomiendo.<\/p>\n

Aplazar con Async Javascript<\/h3>\n

Primero, est\u00e1 el complemento Async Javascript<\/a> gratuito y f\u00e1cil de usar .<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Simple y popular, Async Javascript es una opci\u00f3n s\u00f3lida para aplazar scripts JS.<\/p>\n

Cuando instale este complemento de rendimiento, encontrar\u00e1 el siguiente men\u00fa de configuraci\u00f3n nuevo agregado a su sitio:<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si desea que las cosas funcionen r\u00e1pidamente, puede asincronizar o diferir todos sus archivos Javascript a la vez con una de estas configuraciones:<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Puede aplicar el m\u00e9todo de carga diferida a todos los archivos, aseg\u00farese de borrar su cach\u00e9 y luego pruebe cuidadosamente su sitio. Existe la posibilidad de que algunas funciones de su sitio se rompan, como el men\u00fa m\u00f3vil o las barras de b\u00fasqueda interactivas.<\/p>\n

Si nota que alguna funcionalidad en su sitio ya no funciona, cambie a una de las versiones que excluyen jQuery y lo m\u00e1s probable es que esto resuelva cualquier problema.<\/p>\n

De lo contrario, puede agregar scripts manualmente a async o diferir, lo que le permite probar cuidadosamente un archivo a la vez.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Lo \u00fanico con este enfoque es que deber\u00e1 tener algunos conocimientos t\u00e9cnicos para encontrar los identificadores de script necesarios para identificar qu\u00e9 archivos deben aplazarse.<\/p>\n

En general, Async Javascript es un gran complemento y \u00a1es gratis!<\/p>\n

Si desea un complemento de rendimiento que sea igual de simple pero m\u00e1s s\u00f3lido, siga leyendo.<\/p>\n

C\u00f3mo diferir JS con WP Rocket<\/h3>\n

El complemento que utilizo en competethemes.com y que recomiendo para la mayor optimizaci\u00f3n del rendimiento es WP Rocket<\/a>.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

WP Rocket proporciona una interfaz simple llena de funciones de optimizaci\u00f3n del rendimiento. Puede activar un interruptor para minificar y concatenar archivos, habilitar el almacenamiento en cach\u00e9 avanzado, cargar im\u00e1genes de forma diferida<\/a> y m\u00e1s.<\/p>\n

Si bien este complemento es complejo bajo el cap\u00f3, el panel de configuraci\u00f3n no requiere conocimientos t\u00e9cnicos. Esto tambi\u00e9n se aplica a la postergaci\u00f3n de archivos Javascript.<\/p>\n

En el panel de WP Rocket, encontrar\u00e1 una secci\u00f3n de Optimizaci\u00f3n de archivos.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Aqu\u00ed hay muchas herramientas de optimizaci\u00f3n excelentes, y la funci\u00f3n de aplazamiento de JS se encuentra en la parte inferior de la p\u00e1gina. Si activa el aplazamiento, aparecer\u00e1 una segunda casilla de verificaci\u00f3n con una configuraci\u00f3n de "Modo seguro" habilitada autom\u00e1ticamente tambi\u00e9n.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Como ya mencion\u00e9, diferir jQuery muy a menudo conduce a funciones rotas en su sitio. Si bien puede intentar desactivar el Modo seguro, probablemente no deber\u00eda hacerlo.<\/p>\n

\u00a1Y eso es todo lo que hay que hacer! Simplemente marque una sola casilla y sus archivos Javascript ser\u00e1n diferidos.<\/p>\n

Si desea explorar m\u00e1s opciones de rendimiento, puede visitar WP Rocket aqu\u00ed<\/a> o revisar nuestro tutorial de WP Rocket<\/a>.<\/p>\n

Javascript diferido<\/h2>\n

Con sus archivos Javascript aplazados, el documento HTML de su sitio se cargar\u00e1 antes y har\u00e1 que su sitio aparezca mucho m\u00e1s r\u00e1pido.<\/p>\n

Para la mayor\u00eda de los sitios de WordPress, esta es una ganancia de rendimiento f\u00e1cil y significativa. Mejor a\u00fan, no requiere ning\u00fan conocimiento t\u00e9cnico para aplicarlo a su sitio.<\/p>\n

Si tiene alguna pregunta pendiente sobre c\u00f3mo diferir Javascript con WordPress, deje un comentario a continuaci\u00f3n.<\/p>\n

Fuente de grabaci\u00f3n: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Encuentre dos m\u00e9todos simples para diferir Javascript en su sitio de WordPress. Cada p\u00e1gina se cargar\u00e1 m\u00e1s r\u00e1pido despu\u00e9s de unos minutos de configuraci\u00f3n.<\/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":[579],"tags":[849],"class_list":["post-254458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acelerar-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/254458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=254458"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/254458\/revisions"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=254458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=254458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=254458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}