Hace algún tiempo, descubrimos que la minificación de archivos CSS y JavaScript puede reducir drásticamente los tiempos de carga. Después de probarlo en algunos sitios de WordPress, nos sorprendieron los resultados. Las páginas que tardaban 5-6 segundos en cargarse de repente cayeron a 2-3 segundos.
La verdad es que cada segundo adicional de tiempo de carga te cuesta visitantes y clientes potenciales. Cuando tus archivos CSS y JavaScript están inflados con espacios innecesarios, comentarios y formato, literalmente están frenando tu negocio.
La minificación elimina todo ese código extra sin cambiar el funcionamiento de tu sitio.
Por eso hemos elaborado esta guía que te muestra cómo minificar tus archivos de WordPress. Te guiaremos a través de diferentes enfoques para que puedas elegir lo que mejor funciona para tu sitio.
¿Qué es la minificación y cuándo la necesitas?
El término 'minificar' se utiliza para describir un método que hace que los tamaños de los archivos de tu sitio web de WordPress sean más pequeños. Lo hace eliminando espacios en blanco, líneas y caracteres innecesarios del código fuente.
Aquí tienes 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 minificar 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 minificar solo los archivos que se envían a los navegadores del usuario. Esto incluye archivos HTML, CSS y JavaScript.
También puedes minificar archivos PHP, pero esto no mejorará la velocidad de carga de la página para tus 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 algo se envíe al navegador web del visitante.
La ventaja de minificar archivos es una mejor velocidad y 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 vale la pena el esfuerzo. La minificación solo elimina unos pocos kilobytes de datos en la mayoría de los sitios de WordPress. Puedes reducir el tiempo de carga de la página más optimizando las imágenes para la web.
Si estás intentando obtener una puntuación de 100/100 en Google PageSpeed Insights o en la herramienta GTMetrix, entonces minificar CSS y JavaScript mejorará significativamente tu puntuación.
Dicho esto, veamos cómo minificar fácilmente CSS/JavaScript en tu sitio de WordPress. Revisaremos 3 opciones diferentes entre las que puedes elegir:
- Minificar CSS/JavaScript en WordPress usando WP Rocket
- Minificar CSS/JavaScript en WordPress usando SiteGround
- Optimizar CSS/JavaScript con Autoptimize
- Preguntas Frecuentes sobre la Optimización
¿Listo? Empecemos con nuestro método recomendado.
Método 1. Optimizar 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 hosting de WordPress que estés 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 caché a WordPress y mejorar significativamente la velocidad del sitio web y los tiempos de carga de las páginas.
Para más detalles, consulta nuestro tutorial sobre cómo instalar y configurar WP Rocket en WordPress.
Tras la activación, debes visitar la página Ajustes » WP Rocket y cambiar a la pestaña ‘Optimización de archivos’.
Desde aquí, debes marcar la opción Minificar archivos CSS.
WP Rocket te mostrará una advertencia de que esto podría causar problemas en tu sitio. Haz clic en el botón ‘Activar Minificación de CSS’ para continuar. Siempre puedes desactivar esta opción si causa algún problema con tu sitio web.
A continuación, debes desplazarte hacia abajo hasta la sección Archivos JavaScript.
Aquí, simplemente marca la casilla junto a la opción ‘Minificar archivos JavaScript’.
De nuevo, verás una advertencia de que esto podría causar problemas en tu sitio. Haz clic en el botón ‘Activar Minificación de JavaScript’ para continuar.
Después de eso, no olvides hacer clic en el botón ‘Guardar Cambios’ para almacenar tu configuración.
WP Rocket ahora comenzará a minificar tus archivos CSS y JavaScript. Puedes limpiar tu caché en la configuración del plugin para asegurarte de que comience a usar el CSS y JavaScript minificados para el próximo visitante del sitio web.
Método 2. Minificar CSS/JavaScript en WordPress usando SiteGround
Si estás utilizando SiteGround como tu proveedor de hosting de WordPress, entonces puedes minificar archivos CSS usando SiteGround Optimizer.
SiteGround Optimizer es un plugin de optimización de rendimiento que funciona en su propia plataforma. Funciona bien con su PHP ultrarrápido para mejorar los tiempos de carga de tu sitio.
Simplemente instala y activa el plugin SiteGround Optimizer en tu sitio de WordPress. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de eso, necesitas hacer clic en el menú SG Optimizer en la barra lateral de administración de tu WordPress.
Esto te llevará a la configuración de SG Optimizer.
Desde aquí, necesitas hacer clic en el botón 'Ir al Frontend' bajo 'Otras Optimizaciones'.
En la siguiente pantalla, podrás administrar el frontend de CSS.
Necesitas activar el interruptor junto a la opción 'Minificar archivos CSS'.
A continuación, necesitas cambiar a la pestaña de JavaScript y activar el interruptor junto a la opción 'Minificar archivos JavaScript'.
¡Eso es todo! Ahora puedes vaciar la caché de tu WordPress y visitar tu sitio web para cargar las versiones minificadas de los 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 no usan WP Rocket.
Primero, necesitas instalar y activar el plugin Autoptimize. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, necesitas visitar la página Ajustes » Autoptimize para configurar los ajustes del plugin.
Desde aquí, primero debes marcar la opción ‘Optimizar código JavaScript’ en Opciones de JavaScript.
Después de eso, debes desplazarte hacia abajo hasta Opciones de CSS.
Una vez allí, debes marcar la casilla junto a la opción ‘Optimizar código CSS’.
No olvides hacer clic en el botón ‘Guardar cambios’ para almacenar tu configuración.
Luego puedes hacer clic en el botón Vaciar caché para empezar a usar tus archivos minificados. El plugin también se puede usar para solucionar JavaScript y CSS que bloquean la representación en WordPress.
Preguntas Frecuentes sobre la Optimización
Aquí tienes respuestas a algunas de las preguntas más comunes que la gente también hace sobre la minificación de archivos en WordPress. Estas pueden ayudarte a comprender mejor el proceso y sus beneficios para tu sitio.
1. ¿Qué es exactamente la minificación?
La minificación es un proceso que hace que los archivos de código de tu sitio web sean más pequeños al eliminar todos los caracteres innecesarios sin cambiar la forma en que funciona el código. Esto incluye eliminar espacios en blanco, comentarios y saltos de línea de los archivos HTML, CSS y JavaScript. Dado que los archivos resultantes son más pequeños y compactos, el navegador de un visitante los descarga y procesa más rápido, lo que puede ayudar a mejorar la velocidad general de tu sitio web.
2. ¿Minificar los archivos CSS y JavaScript romperá mi sitio web?
Si bien no es común con los plugins modernos, la minificación a veces puede causar problemas visuales o funcionales en tu sitio. Es por eso que los plugins de rendimiento a menudo muestran una advertencia antes de que habilites la función. Siempre es una buena idea crear una copia de seguridad primero y luego probar tu sitio web cuidadosamente en una ventana del navegador de incógnito después de activar la minificación. Si notas algún problema, simplemente puedes desactivar la configuración o usar las funciones del plugin para excluir archivos específicos que puedan estar causando el conflicto.
3. ¿La minificación realmente marca una gran diferencia?
El impacto de la minificación puede variar según tu sitio. Para muchos sitios web, solo elimina unos pocos kilobytes de datos, y es posible que veas una mejora de velocidad más significativa al optimizar tus imágenes. Sin embargo, si tu objetivo principal es lograr una puntuación perfecta de 100/100 en herramientas de prueba de velocidad como Google PageSpeed Insights o GTMetrix, entonces minificar tus archivos CSS y JavaScript es un paso importante que mejorará significativamente tu puntuación.
4. ¿Necesito un plugin para minificar archivos en WordPress?
Para casi todos los usuarios de WordPress, la forma más fácil y recomendada de minificar archivos es utilizando un plugin de caché o rendimiento como WP Rocket o Autoptimize. Estas herramientas te permiten habilitar la minificación con solo unos pocos clics. Algunos proveedores de hosting, como SiteGround, también ofrecen sus propios plugins de optimización con estas funciones integradas. Minificar archivos manualmente es un proceso complejo y arriesgado que no se recomienda para principiantes.
Esperamos que este artículo te haya ayudado a minificar CSS y JavaScript en tu sitio de WordPress. También te puede interesar nuestra guía sobre cómo optimizar Core Web Vitals en WordPress y nuestra selección experta de los mejores plugins de caché para WordPress para acelerar tu sitio web.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Olaf
La minificación de CSS y JavaScript es algo que casi todos los plugins de caché pueden manejar hoy en día. Sin embargo, en mi opinión, es algo bastante complicado porque los sitios web no siempre funcionan como deberían después de tales cambios. Cuando reduces el código, nunca se garantiza que siga funcionando correctamente de la misma manera. Si estás intentando optimizar a toda costa y necesitas ahorrar cada kilobyte, entonces ciertamente tiene sentido, pero recomiendo siempre hacer una copia de seguridad antes de una intervención de este tipo. He visto muchos sitios web empezar a actuar de forma extraña después. Así que, para mí, es un sí, pero con precaución.
Dayo Olobayo
Gracias por compartir esto conmigo. Probaré el plugin WP Rocket y veré si ayuda a minificar los archivos.
Mrteesurez
Basado en el ejemplo de código que diste, los dos son lo mismo, ¿qué estamos minificando? Pero solo veo uno con poco espacio, ¿remover el espacio es lo que se llama minificar?
Esta publicación es útil porque se relaciona con la velocidad del sitio, pero algunos temas vienen con código minificado, ¿aún necesito hacerlo manualmente? gracias.
Soporte de WPBeginner
Eliminar los espacios extra es minificar el código. Si el código de tu sitio ya está minificado, entonces no es necesario; es principalmente para temas u otras herramientas que pueden no estar minificadas.
Administrador
Ali Asgar Attari
¿Usar Autoptimize cambiará el tamaño de mi fuente y el espaciado entre líneas y otros CSS?
He agregado códigos CSS adicionales en mi sitio de WordPress. Estos incluyen espaciado entre líneas para puntos de viñeta, espaciado entre líneas para párrafos, espaciado entre letras para párrafos.
¿Se eliminarán todas estas configuraciones de CSS?
Soporte de WPBeginner
La configuración y los cambios que hayas realizado no deberían eliminarse al minificar los archivos.
Administrador
Sami Khan
Este plugin ya no está disponible en el panel de plugins de WordPress. Además, no se ha actualizado en los últimos 6 años.
Soporte de WPBeginner
Thank you for letting us know, we will be sure to look into updating this article
Administrador
Adnan
¿Qué pasa si no estoy contento con los resultados, puedo deshacerlo con un clic y volver al estado no minificado?
Soporte de WPBeginner
Si usaste el plugin, entonces necesitarías eliminar el plugin para evitar que minifique y limpiar cualquier caché en tu sitio.
Administrador
Echo
Sería bueno minificar el área de administración también. ¿Alguien lo ha hecho alguna vez?
Soporte de WPBeginner
No tenemos una guía sobre eso en este momento.
Administrador
Justin
Este plugin no ha sido probado con las últimas 3 versiones principales de WordPress. Es posible que ya no se mantenga o soporte y que tenga problemas de compatibilidad cuando se use con versiones más recientes de WordPress.
Soporte de WPBeginner
Gracias por informarnos, nos aseguraremos de echarle un vistazo.
Administrador
Oskar
Intenté encontrarlo para mi sitio, pero ¿no pude encontrarlo?
Adri Oosterwijk
Estoy buscando un plugin de minificación excepcional. Leyendo esta publicación, estaba dispuesto a instalar Better Wordpress Minify. En el repositorio de Wordpress, noté que este plugin no se había actualizado en tres años. También noté que no había mucha actividad en la página de soporte.
Estoy seguro de que puedes entender mi vacilación para instalar este plugin.
La pregunta es... ¿puedo hacerlo de forma segura con la última versión de WordPress y PHP o recomiendas otro plugin en este momento?
HTH
Adri
Felipe
Estoy usando Autoptimize para la mayoría de mis sitios web y me está yendo muy bien.
Tiene opciones para minificar archivos HTML, CSS y JS.
Dave
¡Este plugin no ha sido probado con las últimas 3 versiones principales de WordPress!
Shaker
si estás usando el plugin W3 Total Cache, muchos usuarios de WordPress usan este plugin para aumentar la velocidad de la página web. Quizás sepas que este plugin ofrece una función para minificar archivos CSS, JavaScript y HTML. Lo recomendaría, porque cumple el propósito y no necesitas usar un plugin adicional para la minificación.
Sophie
hola,
Una vez revisé la opción de minificación de uno de mis plugins de caché, cuyo nombre ya no recuerdo, pero destruyó mi tema. Así que me preocupa si el plugin que has sugerido hará lo mismo o no destruirá mi tema cuando lo instale. Tengo el tema themify ultra.
gracias,
sophie.
Rashmi Korlekar
Estoy de acuerdo con JEREMY
Beth
Gracias por tu artículo. ¿Hay algún otro complemento que recomiendes? Better Wordpress Minify no se ha actualizado en 2 años. Gracias
santy
informativo y útil, agradezco tu esfuerzo
Steve Eilertsen
Tus publicaciones son siempre útiles y apreciadas. Muchas gracias.
Jeremy
Hola,
Disfruté el artículo, pero tengo una sugerencia. Noté que muchos de los artículos de WP Beginner presentan una solución basada en plugins. Creo que eso es genial, pero a veces es bueno para los usuarios avanzados ver algo detrás de escena.
Hay algunos artículos que tienes que muestran la forma con plugin y luego una forma manual (para usuarios avanzados de WordPress). Me gustan esos artículos porque están dirigidos tanto a usuarios novatos como avanzados de WP o desarrolladores.
Cuando el tiempo lo permita, ¿podrías considerar actualizar el artículo para incluir un tutorial sobre cómo minificar para usuarios/desarrolladores avanzados?
¡Gracias!
Hamza Bhatti
Estoy de acuerdo contigo, JERMY. Pero dado el nombre del sitio web, es decir, wpbeginner.com, aquí se usa la palabra Beginner (principiante), lo que significa que no es para profesionales.
Branden
Lol, lee el dominio del sitio web en el que estás. Es WP beginner, no WP Advanced.