Cómo optimizar el CSS de WordPress

Optimizar CSS WordPress

En esta guía te explico cómo optimizar el CSS de WordPress, uno de los factores que más lo ralentiza.

Vamos a ello.

P.D. Puedes aprender a optimizar WordPress gratis como WPOptimizers y recibir cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

Especifica la caché del navegador al CSS

Especificar la caché del navegador al CSS, hará que estos archivos se cacheen en este, para que no se tengan que cargar en las próximas URLs visitadas.

Si tu web tiene 500 KB de CSS, cuando un usuario visita la siguiente URL, como por ejemplo una entrada, esta pesará esos 500 KB de menos, con lo que cargará más rápido.

Esta caché del navegador se puede activar desde el hosting, cosa que algunos lo traen de serie y otros se activa a mano.

Desde plugins de optimización como WP Rocket, que te lo hace automáticamente o desde el CDN, ya dependiendo de la configuración.

Te recomiendo leer mi guía de cómo especificar la caché del navegador en WordPress.

Usa temas y plugin con poco CSS

El paso más importante es usar temas y plugins con poco CSS, porque el CSS que no se usa, no ralentiza.

Puedes analizarlos o mirar guías comparativas como las mías, en las que te recomiendo los mejores.

Para tener una buena base, revisa mis guías de temas más rápidos de WordPress y mejor page builder para WordPress.

Elimina el CSS sin usar

Es muy importante eliminar el CSS sin usar, porque de esta forma no cargaremos el que no se esté usando.

Los temas y plugins ya deberían de hacerlo, pero lamentablemente no es así.

Podemos hacerlo usando funciones automáticas como la Remove unused CSS de WP Rocket que lo hace automáticamente, pero está en beta y he notado errores.

Remove unused CSS WP Rocket

O usar plugins como Perfmatters y su script manager, como explico en mi guía de desactivar CSS y JS en WordPress.

Perfmatters Script manager

Optimiza el CSS en línea

Es muy importante optimizar el CSS en línea, que es el que se suele añadir al custom CSS de WordPress y plugins similares.

Lo mejor es cargar el CSS en un archivo externo, con lo cuál se almacenará en el navegador, pero depende del tema y plugins que uses.

Siempre recomiendo usar un child theme para esta tarea.

Temas como Astra añaden la opción de volcar su custom CSS en un archivo CSS externo, pero hay que tener cuidado con el que añaden los plugin.

Revisa mi guía de optimizar el CSS en línea en WordPress.

Minifica el CSS

Minificar el CSS, hará que este se comprima eliminando lo que sólo es importante para el desarrollo, como comentarios, saltos de línea, etc.

Esta minificación puede hasta solventar el problema del CSS en línea, pero dependerá de cuando se cargue este código.

Para minificarlo, hay que usar opciones similares a la de WP Rocket de minificar archivos CSS.

Minificar CSS WordPress WP Rocket

En el caso de que haya errores de visualización, te recomiendo leer mi guía de minificar el CSS en WordPress.

Combina el CSS

Combinar el CSS hará que tu web cargue una sola petición CSS, en vez de todas las que carga y se hace con la función de combinar CSS de plugins como WP Rocket.

Después de muchas pruebas y aunque tu web use HTTP2, siempre consigo mejor resultado combinando.

Combinar CSS WordPress WP Rocket

Pero ojo, puede que cargues un CSS demasiado pesado, lo que ralentizará tu web o también puede haber problemas de visualización.

Recomiendo leer mi guía de combinar el CSS en WordPress.

Crea el CSS crítico

Crear el CSS crítico, hará que el CSS de la parte de la web que se ve sin hacer scroll o ATF, se cargue con preferencia, lo que acelera la web.

El resto se carga una vez que la web se ha cargado, así que no ralentiza.

Hay varias formas de crear el CSS crítico en WordPress y yo recomiendo con WP Rocket, con la función que tiene para ello.

Crear CSS crítico WP Rocket

En el caso de que tengas problemas, revisa mi guía de optimizar la entrega de CSS en WordPress.

Carga el CSS desde el CDN

Un paso importante es cargar el CSS desde el CDN, que siempre recomiendo usar.

Por un lado, porque reduces considerablemente el consumo de recursos del hosting y por otro, porque sirves el CSS de forma geolocalizada, desde la localización más cercana a los usuarios.

Aquí tendrás que elegir si respetar el tiempo de caché del navegador del hosting o aplicar uno diferente.

Lee mi guía de CDN en WordPress.

¡Optimiza el CSS de tu WordPress!

Espero que esta guía te ayude a conocer todas las tareas para optimizar el CSS en WordPress.

Si tienes alguna duda, te espero en los comentarios.

Únete gratis a WPOptimizers y aprende a optimizar WordPress

Recibe cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

    Únete gratis a WPOptimizers para comentar y aprender a optimizar WordPress.

    ¡Lo quiero!

    Si ya lo eres inicia sesión