Optimizar guiones y estilos automáticamente es un arma de doble filo

Seguro que has oído en algún rincón de Internet a algún gurú hablando de la importancia de WPO. Además de comprobar el significado de este acrónimo, puede que hayas pensado que los consejos de ese gurú son la clave para optimizar tu web y, finalmente, potenciar su rendimiento.

No seré yo quien lo cuestione. WPO es importante, pero también hay que tener mucho cuidado al poner en práctica algunos de los consejos que brindan los expertos, sin importar cuán inteligente sea esa persona.

En WordPress es común leer que existen una serie de complementos que debes instalar para mejorar el rendimiento de tu sitio web. Un plugin de SEO por aquí, un plugin de caché por allá, un plugin de seguridad siempre es necesario… En definitiva, la típica charla para enseñar a los principiantes de WordPress que parece un videojuego de Pokémon: ¡atraparlos a todos (los plugins)!

El sentido común, aunque es el menos común de los sentidos, nos dice que en WordPress debemos utilizar el menor número posible de plugins para cubrir el máximo número de funcionalidades que necesitamos. No es necesario instalar todos los complementos existentes. De hecho, no es una práctica recomendada. Optimizar su sitio web es más complejo que instalar un simple complemento.

Cuidado con los complementos milagrosos en WordPress

Pero continuando con el tema anterior de WPO, un tipo de plugin muy popular en WordPress que mejora la velocidad de tu web minificando y combinando scripts y estilos. En la mayoría de los casos, estos complementos se venden como la bala de plata por lograr 100 en los medidores de rendimiento del sitio web. Entre sus supuestas ventajas tenemos las siguientes:

1. Minimizan los estilos CSS y los scripts de JavaScript para reducir su tamaño y que se demore menos en descargarlos.
2. Combinan todos los estilos CSS y scripts de JavaScript para que sus visitantes solo carguen un solo archivo CSS y un solo script de JavaScript, lo que reduce la cantidad de solicitudes que deben realizar al servidor.
3. Ponen etiquetas async y defer para que la web no espere a que carguen los scripts y siga la ejecución.
4. Eliminan elementos innecesarios, como emojis.
5. Permiten aplicar lazy loading de imágenes para reducir aún más el tiempo de carga de tu web.

Bien, eso es perfecto. Pero si eres de los que instalan y activan un plugin de optimización automática sin leer la letra pequeña, siento decirte que las posibilidades de que tu web se rompa son muy altas.

Los complementos de optimización automática pueden parecer una panacea, pero también pueden terminar convirtiendo su sitio web en un campo minado. Y sí, no te irás de allí sin pisar uno y reventar alguna parte de tu web.

La razón es fácil de explicar. Los complementos de WordPress que combinan y minimizan los scripts de JavaScript en un solo archivo pueden no mantener el orden de ejecución de estos scripts, lo que provoca muchos errores.

Si repasamos la forma correcta de poner en cola scripts en WordPress, tenemos que ir a ver la definición de la función wp_enqueue_script() :

 wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

El tercer parámetro de esta función es una lista de dependencias, que no es más que el nombre de otros scripts que el script que estamos poniendo en cola necesita para su correcto funcionamiento. Esto significa que, cuando se ejecuta un script, todas sus dependencias ya deben estar cargadas en el sitio.

El orden en que se ponen en cola los scripts es importante, al igual que las dependencias. WordPress se encarga de crear un orden correcto si usamos la función wp_enqueue_script , asegurándose de que los scripts se carguen en la página como deben.

El problema es que si usamos un plugin que minimice y combine archivos JavaScript, el archivo JavaScript resultante de la combinación puede no respetar el orden de ejecución y dependencias que hemos definido. Y esto es lo que hace que tu código JavaScript no funcione.

Si tenemos en cuenta que cada día encontramos más JavaScript en nuestras webs de WordPress para implementar funcionalidades, instalar este tipo de plugins y activarlos a lo loco puede resultar muy problemático.

Mi sitio web no funciona. ¿Quién es el culpable?

Como desarrolladores de complementos de WordPress, es nuestro deber ser cuidadosos y tratar de tener un impacto mínimo en la funcionalidad de otros complementos. Sin embargo, muy a menudo nos encontramos con usuarios de nuestros complementos que se quejan de que la instalación de uno de nuestros complementos daña su sitio web.

Después de una investigación exhaustiva, muchas veces el problema surge porque están usando estos complementos de optimización que combinan scripts y generan errores de JavaScript cuando se ejecuta nuestro complemento. También tenga en cuenta que dado que todo el JavaScript en la web se fusiona en un solo script, si hay una falla que detiene la ejecución de ese script, ningún otro script funcionará tampoco.

La consiguiente pérdida de tiempo intercambiando mensajes hasta que conseguimos que el usuario nos dé acceso a su instalación para finalmente ver que el problema es el uso de un plugin para autooptimizarse es terrible. Por eso, si estás leyendo esto y tienes un sitio web de WordPress, me gustaría que sepas que los complementos para la optimización automática de scripts y estilos son un arma de doble filo si no los configuras correctamente.

La solución es excluir del proceso de minificación y combinación cualquier script que no funcione con el complemento de optimización automática. Algo que no es difícil de hacer si sabes qué guiones incluir. Pero el problema es que los usuarios de estos complementos de optimización automática rara vez hacen esto.

Como medida de autoprotección, los desarrolladores de complementos deben incluir filtros de compatibilidad en su código para excluir sus scripts de la combinación predeterminada y la minificación que hacen estos otros complementos. Algo que además de llevar tiempo, no siempre es posible conseguir.

Use complementos de optimización automática con mucho cuidado

Después de este artículo, no quiero que tengas la falsa creencia de que odio los complementos de optimización automática. Su éxito es un claro identificador de que son útiles y que resuelven un problema para las personas. Incluso hemos activado el complemento de optimización automática que proporciona SiteGround en nuestro propio sitio web.

Pero ten en cuenta lo siguiente: si usamos este tipo de complementos, no podemos simplemente activarlos. Tenemos que probarlos a fondo en nuestra web para poder configurarlos correctamente según nuestras condiciones específicas. Cada vez que instalamos un nuevo complemento, debemos verificar que el proceso de minificación/combinación funcione y que el sitio web siga respondiendo.

Siendo un poco responsable y cuidadoso, los problemas que encontrará al minimizar y combinar scripts y estilos CSS con complementos de optimización automática se pueden reducir considerablemente.

Imagen destacada de Markus Spiske en Unsplash.