Cómo minimizar archivos CSS / JavaScript en WordPress

¿Quieres minificar archivos en tu sitio de WordPress? La minimización de 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 minificar archivos CSS / Javascript en WordPress para mejorar el rendimiento y la velocidad.

¿Qué es Minify y cuándo lo necesita?

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

Por lo general, se recomienda su uso solo para archivos que se envían a los navegadores del usuario. Esto incluye archivos HTML, CSS y JavaScript. También puede minimizar los archivos PHP, pero PHP es un lenguaje de programación del lado del servidor y minimizarlo no mejorará la velocidad de carga de la página para sus usuarios.

La ventaja obvia de minificar archivos es la velocidad y el rendimiento mejorados de WordPress. Los archivos compactos se cargan más rápido y mejoran la velocidad de su sitio.

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. La minificación solo reduce 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 simplemente optimizando las imágenes para la web.

A continuación, se muestra un ejemplo de código CSS normal:

cuerpo {
margen: 20px;
relleno: 20px;
color: # 333333;
fondo: # f7f7f7;
}
h1 {
tamaño de fuente: 32px;
color # 222222;
margen inferior: 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}

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

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

Minificar CSS / Javascript en WordPress

Lo primero que debe hacer es instalar y activar el complemento Better WordPress Minify. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, el complemento agregará un nuevo elemento de menú con la etiqueta ‘BWP Minify’ a su barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del complemento.

En la página de configuración, debe verificar las dos primeras opciones para minimizar automáticamente los archivos JavaScript y CSS en su sitio de WordPress.

Ahora puede hacer clic en el botón Guardar cambios para almacenar su configuración.

Hay muchas otras opciones avanzadas en esta página. La configuración predeterminada funcionará para la mayoría de los sitios web, pero puede revisar y cambiar estas opciones caso por caso.

A continuación, debe dirigirse a su sitio web. Haga clic derecho en cualquier lugar y luego seleccione ‘Ver código fuente de la página’ en el menú del navegador.

Ahora verá el código fuente HTML generado por su sitio de WordPress. Si observa de cerca, notará que este complemento cargará archivos CSS / JavaScript desde la propia carpeta del complemento en lugar de sus temas y complementos de WordPress.

Estas son las versiones minimizadas de sus archivos CSS y JavaScript originales. Un mejor complemento WordPress Minify los mantendrá en caché y entregará las versiones minificadas a los navegadores.

Eso es todo, esperamos que este artículo le haya ayudado a aprender cómo minimizar su sitio de WordPress. Es posible que también desee ver nuestra guía definitiva sobre cómo acelerar WordPress para principiantes.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.