Google PageSpeed: Cómo minificar CSS y JS

¡Buenos días! Hoy vamos a ver cómo comprimir el CSS o el JS para ganar un poco más de velocidad de carga para nuestra página web. En este caso, haré el ejemplo con un archivo CSS pero en el caso de JS el proceso es casi el mismo. ¡Empecemos!

YouTube video

[cta-pagespeed]
1. Accedemos al directorio de nuestro theme y abrimos style.css

2. Copiamos todo el código (menos los comentarios del principio).

3. Lo pegamos en cualquier herramienta de compresión de CSS. Aquí os dejo un par de ejemplos:

Los dos últimos ofrecen también la opción de comprimir JavaScript.

4. Copiamos el resultado y lo pegamos en el lugar del código original.

¡Y ya está! Sólo un par de recomendaciones finales:

  • Es aconsejable guardar el código original, porque la compresión a veces puede dar errores.
  • Si tenemos un código comprimido y queremos devolverlo a un estado más leíble (para modificarlo más cómodamente por ejemplo) podemos utilizar las siguientes herramientas para CSS y JS, respectivamente:  CleanCSS | JSBeautifier .

¿Puedo hacerlo con un plugin?

También podemos utilizar algún plugin que nos haga esta tarea, como por ejemplo Autoptimize. Se encarga de concatenar y minificar archivos CSS y JS de manera automática. Podéis ver cómo utilizarlo en este vídeo donde explico cómo reducir las peticiones al servidor en WordPress.

¿Te interesa un servicio de optimización de velocidad en WordPress? Es algo que he sacado muy recientemente para ayudar a los demás a tener páginas más rápidas y ligeras. Regalo un análisis de la web gratis así que ves por el enlace de antes y pide tu presupuesto sin compromiso 🙂

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web