En este tutorial veremos cómo minificar CSS de nuestras hojas de estilo del tema para corregir el mensaje que nos puede aparecer en Google PageSpeed Insights. Más concretamente, esta sugerencia:

Si clickamos en «Mostrar cómo corregirlo» nos recomendará lo siguiente:

Compactar el código CSS puede ahorrar una gran cantidad de bytes de datos y acelerar los tiempos de descarga y análisis.

¡Pues justamente es lo que vamos a hacer! Compactaremos el código CSS para que ocupe menos, y de esta forma, aceleraremos la velocidad de nuestra página web.

Pero sin el uso de plugins.

La mayoría de tutoriales nos recomiendan bajarnos plugins para que hagan este trabajo para nosotros. Pero cómo ya sabemos, el uso excesivo de plugins puede ralentizar nuestra web. Así que, cómo es una tarea bastante fácil, lo haremos nosotros.

¡Vamos a ello! 

Minificar CSS sin plugins

Primeramente, localizaremos nuestro archivo style.css de nuestro tema. Está localizado en nuestro servidor FTP, en «wp-content/themes/nuestro-tema/style.css».

Antes de modificar nada, lo primero que haremos es hacer una copia de este archivo. Para ello, duplicaremos el archivo y lo renombraremos como «original-style.css» (o cómo queráis).

¿Por qué hacemos una copia de nuestro archivo de estilos?

Cuando comprimamos el archivo, no será tan legible y entendedor para modificar nuestras reglas CSS en un futuro. De este modo, tendremos nuestra versión legible (original-style.css) y la versión que utilizará WordPress para aplicar nuestros estilos, style.css.

Este es el aspecto que tiene normalmente un style.css:

Y en cambio, cuando se comprima tendrá este aspecto ilegible:

Cómo podemos apreciar, modificar un archivo CSS comprimido sería un verdadero quebradero de cabeza. Por esta sencilla razón siempre recomiendo mantener el archivo original y realizar las futuras modificaciones para volverlo a comprimir.

Para comprimir el style.css, simplemente seleccionamos todo el código y lo pegamos en el campo «Input CSS» de este comprimidor CSS. A continuación le damos al botón «Minify» y obtendremos nuestro código CSS comprimido en «Minified Output».

Finalmente, copiaremos el código resultante, lo reemplazaremos a lo que había en style.css (no al original-style.css) y guardaremos.

Verificar la compresión CSS en Google PageSpeed Insights

Una vez hemos comprimido nuestro style.css, volveremos a ir a la herramienta de Google PageSpeed e introduciremos nuevamente nuestra página web.

Si todo a funcionado correctamente, veremos que ya no nos sale la sugerencia de optimización de minificar el CSS. Si clickamos a «Mostrar detalles» en «Optimizaciones que ya se aplican», veremos que ya no aparece la sugerencia porqué Google verifica que sí está comprimido.

Ya lo veis. Una solución simple para sumar más puntos al resultado de nuestro PageSpeed. 

Cómo siempre, para cualquier duda o sugerencia de nuevo tutorial podéis contactar conmigo siempre que queráis.