Thread by @bohdanps

El primer impulso al optimizar una web suele ser cachear, comprimir, combinar archivos y ala, a cargar la misma basura que ahora pesa un poco menos.

❗ No optimices cosas que no vas a usar.

Hoy quería hablar de lo esencial: carga condicional

Dentro hilo ⬇️

#WordPress #WPO

El concepto no es ningún misterio: cargar los recursos solo en aquellas páginas donde realmente se usan. Y aquí podemos diferenciar dos casos:

- Assets que cargamos nosotros mismos
- Assets que cargan los plugins, themes o el core de WordPress

El primer caso es muy sencillo, porque se supone que si cargas assets por tu cuenta, ya sabes lo que estás haciendo. Pero si no sabes del todo lo que estás haciendo, te ayudo un poco

⬇️

Al cargar manualmente archivos de JS y CSS puedes usar condicionales para que solo se carguen en páginas concretas. Ejemplo fácil para cargar CSS solo en la home:

(Kudos a @jordigarcia por mencionar cómo compartir el código en un formato tan fashion)

Con el tiempo tu archivo functions.php puede parecerse a algo así:

Si quieres profundizar en el tema, vemos varios ejemplos de esto justo aquí: empresiona.com/guia/css-avanz…

Seguimos ⬇️

Esta era la parte fácil: si tu mismo cargas los archivos, sabes qué estás cargando y dónde lo vas a necesitar.

¿Y qué pasa con decenas de assets que ya cargan plugins, themes y el mismísimo WordPress? ¿Se pueden cargar condicionalmente?

😈 Hell yeah. Veamos cómo ⬇️

Esta era la parte fácil: si tu mismo cargas los archivos, sabes qué estás cargando y dónde lo vas a necesitar.

¿Y qué pasa con decenas de assets que ya cargan plugins, themes y el mismísimo WordPress? ¿Se pueden cargar condicionalmente?

😈 Hell yeah. Veamos cómo ⬇️

Si lo hacen, técnicamente puedes dejar de cargar esos scripts (dequeue) y volver a cargarlos solo donde lo deseas y necesitas (enqueue otra vez).

Y sí, puedes hacerlo por código, pero es un poco coñazo. Para mí la forma más práctica de hacerlo es con un plugin 🔌

Hay varios plugins capaces de esto. Quizás los más populares son Perfmatters (premium) y Clearify (freemium).

Elegir uno u otro/s dependerá de qué otras opciones vas a necesitar de estos plugins.

Hagamos un par de ejemplos con Clearify, que es gratis.

‼️ Antes que nada: si nunca has hecho esto, haz las pruebas sobre una copia en local en cualquier otro lugar seguro. Que ya veo llegándome DMs de que alguien se ha cargado su web.

En algunos casos está bastante claro qué assets puedes dejar de cargar y dónde.

Ejemplo clásico: ✉️Contact form 7. CF7 carga su código tengas o no tengas un formulario de contacto en esa página.

Si solo tienes el formulario en una página, los assets solo se deberían cargar ahí

Pero si no estás seguro de si un asset se usa o no o quieres detectar assets que igual ni sabías que cargas, puedes utilizar el informe de Coverage (al que le dedicaremos un hilo aparte).

Te enseño en un momento cómo abrirlo:

Esta preciosidad nos muestra los CSS y JS cargados en la página actual, el porcentaje de código no utilizado de cada archivo e incluso línea por línea qué código se usa y cuál no.

Filtremos por ejemplo por Contact Form 7:

Está claro que en esta página nos sobra el plugin, aunque el informe nos diga que hay "algo" de código que se está usando.

Pueden ser funciones genéricas, de compatibilidad y parecidos, que no son 100% necesarias y que se pueden ahorrar. Ya profundizaremos en esto.

Seguimos ⬇️

Una vez detectada la víctima, podemos irnos a nuestro plugin de gestión de assets (en este caso Clearify).

Si vas muy perdido, la opción está en la barra de admin:

Me voy a ahorrar el explicar toda la interfaz de este tipo de plugins, pero resumiendo tendremos algo como esto. Un listado de assets que se cargan, su peso y divididos por plugin, theme o core de WP.

Ahora nos interesa el Contact Form 7, así que haríamos algo como esto: dejar de cargarlo en toda la web menos en la URL de la página de contactar.

De esta forma los assets ya no aparecerán en ninguna página menos la de contacto, donde el código sí que se usa, obviamente.

Veamos otro ejemplo más avanzado.

En esta página uso #Gutenberg pero tengo instalado #Elementor. Quiera o no, Elementor me carga algunos de sus assets en esta página que no tiene nada de Elementor:

Así que podría dejar de cargar tranquilamente el plugin o algunos de sus assets en esta página.

🔄 Ahora cambiemos las tornas.

Esta vez tenemos una página con Elementor y ¿qué es lo que no se usa? Correcto: Gutenberg. Pero sigue cargando algún asset que nos podemos ahorrar:

Supongo que a estas alturas ya no puedes esperar más para ponerte a quitar assets a diestra y siniestra. Esa es la actitud. Pero antes de empezar a romper tu web, un par de consejos finales:

1️⃣ Pon especial atención en las páginas más importantes. Esto depende del objetivo de tu web y del tráfico que recibe.

No te quedes solo con la home, mira dónde realmente están tus usuarios

En mi caso, por ejemplo, el panorama es el siguiente:

2️⃣ Cuidado con las dependencias de los archivos de JavaScript. Algunos archivos de JS son necesarios para que otros funcionen correctamente y si los dejas de cargar vas a romper algo.

Clearify muestra los archivos de los que dependen otros (texto rojo), así que ojo con ellos.

3️⃣ El informe de Coverage tiene un bug y dice que no se usan los archivos CSS que cargan las fuentes.

No le hagas caso y aplica el sentido común a la hora de dejar de cargar assets. Si sabes que lo usas - déjalo como está.

4️⃣ Si quieres dale caña la WPO de tu web (sin esperar el próximo hilo), te dejo un enlace con buen material.

Con esto ya me callo y nos leemos en el próximo hilo (siempre que éste reciba suficiente amor, por supuesto) 😜

empresiona.com/guia/wpo-optim…

Se me ha doblado un tweet en el hilo😱.

Lo que iba en el lugar del repetido es que si los plugins y themes usan buenas prácticas para cargar assets (AKA funciones enqueue con sus variaciones) podemos apuntar a ellos para cargarlos condicionalmente. Orden restaurado💪