condicional css js

Carga condicional de JS y CSS para mejorar el rendimiento y la velocidad de carga

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:

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:

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:

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.


¿Me invitas a un café?
Si te ha gustado el blog o algún artículo en concreto te ha ayudado a resolver una duda o problema que tenías…¿me invitas a un café?

Puede que también te interese

Cómo personalizar el logo y el enlace del login de WordPress
Éste es el aspecto que presenta la pantalla de login para acceder al back-end de nuestro WordPress: Es muy común que algún cliente nos pida…
Cómo crear un formulario de log-in/log-out personalizado con WordPress
En la anterior entrada Cómo restringir el acceso al back-end de WordPress a usuarios no administradores vimos como limitar el acceso al panel de control…
Shortcake: User Interface para los shortcodes de WordPress
Shortcake es una nueva funcionalidad de WordPress que permitirá establecer una interfaz amigable para los shortcodes. Posibilitará insertar un shortcode como si de un elemento…
Extendiendo los campos personalizados o custom fields en WordPress
En una entrada anterior vimos cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante, haciendo uso de meta_boxes para ordenar…