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/fileVoy 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.jsEsto 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.jsSolo 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.jsDe 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.jsVale, 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.jsComo 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.cssYa sabes… ¿quieres optimizar tu WordPress? Ahora puedes hacerlo.
Sobre este documento
Este documento está regulado por la licencia EUPL v1.2, publicado en WP SysAdmin y creado por Javier Casares. Por favor, si utilizas este contenido en tu sitio web, tu presentación o cualquier material que distribuyas, recuerda hacer una mención a este sitio o a su autor, y teniendo que poner el material que crees bajo licencia EUPL.