Cómo quitar JavaScript y CSS sin uso en toda o parte de tu web WordPress

Una vez que nos ponemos a optimizar en serio una web WordPress, una de las tareas imprescindibles es localizar todos aquellos archivos JavaScript y CSS sin uso, que no son necesarios, y desactivarlos.

¿Por qué hay JavaScript y CSS inútiles?

Bueno, lo primero que debes saber es que no siempre serán inútiles.

Pueden no ser necesarios en algunas páginas pero útiles en otras, aunque es posible que encuentres también algún archivo JavaScript y CSS realmente sin uso en toda tu web.

Uno de los motivos de encontrar archivos JavaScript y CSS sin uso es debido a los plugins, pues cuando un desarrollador crea una utilidad para WordPress no sabe dónde la va a utilizar cada persona que instale su plugin, y si éste necesita un JavaScript o estilos CSS los cargará en toda la web, para que la utilidad esté siempre disponible.

Un ejemplo claro es el formulario de contacto Contact Form 7. Para su funcionamiento y visualización correcta necesita JavaScript y CSS, pero como el autor del plugin no sabe dónde vas a poner tú el formulario, lo que hace el plugin es cargar sus recursos necesarios en toda la web.

Pero no solo los plugins, también WordPress comete este tipo de «errores», por ejemplo, cargando archivos para la visualización de emojis, aunque no los uses en tu web.

Cómo detectar JavaScript y CSS sin uso

Si te ha quedado claro el motivo de que esto suceda, vamos a ver cómo detectar estos archivos de código sin uso para, luego, aprender a quitarlos, según cada caso.

Para conseguirlo nos serviremos de la consola de desarrollo del navegador. Las capturas que te mostraré son las de Chrome pero son muy similares en el resto de navegadores modernos.

Para empezar, abre la consola del navegador con la combinación de teclas Opción+Comando+i (Mac) o Control+May+i (PC), o haciendo clic derecho en la página analizar y pulsando la opción de «Inspeccionar».

Una vez abierta la consola vamos a añadir una herramienta oculta por defecto: Coverage, que encontrarás haciendo clic en el menú de ajustes → More tools → Coverage.

Cuando hagas clic en ‘Coverage’ la nueva herramienta aparecerá en la parte inferior de la consola, con un icono para que recargues la página y analizar los recursos que carga.

Si pulsas el icono se volverá a cargar la página y aparecerá una lista de recursos, ordenados de mayor a menor peso en bytes, y la columna que buscamos, la de «Unused bytes», o bytes sin uso.

Esta herramienta, ‘Coverage’, sirve para mostrar todos los códigos que carga una página y su índice de cobertura, o sea, cuán necesarios son para la carga de esa página, de 0 a 100.

Como verás, es enormemente útil para lo que estamos analizando.

Pues bien, en esa lista vas a ver que hay archivos JavaScript y CSS con un 100% de bytes sin usar en la página, o sea, que se han cargado esos archivos pero la página no los necesita para la correcta carga y visualización de todo su contenido y recursos.

Pues bien, desde ahí, si haces clic en algún archivo con bytes sin uso, su código se mostrará en la parte superior, con unos indicadores de color en los que el rojo es bytes sin uso y el azul son los bytes en uso.

Por supuesto, en los archivos con un 100% de bytes sin uso todo el código estará en rojo.

Una vez hayas identificado qué archivos JavaScript y CSS no tienen uso en tu página o páginas, ya sabemos por dónde empezar, cómo optimizar la carga eliminando la carga de todo ese código innecesario.

Nota: A la hora de optimizar tu web WordPress, eliminar JavaScript y CSS sin uso debe hacerse página a página. Hay pocos archivos JS y CSS sin uso que se carguen en toda la web, la mayoría son por página. No obstante, lo ideal es empezar primero por los que se carguen sin uso en toda la web.

Cómo eliminar el código JavaScript y CSS sin uso, innecesario

Hay varias maneras de eliminar esos códigos sin uso.

Con código

Como siempre, uno de los métodos más limpios de eliminar lo que sobra es usar funciones WordPress que, en este caso, eviten la carga de estos archivos innecesarios.

Un ejemplo muy claro serían los scripts y estilos que WordPress carga por defecto para compatibilidad con emojis que, si no los usas, siempre se cargarán sin necesidad.

Lo que tienes que hacer es, en este caso, desactivarlos así:

// Desactivar soporte y estilos de Emojis
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

Otro buen ejemplo, aplicable a muchos plugins, es el de anular estilos y scripts de Contact Form 7 en páginas que no tengan formularios, así:

// Quitar estilos de Contact Form 7 en páginas sin formulario
add_action( 'wp_print_styles', 'ayudawp_deregister_styles', 100 );
function ayudawp_deregister_styles() {
if ( ! is_page( 'contacto' ) ) {
wp_deregister_style( 'contact-form-7' );
}
}
// Quitar JavaScrip de Contact Form 7 en páginas sin formulario
add_action( 'wp_print_scripts', 'ayudawp_deregister_javascript', 100 );
function ayudawp_deregister_javascript() {
if ( ! is_page( 'contacto' ) ) {
wp_deregister_script( 'contact-form-7' );
}
}

Para quitar archivos CSS y JS sin uso se pueden usar las funciones __return_false() o  __return_empty_array().

Por ejemplo:

add_filter( 'jetpack_implode_frontend_css', '__return_false' );

También puedes usar la función wp_dequeue_script o wp_deregister_script() para anular scripts o wp_deregister_style() para anular estilos.

Por ejemplo:

add_action( 'wp_enqueue_scripts', function ()
{
wp_dequeue_script( 'devicepx' );
}, 20 );

Con plugins

Si no te sientes con la suficiente confianza aún como para quitar archivos JSS y CSS sin uso con códigos hay algún plugin que nos puede ayudar en esta tarea.

Y mi favorito sin duda, es Asset CleanUp, que aunque tiene una versión Pro de pago, con la versión gratuita que tenemos en el directorio de WordPress.org nos sirve de sobra para esta labor.

Asset CleanUp es un plugin para optimizar WordPress que tiene montones de utilidades adicionales, muy parecido a Autoptimize, pero en lo que destaca sobre el resto es en la gestión de JavaScript y CSS, tanto globalmente como página a página.

Para ello dispone de unas pantallas de ajustes en las que configurar qué queremos analizar y optimizar y cómo.

Pero lo más importante, es que añade una caja al editor de WordPress desde la que podemos comprobar qué archivos JS y CSS se cargan en cada página y, desde ahí, decidir si desactivarlos o no.

Se muestran clasificados por códigos provenientes de plugins, el tema, núcleo de WordPress, terceros y código personalizado, y para ver cara recurso concreto debes desplegarlos.

En cada sección te indica qué archivos JS y CSS se cargan, de qué origen y opciones para:

• Desactivarlo en la página actual.
• Desactivarlo en toda la web.
• Desactivarlo en todo el tipo de contenido actual (entradas, páginas, etc.)

Adicionalmente, verás que hay opciones avanzadas, marcadas con un candado, pertenecientes a la versión Pro, pero con las opciones de la versión gratuita podemos desactivar JavaScript y CSS sin uso fácilmente.

Dicho esto, si identificaste en el paso anterior qué archivos JavaScript y CSS estaban sin uso en la página, tienes la información necesaria para, desde los ajustes del plugin, desactivarlos de manera segura y rápida, a golpe de clic.

Solo acuérdate de actualizar la página en la que cambies ajustes.

Truco: Si sabes de algún JS o CSS que solo será necesario para una página o entrada concreta no hace falta que lo desactives página a página menos en la que sea necesario. Desactívalo globalmente en esa página que lo necesite y a continuación podrás activarlo solo en esa página.

Espero haberte ayudado a comprender esta labor importante de cara a la optimización de WordPress, y que te sirva para una gestión más eficaz de los recursos de tu web, ofreciendo mejores tiempos de carga y una mejor experiencia a tus visitantes y usuarios.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!