Optimizar la carga de scripts en WordPress

Cuando hablamos de web performance siempre se analiza la velocidad de carga de los scripts, principalmente con el objetivo de que se carguen mediante un CDN.

Pero ¿cómo podríamos hacer que cualquier script de un sitio con WordPress se carguen con un CDN? Pues existe una solución.

Existen muchos sistemas de carga de algunos scripts conocidos, tipo jQuery, y hay muchos plugins que permiten cambiar su carga por la de otro CDN como el de Google o similares. Y es que Google tiene su lista de JavaScript alojados, También lo tiene CNDJS con una larga lista, pero en esta ocasión quiero hablaros de jsDelivr.

Y es que jsDelivr no solo tiene alojadas decenas de bibliotecas, sino que permite, de forma automática, la carga de cualquier plugin, theme o core de WordPress.

¿Cómo? Pues es bastante simple, la verdad. las direcciones base son las siguientes:

https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file
https://cdn.jsdelivr.net/wp/themes/project/version/file

Voy a poner un par de ejemplo para que sea mucho más sencillo. Si tienes el plugin del Classic Editor, y analizamos un poco el trunk, podemos ver que hay una carpeta «js». Esto permitiría ver que cuando el plugin se carga, seguramente se llame a un fichero del estilo a:

/wp-content/classic-editor/trunk/js/block-editor-plugin.js

Esto se serviría directamente desde nuestro hostname, lo que puede no hacerlo óptimo… pero podríamos llamarlo desde aquí:

https://plugins.trac.wordpress.org/browser/classic-editor/trunk/js/block-editor-plugin.js
https://cdn.jsdelivr.net/wp/plugins/classic-editor/trunk/js/block-editor-plugin.js

Solo hay que sustituir la URL del trac, por la URL que ellos nos proporcionan. Con esto tenemos que el JavaScript se carga desde el CDN.

Esto también funcionaría al hacer llamadas concretas a versiones concretas del plugin:

https://plugins.trac.wordpress.org/browser/classic-editor/tags/1.3/js/block-editor-plugin.js
https://cdn.jsdelivr.net/wp/plugins/classic-editor/tags/1.3/js/block-editor-plugin.js

De la misma forma podemos hacer con los ficheros de las plantillas. En este caso voy a tomar de ejemplo el Twenty Nineteen.

https://themes.trac.wordpress.org/browser/twentynineteen/1.1/js/touch-keyboard-navigation.js
https://cdn.jsdelivr.net/wp/themes/twentynineteen/1.1/js/touch-keyboard-navigation.js

Vale, sí, todo esto está muy bien pero… ¿Cómo ponerlo en práctica? Pues hay varias maneras… una de ellas es directamente mediante los desarrolladores de los plugins que te podrían dar la opción. Al funcionar de serie con cualquier plugin, el desarrollador del plugin (o theme) podría darte la opción de carga desde local o a través de este CDN. Tú decides.

La otra opción tras una búsqueda por el repositorio, es la de usar este plugin llamado NGT jsDelivr CDN que hace el trabajo por ti. Aunque quizá una de las cosas que más puede gustar es que este plugin no solo sustituye el código de plugins y themes, sino también del core.

https://core.trac.wordpress.org/browser/tags/5.0.2/src/wp-includes/js/admin-bar.js
https://cdn.jsdelivr.net/gh/WordPress/WordPress@5.0.2/wp-includes/js/admin-bar.js

Como se puede ver, se podría lanzar una versión optimizada de todos tus sitios con WordPress mejorando el rendimiento haciendo llamadas a este CDN.

Por cierto, acabo de probar y también funciona con los CSS.

https://core.trac.wordpress.org/browser/tags/5.0.2/src/wp-includes/css/admin-bar.css
https://cdn.jsdelivr.net/gh/WordPress/WordPress@5.0.2/wp-includes/css/admin-bar.css

Ya sabes… ¿quieres optimizar tu WordPress? Ahora puedes hacerlo.

Categorías WordPress

5 comentarios en “Optimizar la carga de scripts en WordPress”

  1. Javi,

    ¿Tienes alguna estimación de la mejora que puede suponer? Entiendo que para un WordPress con poca «chica» y un buen servidor no se note mucho. ¿Pero un Woocommerce a full?

    ¿Otra cosa, cómo se gestionan las actualizaciones de plugins? ¿De forma manual?

    • No he podido hacer muchas pruebas.. se supone que en sitios grandes un CDN aporta mucho… como todo, tiene sus cosas buena sy malas. Lo interesante es eso, que viene de serie la opción de WordPress, de forma que cualquiera puede usarlo. Cuando haga pruebas las comentaré.

  2. Hola Javi, por lo que he probado el plugin NGT jsDelivr CDN hace de forma automática para todos los plugins y themes que están en el repositorio de WordPress. Así que el tema de las actualizaciones está claro.

    ¿Como se haría con Plugins y themes premium? ¿Se puede subir a jsdelivr archivos o cómo se modificaría la carga? si haces más pruebas ya nos informas.

    ¡Gracias Javi!

Deja un comentario