{"id":31640,"date":"2019-10-28T11:51:46","date_gmt":"2019-10-28T09:51:46","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=31640"},"modified":"2019-10-28T12:13:43","modified_gmt":"2019-10-28T10:13:43","slug":"async-javascript-wordpress-elimina-los-recursos-que-bloqueen-el-renderizado","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/wordpress\/async-javascript-wordpress-elimina-los-recursos-que-bloqueen-el-renderizado\/","title":{"rendered":"Async JavaScript WordPress – Elimina los Recursos que Bloqueen el Renderizado"},"content":{"rendered":"
<\/div>

\"Async<\/p>\n

Si eres de los que buscan que la velocidad de tu WordPress sea lo m\u00e1s r\u00e1pida posible<\/strong>, ya habr\u00e1s tomado algunas medidas para ello, como contratar un buen hosting WordPress con discos SSD<\/a>, optimizar las im\u00e1genes al m\u00e1ximo<\/a> con ayuda de alg\u00fan plugin, usar la cach\u00e9<\/a>, comprimir el contenido<\/a>, etc…<\/p>\n

Aun as\u00ed, despu\u00e9s de todos tus esfuerzos para conseguir que el PageSpeed de Google<\/em> te de la mejor puntuaci\u00f3n posible, hay una \u00abrecomendaci\u00f3n\u00bb que parece perseguir a todas las instalaciones de WordPress: \u00abElimina los Recursos que Bloqueen el Renderizado\u00bb<\/strong><\/p>\n

\"eliminar<\/p>\n

El propio sistema de Google te recomienda utilizar alg\u00fan complemento de WordPress para solucionar este problema, as\u00ed que vamos a ver si el plugin Async JavaScript<\/strong> puede ayudarnos a solucionar uno de esta recomendaci\u00f3n de Google de una vez por todas.<\/p>\n

\n

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

\n

Qu\u00e9 son los Recursos que Bloquean el Renderizado<\/h2>\n

Antes de anda, quiz\u00e1s te est\u00e9s preguntando qu\u00e9 son esos recursos que bloquean el renderizado y porque le interesan tanto a Google.<\/p>\n

WordPress y cualquier otro gestor de contenidos que puedas encontrar hoy en d\u00eda, funciona con hojas de estilo CSS y JavaScript<\/strong>.<\/p>\n

Nuestro navegador web puede cargar estos recursos antes que el propio HTML o hacerlo al mismo tiempo, siendo este m\u00e1s lento en cargar.<\/p>\n

Adem\u00e1s, en ocasiones estos recursos JavaScript y CSS no son necesarios para el correcto funcionamiento de la web, ya que s\u00f3lo se usan en determinados casos, as\u00ed que el analizador de Google nos avisa de esta situaci\u00f3n<\/strong>.<\/p>\n

Normalmente, el el propio theme que estemos usando el responsable de esto y en algunas ocasiones no podremos solucionarlo porque si que ser\u00e1n recursos necesarios para el correcto funcionamiento del sitio web.<\/p>\n

Pero si podemos intentarlo o al menos hacer que los recursos \u00abprescindibles\u00bb<\/em> no molesten la carga del sitio web.<\/p>\n

Plugin Async JavaScript – Evitar que los Recursos Bloqueen el Contenido<\/h2>\n

Para evitar esto se pueden utilizar dos atributos llamados \u00abasync\u00bb<\/strong> y \u00abdefer\u00bb<\/strong>.<\/p>\n

Estos dos atributos consiguen que el script cargue cuando toca, aunque con algunas diferencias .<\/p>\n

Async<\/strong> descarga el script en segundo planos sin interferir en la carga HTML, cuando est\u00e9 completamente descargado, y una vez descargado es cuando se ejecuta, de esta forma interfiere mucho menos en la carga del HTML mientras se descarga.<\/p>\n

Defer<\/strong> actua de forma distinta. Se detienen la descarga del script hasta que el HTML se haya descargado del todo.<\/p>\n

Si te sientes con \u00e1nimos, puedes a\u00f1adir estos atributos en todo el c\u00f3digo de del theme<\/em> que est\u00e9s utilizando, as\u00ed como en los plugins o recurrir a un plugin como Async JavaScript<\/strong> para que haga todo el trabajo duro por ti.<\/p>\n

El plugin Async JavaScript<\/strong> es gratuito y los puedes encontrar r\u00e1pidamente en el repositorio de plugins de WordPress o descargarlo desde la web haciendo click aqu\u00ed<\/a><\/em>.<\/p>\n

Est\u00e1 creado por los mismos desarrolladores del plugin Autoptimize<\/strong><\/a>, muy popular para optimizar WordPress, as\u00ed que si lo usas te sonar\u00e1 el logotipo.<\/p>\n

\"logo<\/p>\n

Una vez lo tengas instalado y activado, encontrar\u00e1s las opciones de activaci\u00f3n y configuraci\u00f3n en el men\u00fa Ajustes > Async JavaScript<\/strong><\/p>\n

\"menu<\/p>\n

Si accedemos al men\u00fa, ver\u00e1s que dispones de cinco pesta\u00f1as:<\/p>\n