En esta entrada vamos a ver una técnica de WPO muy importante dentro de la estrategia de optimización y mejora de rendimiento y velocidad de carga de un sitio web: la carga condicional de scripts y hojas de estilo en WordPress.
Cuando creamos un sitio web en WordPress nos encontramos con al menos un tema, y probablemente una serie de plugins. Da igual si los hemos desarrollado nosotros mismos o si utilizamos temas y/o plugins de terceros. Normalmente cada tema y cada plugin carga sus propios estilos y sus propios scripts.
Pongámonos en la piel de un desarrollador de un plugin o tema. Si son necesarios estilos y scripts para que funcione correctamente, los cargaremos en todos los templates de WordPress sin excepción, es decir, en toda la parte pública. Nunca sabemos en qué plantilla puede hacer uso de una funcionalidad concreta de ese plugin o tema el cliente final, por lo tanto se carga en todo el sitio. Pondré el foco en dos plugins concretos que utilizo en este blog y que pueden ayudar a explicar la carga condicional de JS y CSS: Disqus Comment System y Crayon Syntax Highlighter.
En mi caso, ¿la realidad cual es? Pues que tanto Disqus como Crayon sólo los utilizo en el detalle de las entradas, es decir, en la plantilla single.php. Y por defecto estos plugins se cargan en todo el site, da igual la plantilla por la que estemos navegando (index.php, category.php, page.php, 404.php, etc…) que estamos cargando igualmente CSS y JS innecesario en páginas donde no se utilizan. Toda esta carga de CSS y JS ralentiza el sitio, y está perjudicando a la velocidad de carga y experiencia de usuario.
Carga condicional de Disqus
Disqus es un plugin para comentarios que sólo lo utilizo en el detalle de las entradas, por lo tanto sólo me interesaría cargar sus CSS y JS cuando esté en la plantilla single.php. Dispone de unos hooks que podemos eliminar en el resto de plantillas para que no se carguen. Añadiremos en el functions.php de nuestro tema:
<?php
// Disqus only in single
function disqus_only_in_single() {
if ( is_singular( array( 'post', 'page' ) ) && comments_open() ) {
return;
}
remove_action( 'loop_end', 'dsq_loop_end' );
remove_action( 'wp_footer', 'dsq_output_footer_comment_js' );
}
add_action( 'wp_enqueue_scripts', 'disqus_only_in_single', 100 );Lo que hacemos es llamar a nuestra función disqus_only_in_single() en el action wp_enqueue_scripts con una prioridad muy alta para que se ejecute al final. En esta función comprobamos si estamos en el detalle de un post o una page, y además que tengamos los comentarios abiertos. En este caso se ejecuta el return y no se hace nada más. En caso contrario, es decir, en el resto de plantillas del sitio vamos a eliminar de la carga los hooks dsq_loop_end y dsq_output_footer_comment_js para que no se cargue disqus.
Carga condicional de Crayon
En caso de no conocer si el plugin que queremos cargar condicionalmente dispone de hooks para eliminarlos de la carga como en el caso de Disqus, podemos eliminarlos directamente de la cola de carga. El primer paso es identificar los handles o manejadores de ese plugin. Es un identificador único que se establece a la hora de cargar el script o el style.
Tenemos dos opciones, bucear en el código del plugin, o añadir temporalmente estas líneas en tu tema para identificarlos:
<?php
function show_handles_css_js() {
global $wp_scripts, $wp_styles;
echo "Script Handles: <br>";
foreach( $wp_scripts->queue as $handle ) :
echo $handle . '<br>';
endforeach;
echo "<br>Styles Handles: <br>";
foreach( $wp_styles->queue as $handle ) :
echo $handle . '<br>';
endforeach;
die("fin");
}
add_action( 'wp_print_scripts', 'show_handles_css_js' );Este snippet imprimirá en pantalla los handles de nuestro sitio. En el caso que nos ocupa, identificamos el handle crayon para la hoja de estilos que carga el plugin y el handle crayon_js para el archivo JS. Una vez identificados podemos eliminar el snippet anterior y añadir este otro en nuestro functions.php:
<?php
// Crayon Sintax Highlighter only in single
function crayon_only_in_single() {
if ( is_singular( array( 'post' ) ) ) {
return;
}
wp_dequeue_style( 'crayon' );
wp_dequeue_script( 'crayon_js' );
}
add_action( 'wp_enqueue_scripts', 'crayon_only_in_single', 100 );Al igual que antes, comprobamos si estamos en el detalle de un post (no hace falta comprobar si los comentarios están abiertos porque en esta ocasión no aplica, y no lo utilizo en pages). En caso contrario desencolamos el handle crayon con wp_dequeue_style(), y el handle crayon_js con wp_dequeue_script(). Esta técnica es válida para cualquier otro plugin.
¿Qué pasa si estoy desarrollando un tema?
Lo mismo. Probablemente estés acostumbrado a utilizar gulp o grunt para concatenar y minificar tus CSS y JS. Dentro de la estrategia WPO está estudiar si tienes secciones claramente diferentes en tu sitio y donde merezca la pena separar partes de CSS y/o JS.
Hoy en día, si tu hosting soporta HTTP/2 resulta más interesante cargar 10 archivos de 10KB que uno sólo de 100KB, por lo tanto es cuestión de estudiar si en algún template concreto merece la pena hacer esta diferenciación.
Puede que también te interese
