Hoy volvemos a hablar de WPO para WordPress. Concretamente, de la carga condicional o (como yo la suelo llamar) “carga inteligente”.
Personalmente, creo que la carga condicional es una de las técnicas WPO que mejores resultados dan en WordPress, tanto desde el punto de vista del UX como de las métricas en Google PageSpeed Insights.
En la programación de scripts a medida realmente no es necesario el conditional load ya que solo se cargan los scripts donde realmente se necesitan. En los CMS, por el contrario, cuando instalamos un plugin este suele cargarse en TODAS las páginas de la web, aunque realmente no se utilice en algunas de ellas.
Te voy a poner varios ejemplos muy claros:
Cuando instalamos Disqus Comment System, automáticamente se cargarán los scripts que hacen posible la carga de Disqus en toda la web aunque SOLO los necesitemos cuando cargamos un post o una parte con comentarios.
La mayoría de plugins de botones sociales instalan sus scripts en TODA la web y, en algunos casos, puede que no los estemos utilizando a nivel general.
Ahora están de moda las tablas de contenidos en los posts, pero solo las usamos en posts y páginas de contenido informativo. Aún así, sus scripts se cargan en toda la web.
Si instalamos un plugin para gráficas y estadísticas podemos no necesitar que se cargue en toda la web, sino solo en UNA página en concreto. Sin embargo, se estarán cargando sus scripts en toda la web.
Cuando nos referimos a scripts, nos referimos a peticiones a archivos Javascript, ya que son los que más impactan en el WPO como he dicho en este artículo, pero también de hojas de estilo CSS, ya que en muchos casos también podemos prescindir de ellas.
Vamos con una ronda de preguntas y respuestas, que creo que es la mejor forma de plasmar esto.
¿Se ahorran muchas peticiones JS y CSS con la carga condicional?
Pues la verdad es que muchas peticiones no se ahorran. Lo que ocurre es que las “reglas” impuestas por PageSpeed y LightHouse para sus métricas son bastante estrictas y, en muchos casos, se puede mejorar bastante la puntuación simplemente eliminando ciertos JS o CSS demasiado grandes y complejos.
¿Afecta esto en algo a Google y al SEO?
Personalmente creo que es una de las técnicas WPO que más afecta al SEO desde el punto de vista del rastreo (crawl budget) y también de las puntuaciones UX, como ya he dicho.
¿Los desarrolladores están haciendo mal su trabajo?
La respuesta no es fácil. En algunos casos sí que hacen mal su trabajo y en otros no.
La mayoría de desarrolladores de plugins registran los CSS y JS de su plugin para que se carguen en TODO el front-end para evitar problemas de compatibilidad posteriores.
¿La carga condicional es efectiva en todos los casos?
Pues la verdad es que no. Se consiguen más resultados cuando hay muchos plugins que cargan distintos archivos o cuando el theme está bien hecho y carga muchos archivos JS y CSS diferentes y no uno solo con todo el contenido.
La carga condicional suele aprovecharse mejor en sitios MUY grandes con muchos elementos.
¿Podemos combinar la carga condicional con plugins de cache como WP Rocket?
Quiero aclarar esto porque me lo van a preguntar (estoy casi seguro al 100%). La respuesta es sí, la carga condicional se puede combinar perfectamente con los plugins de cache actuales como WP Rocket, Swift Performance, LiteSpeed Cache, etc.
Ahora que se han respondido algunas preguntas (si tienes alguna más, déjala en los comentarios), vamos a ver cómo implementar y configurar carga condicional o conditional load en WordPress.
Vas a ver que he separado en dos grupos ya que, aunque el método “original” es desencolar los JS y CSS declarados con código, últimamente han ido apareciendo plugins de “organización” de plugins que realmente realizan conditional load y otros plugins con una interfaz gráfica bastante intuitiva.
Las interfaces “intuitivas”, en este caso, no significan que el conditional load sea una tarea para cualquier usuario con cualquier nivel de conocimientos. Simplemente implican que la tarea será más agradable a la vista.
Carga condicional mediante código
A mí, personalmente, es la forma que más me gusta. Los plugins y themes encolan los CSS y JS que se van a cargar y podemos “ajustar” esto con condicionales para elegir donde se van a cargar exactamente.
Este tipo de carga condicional existe desde hace mucho tiempo, pero antes se hacía con código en el functions.php del theme activo y, desde hace un par de años, han ido apareciendo plugins muy interesantes con interfaces gráficas para hacer esta tarea mucho más fácil.
Por ponerte un ejemplo: si usamos el plugin Table of Content Plus podemos hacer que sus archivos CSS y JS solo se carguen en las páginas de post con el siguiente código:
function adiostablacss() { if ( !is_singular( 'post' ) ){ wp_dequeue_style( 'toc-screen' ); } } add_action( 'wp_print_scripts', 'adiostablacss' ); function adiostablajs() { if ( !is_singular( 'post' ) ){ wp_dequeue_style( 'toc-front' ); } } add_action( 'wp_print_scripts', 'adiostablajs' );
1
2
3
4
5
6
7
8
9
10
11
12
13
function adiostablacss() {
if ( !is_singular( 'post' ) ){
wp_dequeue_style( 'toc-screen' );
}
}
add_action( 'wp_print_scripts', 'adiostablacss' );
function adiostablajs() {
if ( !is_singular( 'post' ) ){
wp_dequeue_style( 'toc-front' );
}
}
add_action( 'wp_print_scripts', 'adiostablajs' );
Y este sería un ejemplo para hacer lo mismo con los rich snippets de las “estrellitas” cargados con el plugin YASR:
function adiosyasrcss() { if ( !is_singular( 'post' ) ){ wp_dequeue_style( 'rater' ); wp_dequeue_style( 'tippy' ); wp_dequeue_style( 'rater' ); } } add_action( 'wp_print_scripts', 'adiosyasrcss' ); function adiosyasrjs() { if ( !is_singular( 'post' ) ){ wp_dequeue_style( 'yasrcsslightscheme' ); wp_dequeue_style( 'yasrcss' ); } } add_action( 'wp_print_scripts', 'adiosyasrjs' );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function adiosyasrcss() {
if ( !is_singular( 'post' ) ){
wp_dequeue_style( 'rater' );
wp_dequeue_style( 'tippy' );
wp_dequeue_style( 'rater' );
}
}
add_action( 'wp_print_scripts', 'adiosyasrcss' );
function adiosyasrjs() {
if ( !is_singular( 'post' ) ){
wp_dequeue_style( 'yasrcsslightscheme' );
wp_dequeue_style( 'yasrcss' );
}
}
add_action( 'wp_print_scripts', 'adiosyasrjs' );
Y este es otro ejemplo para cargar solo los JS y CSS de un plugin en una página exacta:
function adiostablacss() { if ( is_page( [4625] ){ wp_dequeue_style( 'toc-screen' ); } } add_action( 'wp_print_scripts', 'adiostablacss' ); function adiostablajs() { if ( is_page( [4625] ){ wp_dequeue_style( 'toc-front' ); } } add_action( 'wp_print_scripts', 'adiostablajs' );
1
2
3
4
5
6
7
8
9
10
11
12
13
function adiostablacss() {
if ( is_page( [4625] ){
wp_dequeue_style( 'toc-screen' );
}
}
add_action( 'wp_print_scripts', 'adiostablacss' );
function adiostablajs() {
if ( is_page( [4625] ){
wp_dequeue_style( 'toc-front' );
}
}
add_action( 'wp_print_scripts', 'adiostablajs' );
Como ves, hacer esto manualmente era bastante “engorroso”, pero también tengo que reconocer que es el método más eficiente.
Si necesitas conocer los handler de los JS y CSS registrados, puedes usar el plugin Query Monitor (uno de mis favoritos para resolver problemas en WordPress).
Al tratarse de códigos que debemos introducir en el functions.php del theme activo, podemos introducirlos con Code Snippets.
Carga condicional con plugins
Lo primero que quiero repetir es que, en los últimos años, los plugins han avanzado mucho en este terreno.
Ahora tenemos interfaces gráficas intuitivas, algo que a principio de 2018 casi no había.
Por otro lado, ahora existen plugins que nos permiten seleccionar directamente por “plugin”, lo que nos permite excluir de la carga todos los archivos de un plugin de golpe.
Vamos a ver algunos plugins que, personalmente, me parecen muy interesantes para realizar y MANTENER una carga condicional en WordPress. Recalco lo de MANTENER ya que esto podemos hacerlo 1 vez y dejarlo, pero tendremos que revisarlo constantemente en las actualizaciones para evitar que falle algo.
Perfmatters y su Scripts Manager
Del plugin Perfmatters ya he hablado en este post, ya que personalmente me encanta su scripts manager y la organización de la interfaz para hacer carga condicional.
Aunque Perfmatters es un plugin de tweaking para WordPress, a mí lo que más me gusta de él es la posibilidad de hacer conditional load organizado.
Soy consciente de que otros plugins (como Asset CleanUp Pro) tienen más funcionalidades en la parte de carga condicional, pero también son muchísimo más difíciles de configurar y de ajustar al tener más cosas que tocar.
Perfmatters tiene dos formas de “trabajar”: una, desencolando los JS y CSS (los detecta previamente); otra, excluyendo directamente por plugins (ya que previamente ha detectado sus JS y CSS).
Si quieres saber más sobre Perfmatters, a continuación te dejo este vídeo que he grabado para ti. En él podrás ver todas sus funcionalidades, incluida la carga condicional en WordPress:
Plugin Organizer para carga condicional de plugins
La opción anterior era de pago, mientras que Plugin Organizer para WordPress es gratuito. Sin embargo, solo tiene un modo de funcionamiento: carga condicional por plugins.
La interfaz de Plugin Organizer es bastante menos intuitiva y bonita que Perfmatters, pero puede servirte.
La esencia de Plugin Organizer es la misma que la de Perfmatters, pero con una interfaz bastante diferente como puedes ver, ya que se centra en los plugins directamente en lugar de en los CSS y JS declarados por los plugins.
Plugins Organizer tiene muchas más opciones relacionadas con la gestión de carga de los plugins, cosa que también afecta a la ejecución de PHP por parte de los mismos.
Este plugin puede ser, en instalaciones muy grandes, mucho más efectivo que otras opciones como Perfmatters o Asset CleanUp Pro.
Lo mejor de Plugin Organizer es que es GRATIS y puedes encontrarlo en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/plugin-organizer/
Asset CleanUp Pro para plugins & JS y CSS
El plugin Asset CleanUp Pro y su variante gratuita Asset CleanUp son grandes desconocidos para mucha gente.
Dentro del campo de la optimización de código JS y CSS en WordPress, el plugin Asset CleanUp Pro es de lo más completo que existe, ya que además nos permite implementar distintos tweaks en WordPress.
No obstante, Asset CleanUp Pro va un poco más allá y nos permite también hacer carga condicional de plugins, por lo que combina Perfmatters y Plugin Organizer aunque con una interfaz bastante más “difícil” o menos intuitiva.
Como he dicho, si tuviera que elegir un plugin para hacer TODOS los cambios y optimizaciones en el JS y CSS cargado, elegiría Asset CleanUp Pro. Sin embargo, hay que aclarar que es bastante complejo y que requiere bastantes conocimientos sobre el tema.
En todo caso, la carga condicional no es para usuarios principiantes o con pocos conocimientos sobre WordPress.
Otros plugins para carga condicional en WordPress
Como he dicho, desde hace unos años han empezado a aparecer plugins para implementar carga condicional o conditional load en WordPress.
Existen alternativas como el viejo Scripts Dequeuer (creo que fue el primer plugin de este tipo), sobre el que hice un vídeo hace más de un año:
También hay alternativas creadas por desarrolladores españoles que son mucho más simples, como por ejemplo BF WPO Dequeuer.
Y eso sin contar soluciones “específicas” y muy utilizadas como Disqus Conditional Load, que lo menciono a pesar de que no soy muy amigo de Disqus en WordPress.
Conditional load a efectos prácticos
Y ya no sé qué más decir… La carga condicional consiste en combinar la lógica con el método de prueba y error, ya que no existe un método «abc» para hacer carga condicional.
Para realizar una carga condicional efectiva, en muchos casos, vamos a tener que probar la web después de aplicar los cambios, dado que es muy fácil “romper” cosas.
Lo ideal es poder hacerlo sin prisa, tomándose las cosas con cambia y usando la lógica, con una estrategia firme para lo que sabemos fijo que no necesitamos y con una estrategia conservadora para los CSS y JS que no sabemos si podemos desactivar en ciertas partes de la web.
Por último, recuerda que con la carga condicional se consiguen resultados notables en webs muy sobrecargadas, algo que predomina debido a las implementaciones con themes multipurpose y con demasiados plugins activos. Como he dicho antes, cuanto más grande sea el sitio web, más efectiva será una carga condicional y más beneficios vamos a notar.