Cómo minimizar archivos CSS / JavaScript en WordPress (3 maneras)

Nadie quiere un sitio web lento. Los tiempos de carga lentos frustran a los visitantes y perjudican la clasificación en las búsquedas.

Como especialistas en optimización del rendimiento de WordPress, hemos descubierto que minimizar los archivos CSS y JavaScript puede ayudar a crear un sitio web más rápido y eficaz.

En esta guía, le mostraremos cómo minimizar fácilmente los archivos CSS y JavaScript en WordPress para mejorar el rendimiento y la velocidad, mejorando la experiencia del usuario y la visibilidad en los motores de búsqueda.

¿Qué es la minimización y cuándo es necesaria?

El término “minimizar” se utiliza para describir un método que reduce el tamaño de los archivos de su sitio web en WordPress. Para ello, quita espacios en blanco, líneas y caracteres innecesarios del código fuente.

He aquí un ejemplo de código CSS normal:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Una vez minimizado el código, tendrá el siguiente aspecto:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Normalmente, se recomienda minimizar solo los archivos que se envían a los navegadores de los usuarios. Esto incluye archivos HTML, CSS y JavaScript.

También puede minimizar los archivos PHP, pero esto no mejorará la velocidad de carga de la página para sus usuarios. Esto se debe a que PHP es un idioma de programación del lado del servidor, lo que significa que se ejecuta en los servidores antes de que nada se envíe al navegador / explorador del visitante.

La ventaja de minimizar los archivos es la mejora de la velocidad y el rendimiento de WordPress, ya que los archivos compactos se cargan más rápido.

Sin embargo, algunos expertos creen que la mejora del rendimiento es muy pequeña para la mayoría de los sitios web y no merece la pena. La minimización solo quita unos pocos kilobytes de datos en la mayoría de los sitios de WordPress. Puedes reducir más el tiempo de carga de la página optimizando las imágenes para la web.

Si estás intentando conseguir una puntuación de 100/100 en Google PageSpeed Insights o en la herramienta GTMetrix, entonces minimizar CSS y JavaScript mejorará significativamente tu puntuación.

Dicho esto, veamos cómo minimizar fácilmente CSS/JavaScript en tu sitio WordPress. Vamos a repasar 3 opciones diferentes que puede elegir:

¿Preparado? Empecemos con nuestro método más recomendado.

Método 1. Minimizar CSS/JavaScript en WordPress usando WP Rocket

Este método es más fácil y se recomienda para todos los usuarios. Funciona independientemente del alojamiento de WordPress que esté utilizando.

Primero, necesitas instalar y activar el plugin WP Rocket. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

WP Rocket es el mejor plugin de caché para WordPress del mercado. Te permite añadir fácilmente el almacenamiento en caché a WordPress y mejorar significativamente la velocidad del sitio web y los tiempos de carga de la página.

Para más detalles, consulte nuestro tutorial sobre cómo instalar y establecer WP Rocket en WordPress.

Una vez activado, debe visitar la página Ajustes ” WP Rocket y cambiar a la pestaña ‘Optimización de archivos’.

Desde aquí, debe marcar la opción Minimizar archivos CSS.

WP Rocket le mostrará una advertencia de que esto podría romper cosas en su sitio. Sigue adelante y haz clic en el botón ‘Activar Minimizar CSS’. Siempre puedes desactivar esta opción si causa algún problema / conflicto / incidencia en tu sitio web.

A continuación, desplácese hasta la sección Archivos JavaScript.

Marque / compruebe la casilla situada junto a la opción “Minimizar archivos JavaScript”.

De nuevo, verás una advertencia de que esto podría romper cosas en tu sitio. Sigue adelante y haz clic en el botón “Activar minimizar JavaScript”.

Después, no olvides hacer clic en el botón “Guardar cambios” para guardar tus ajustes.

WP Rocket empezará a minimizar tus archivos CSS y JavaScript. Puedes vaciar tu caché en los ajustes del plugin para asegurarte de que empieza a usar el CSS y JavaScript minimizados para el siguiente visitante del sitio web.

Método 2. Minimizar CSS/JavaScript en WordPress usando SiteGround

Si utiliza SiteGround como proveedor de alojamiento de WordPress, puede minimizar los archivos CSS con el Optimizador de SiteGround.

SiteGround Optimizer es un plugin de optimización del rendimiento que funciona en su propia plataforma. Funciona bien con su Ultrafast PHP para mejorar los tiempos de carga de tu sitio.

Simplemente instala y activa el plugin SiteGround Optimizer en tu sitio WordPress. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

A continuación, debe hacer clic en el menú SG Optimizer de la barra lateral del administrador de WordPress.

Esto le llevará a los ajustes del SG Optimizer.

Desde aquí, debe hacer clic en el botón “Ir a portada / vista pública” en “Otras optimizaciones”.

En la pantalla siguiente, podrá gestionar la interfaz CSS.

Debe activar el conmutador situado junto a la opción “Minimizar archivos CSS”.

A continuación, debe cambiar a la pestaña JavaScript y activar el conmutador situado junto a la opción “Minimizar archivos JavaScript”.

Ya está. Ya puedes vaciar la caché de WordPress y visitar tu sitio web para cargar las versiones minimizadas de los archivos CSS y JS.

Método 3. Minimizar CSS/JavaScript usando Autoptimize

Este método se recomienda para los usuarios que no están en SiteGround y no utilizan WP Rocket.

En primer lugar, debe instalar y activar el plugin Autoptimize. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, debe visitar la página Ajustes ” Autoptimizar para configurar los ajustes del plugin.

Desde aquí, primero tiene que marcar la opción “Optimizar código JavaScript” en Opciones de JavaScript.

A continuación, desplácese hasta las opciones CSS.

Una vez allí, debe marcar / comprobar la casilla siguiente a la opción “Optimizar código CSS”.

No olvides hacer clic en el botón “Guardar cambios” para establecer los ajustes.

A continuación, puede hacer clic en el botón Vaciar caché para empezar a utilizar los archivos minimizados. El plugin también se puede utilizar para corregir el bloqueo de procesamiento de JavaScript y CSS en WordPress.

Esperamos que este artículo te haya ayudado a minimizar CSS y JavaScript en tu sitio WordPress. Puede que también quieras ver nuestra guía sobre la optimización de Core Web Vitals en WordPress y nuestra selección experta de los mejores editores de arrastrar y soltar para páginas de WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.