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

¿Quiere minimizar los archivos en su sitio de WordPress?

Minimizar sus archivos CSS y JavaScript de WordPress les permite cargar 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 "minimización" se utiliza para describir un método que reduce el tamaño del archivo de su sitio web. Para ello, se eliminan del código fuente espacios, líneas y caracteres innecesarios.

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 ve así:

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

Se suele recomendar minimizar únicamente 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 la minimización 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 los archivos es la velocidad y el rendimiento mejorados de WordPress, ya que los archivos compactos pueden cargarse más rápido.

Sin embargo, algunos expertos creen que la mejora en el rendimiento de la mayoría de los sitios web es muy pequeña y no vale la pena el esfuerzo. La minimización elimina solo unos pocos kilobytes de datos en la mayoría de los sitios de WordPress. Puede acelerar el tiempo de carga de la página optimizando las imágenes web.

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

Veamos cómo minimizar fácilmente CSS/JavaScript en su sitio de WordPress.

Veremos 3 opciones diferentes a elegir:

¿Listo? Comencemos con nuestro método más recomendado.

Método 1. Minimiza CSS/JavaScript en WordPress con WP Rocket

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

Primero debe instalar y activar el WP Rocket. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

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

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

Después de la activación, debe visitar Ajustes »WP Rocket y vaya a la pestaña "Optimización de archivos".

Desde aquí necesitas activar la opción Minimizar archivos CSS.

WP Rocket le mostrará una advertencia de que esto puede dañar su sitio. Continúe y haga clic en el botón "Habilitar minimización de CSS". Siempre puede deshabilitar esta opción si crea problemas con su sitio web.

Luego, debe desplazarse hacia abajo hasta la sección con archivos JavaScript a continuación.

Desde aquí, simplemente marque la casilla junto a "Minimizar archivos JavaScript".

Nuevamente, verá una advertencia de que esto podría dañar su sitio. Continúe y haga clic en el botón Minimizar JavaScript.

Luego, asegúrese de hacer clic en el botón Guardar cambios para guardar su configuración.

WP Rocket ahora comenzará a minimizar sus archivos CSS y JavaScript. Puede borrar su caché en la configuración del complemento para asegurarse de que use CSS y JavaScript minimizados la próxima vez que visite el sitio.

Método 2. Minimiza CSS/JavaScript en WordPress con SiteGround

Si usa SiteGround como su proveedor de alojamiento de WordPress, puede minimizar los archivos CSS con SiteGround Optimizer.

SiteGround Optimizer es un complemento de optimización del rendimiento que se ejecuta en su propia plataforma. Funciona bien con su PHP ultrarrápido para mejorar el tiempo de carga de su sitio web.

Solo instala y activa Optimizador de SiteGround Complemento en su sitio de WordPress. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

Luego, 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 Optimizador.

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".

Luego, debe ir a la pestaña JavaScript y activar el botón de opción junto a la opción "Minimizar archivos JavaScript".

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

Método 3. Minimiza CSS/JavaScript con Autoptimize

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

Primero debes instalarlo y activarlo Optimizar automáticamente enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

Después de la activación, debe visitar Ajustes »Optimización automática Página de configuración de ajustes del complemento.

Desde aquí, primero debe habilitar la opción "Optimizar código JavaScript" en las opciones de JavaScript.

Luego, debe desplazarse hacia abajo hasta las opciones de CSS y marcar la casilla junto a "Optimizar código CSS".

Asegúrese de hacer clic en el botón Guardar cambios para guardar su configuración.

Luego puede hacer clic en el botón Borrar caché para comenzar a usar sus archivos minimizados. El complemento también se puede usar para corregir el bloqueo de JavaScript y CSS en WordPress.

Esperamos que este artículo lo haya ayudado a minimizar CSS y JavaScript en su sitio de WordPress. También puede revisar nuestro tutorial sobre cómo optimizar los signos vitales web más importantes en WordPress y seguir nuestra mejor guía de rendimiento de WordPress.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para videos tutoriales para WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.