Cómo Minificar Archivos CSS / JavaScript en WordPress (3 Formas)

Minimizar sus archivos CSS y JavaScript de WordPress puede hacer que se carguen más rápido y acelerar su sitio de WordPress.

En esta guía, le mostraremos cómo minimizar fácilmente los archivos CSS/JavaScript en WordPress para mejorar el rendimiento y la velocidad.

¿Qué es la minificación y cuándo la necesitas?

El término ‘minificar’ se utiliza para describir un método que reduce el tamaño de los archivos de su sitio web. Lo hace eliminando espacios en blanco, líneas y caracteres innecesarios del código fuente.

Aquí hay 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;
}

Después de minimizar el código, se verá así:

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

Por lo general, 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 minimizarlos no mejorará la velocidad de carga de la página para sus usuarios. Esto se debe a que PHP es un lenguaje de programación del lado del servidor, lo que significa que se ejecuta en los servidores antes de que se envíe algo al navegador web del visitante.

La ventaja de minimizar archivos es la velocidad y el rendimiento mejorados 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 que no vale la pena. La minificación solo elimina unos pocos kilobytes de datos en la mayoría de los sitios de WordPress. Puede reducir más el tiempo de carga de la página optimizando las imágenes para la web.

Si está tratando de lograr una puntuación de 100/100 en la herramienta Google Pagespeed o GTMetrix, entonces minimizar CSS y JavaScript mejorará significativamente su puntuación.

Habiendo dicho eso, echemos un vistazo a cómo minimizar fácilmente CSS/JavaScript en su sitio de WordPress.

Vamos a repasar 3 opciones diferentes entre las que puede elegir:

• Método 1. Minificar CSS/JavaScript en WordPress usando WP Rocket (Recomendado)
• Método 2. Minificar CSS/JavaScript en WordPress usando SiteGround
• Método 3. Minificar CSS/JavaScript usando Autoptimize

¿Listo? Empecemos con nuestro mejor método recomendado.

Método 1. Minificar 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 WP Rocket plugin. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un WordPress plugin.

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

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

Tras la activación, debe visitar el Ajustes » WP Rocket y cambie a la pestaña ‘Optimización de archivos’.

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

WP Rocket luego le mostrará una advertencia de que esto podría romper cosas en su sitio. Continúe y haga clic en el botón ‘Activar Minify CSS’. Siempre puede desactivar esta opción si causa algún problema con su sitio web.

A continuación, debe desplazarse hacia abajo hasta la sección Archivos JavaScript a continuación.

Aquí, simplemente marque la casilla junto a la opción ‘Minimizar archivos JavaScript’.

Nuevamente, verá una advertencia de que esto podría romper cosas en su sitio. Continúe y haga clic en el botón ‘Activar Minify JavaScript’.

Después de eso, no olvide hacer clic en el botón Guardar cambios para almacenar su configuración.

WP Rocket ahora comenzará a minimizar sus archivos CSS y JavaScript. Puede borrar su caché en el plugin configuración para asegurarse de que comience a usar el CSS y JavaScript minimizados para el próximo visitante del sitio web.

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

Si está utilizando SiteGround como su proveedor de alojamiento de WordPress, puede minimizar los archivos CSS utilizando SiteGround Optimizer.

SiteGround Optimizer es una optimización del rendimiento plugin que funciona en su propia plataforma. Funciona bien con su PHP ultrarrápido para mejorar los tiempos de carga de su sitio.

Simplemente instale y active el Optimizador de SiteGround plugin en su sitio de WordPress. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un WordPress plugin.

Después de eso, debe hacer clic en el menú SG Optimizer en la barra lateral de administración de WordPress.

Esto lo llevará a la configuración de SG Optimizer.

Desde aquí, debe hacer clic en el botón ‘Ir a la interfaz’ en ‘Otras optimizaciones’.

En la siguiente pantalla, debe activar el interruptor junto a la opción ‘Minimizar archivos CSS’.

A continuación, debe cambiar a la pestaña JavaScript y activar el interruptor junto a la opción ‘Minimizar archivos JavaScript’.

¡Eso es todo! Ahora puede vaciar su caché de WordPress y visitar su sitio web para cargar versiones reducidas de archivos CSS y JS.

Método 3. Minificar CSS/JavaScript usando Autoptimize

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

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

Tras la activación, debe visitar el Ajustes » Optimizar automáticamente página para configurar el plugin ajustes.

Desde aquí, primero debe marcar la opción ‘Optimizar código JavaScript’ en Opciones de JavaScript.

Después de eso, debe desplazarse hacia abajo hasta las Opciones de CSS y marcar la casilla junto a la opción ‘Optimizar código CSS’.

No olvide hacer clic en el botón Guardar cambios para almacenar su configuración.

Luego puede hacer clic en el botón Vaciar caché para comenzar a usar sus archivos minificados. Él plugin también se puede usar para corregir el bloqueo de renderizado de JavaScript y CSS en WordPress.

Esperamos que este artículo le haya ayudado a minimizar CSS y JavaScript en su sitio de WordPress. Es posible que también desee ver nuestro tutorial sobre la optimización de los elementos vitales principales de la web en WordPress y seguir nuestra guía definitiva de rendimiento de WordPress.

, WordPress. Twitter y Facebook.

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