¿Ha ejecutado su sitio de WordPress a través de un herramienta de pruebas de rendimiento sólo para recibir una instrucción de diferir el análisis de JavaScript en WordPress?
La implementación de este cambio puede tener un impacto positivo en los tiempos de carga de la página de su sitio, especialmente para los visitantes móviles. Pero la advertencia puede ser un poco difícil de entender, por lo que vamos a explicar exactamente lo que significa diferir el análisis de JavaScript y cómo puede implementar este cambio en su sitio web de WordPress.
Esto es lo que aprenderá en este artículo:
Si desea saltar directamente al tutorial, puede hacer clic en el último enlace de la lista anterior.
¿Qué significa diferir el análisis de JavaScript en WordPress?
Si alguna vez ha ejecutado su sitio de WordPress a través de Google PageSpeed Insights, GTmetrix, u otras herramientas de prueba de velocidad de página, es probable que haya encontrado la sugerencia de diferir el análisis de JavaScript.
Pero… ¿qué significa eso en realidad? ¿Y por qué es una consideración importante para el rendimiento?
Básicamente, cuando alguien visita su WordPress, el servidor de su sitio web entrega el contenido HTML de su sitio web al navegador de ese visitante.
El navegador del visitante entonces comienza en la parte superior y pasa a través del código para renderizar su sitio. Si, al moverse de arriba a abajo, encuentra algún JavaScript, dejará de renderizar el resto de la página hasta que pueda recuperar y analizar el archivo JavaScript.
Lo hará para cada script que encuentre, lo que puede tener un efecto negativo en los tiempos de carga de la página de su sitio porque el visitante necesita mirar fijamente a una pantalla en blanco mientras su navegador descarga y analiza todo el JavaScript.
Si un determinado script no es necesario para el funcionamiento básico de su sitio (al menos en la carga inicial de la página), no quiere que interfiera con la carga de las partes más importantes de su sitio, que es por lo que aquellos Las herramientas de prueba de velocidad de página siempre le indican que debe diferir el análisis de JavaScript.
Entonces, ¿qué significa diferir el análisis de JavaScript?
Esencialmente, su sitio le dirá a los navegadores de los visitantes que esperen para descargar y/o parsear JavaScript hasta que el contenido principal de su sitio ya haya terminado de cargarse. En ese momento, los visitantes ya pueden ver e interactuar con su página, por lo que los tiempos de espera para descargar y analizar que JavaScript ya no tienen un efecto tan negativo.
Acelerando los tiempos de carga de su contenido, hace feliz a Google y crea una experiencia mejor y más rápida para sus visitantes.
¿Cómo saber si necesita diferir el análisis de JavaScript?
Para probar si su sitio WordPress necesita diferir el análisis de JavaScript, puede ejecutar su sitio a través de GTmetrix.
GTmetrix le dará una calificación y también listará los scripts específicos que necesitan ser diferidos:
Los diferentes métodos para diferir el análisis de JavaScript
Hay varias maneras de diferir el análisis de JavaScript. En primer lugar, hay dos atributos que puede añadir a sus scripts:
- Async
- Defer
Ambos atributos permiten a los navegadores de los visitantes descargar JavaScript sin pausar el análisis de HTML. Sin embargo, la diferencia es que mientras que el asíncrono no hace una pausa en el análisis HTML para obtener el script (como lo haría el comportamiento predeterminado), si hace una pausa en el analizador HTML para ejecutar el script una vez que se ha obtenido.
Con diferido, los navegadores de los visitantes seguirán descargando los scripts mientras analizan el HTML, pero esperarán para analizar el script hasta que se haya completado el análisis del HTML.
Este gráfico de Growing with the Web hace un gran trabajo al explicar la diferencia:
Otra opción, recomendada por Patrick Sexton de Varvy, utiliza un script para llamar a un archivo JavaScript externo sólo después de que la carga inicial de la página haya terminado. Esto significa que los navegadores de los visitantes no descargarán ni ejecutarán ningún JavaScript hasta que la carga inicial de la página haya finalizado.
Finalmente, otro enfoque que verá es simplemente mover su JavaScript al final de la página. Sin embargo, este método no es una gran solución porque, aunque su página sea visible antes, los navegadores de los visitantes seguirán mostrando la página como cargando hasta que todos los scripts terminen. Esto podría impedir que algunos visitantes interactúen con su página porque piensan que el contenido no está completamente cargado.
¿Cómo diferir el análisis de JavaScript en WordPress? (4 métodos)
Para diferir el análisis de JavaScript en WordPress, hay tres rutas principales que puede tomar:
- Plugin – hay algunos plugins de WordPress gratuitos y premium para diferir el análisis de JavaScript. Le mostraremos cómo hacerlo con dos plugins populares.
- Método Varvy – si es un experto en tecnología, puede editar el código de su sitio directamente y usar el fragmento de código de Varvy.
- Archivo functions.php – puede agregar un fragmento de código al archivo functions.php del tema child para diferir automáticamente los scripts.
Puede hacer clic arriba para ir directamente a su método preferido o leer todas las técnicas para encontrar la que mejor se adapte a sus necesidades.
1. Plugin Async JavaScript gratuito
Async JavaScript es un plugin gratuito de WordPress de Frank Goossens, el mismo tipo detrás del popular Autoptimizar plugin.
Le ofrece una forma sencilla de diferir el análisis de JavaScript mediante la sincronización o el diferido.
Para empezar, puede instalar y activar el plugin gratuito de WordPress.org. A continuación, vaya a Settings → Async JavaScript para configurar el plugin.
En la parte superior, puede habilitar la funcionalidad del plugin y elegir entre sincronizar y diferir. Recuerde:
- Async descarga JavaScript sin dejar de analizar HTML, pero luego pausa el análisis HTML para ejecutar JavaScript.
- Deferir las descargas de JavaScript mientras se sigue analizando HTML y se espera a que se ejecute hasta que finalice el análisis HTML.
Más abajo, también puede elegir cómo manejar jQuery. Muchos temas y plugins dependen en gran medida de jQuery, así que si intenta diferir el análisis de los scripts de jQuery, puede que rompa algunas de las funciones principales de su sitio. El enfoque más seguro es excluir jQuery, pero puede experimentar con aplazarlo. Sólo asegúrese de probar su sitio a fondo.
Más adelante, también puede incluir o excluir manualmente scripts específicos de ser diferidos, incluyendo una característica agradable y fácil de usar que le permite apuntar a temas específicos o plugins que están activos en su sitio:
2. Usar el plugin WP Rocket
Aunque no permitimos que la mayoría plugins de caché en Kinsta, nosotros permiten el plugin WP Rocket porque incluye una integración incorporada para jugar bien con El almacenamiento en caché a nivel de servidor de Kinsta.
Además de un montón de otras técnicas de optimización del rendimiento, WP Rocket puede ayudarle a diferir el análisis de JavaScript en la pestaña de Optimización de Archivos del panel de control de WP Rocket. Busque la opción Cargar JavaScript diferido en la sección Archivos JavaScript.
Al igual que el plugin Async JavaScript, WP Rocket también le permite excluir jQuery para evitar problemas con el contenido de su sitio:
3. Use el Método Recomendado de Varvy (Código)
Anteriormente, mencionamos que Patrick Sexton de Varvy recomienda usar un fragmento de código que espera tanto para descargar como para ejecutar JavaScript hasta que su sitio complete su carga inicial de página.
Puede implementar este método ajustando el fragmento de código que proporciona Varvy y luego añadiendo el script a su tema inmediatamente antes de la etiqueta </body> de cierre.
Aquí está el código de Varvy:
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
Asegúrese de reemplazar «defer.js» con el nombre/ruta del archivo JavaScript que desea diferir. A continuación, puede utilizar la función wp_footer hook para inyectar el código a través del archivo functions.php del tema child.
Con este enfoque, usted envolvería el código de Varvy en algo como esto:
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}4. Deferir JavaScript a través de functions.php File
Por último, también puede añadir el atributo defer a sus archivos JavaScript sin necesidad de un plugin añadiendo el siguiente fragmento de código a su archivo functions.php:
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );Esencialmente, este fragmento le dice a WordPress que agregue el atributo defer a todos sus archivos JavaScript excepto jQuery.
Es rápido y fácil, pero no le da el nivel granular de control que ofrece algo como el plugin Async JavaScript.
Resumen
Diferir el análisis de JavaScript en su sitio WordPress es una consideración importante para el rendimiento.
Una vez que haya utilizado uno de los métodos anteriores para diferir el análisis de JavaScript en WordPress, le recomendamos que haga dos cosas:
- Pruebe su sitio para asegurarse de que el aplazamiento de ciertos scripts no ha roto el contenido clave por encima del doble. De nuevo, esto puede ocurrir comúnmente con jQuery, por lo que muchas herramientas le permiten excluir jQuery.js. Sin embargo, también podría ocurrir con otros scripts.
- Ejecute su sitio a través de GTmetrix de nuevo para asegurarse de que su sitio está difiriendo tantos scripts como sea posible (puede que no obtenga una puntuación perfecta si excluye jQuery – pero su puntuación debería ser mejor).
¿Tiene alguna pregunta sobre cómo diferir el análisis de JavaScript en WordPress? Pregunte en los comentarios!
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Deja una respuesta