Cómo optimizar fácilmente la entrega de CSS de WordPress (2 métodos)

¿Quieres optimizar tu entrega de CSS en WordPress?

Los archivos CSS controlan el formato visual y el estilo de tu sitio web de WordPress. Pero si tu código CSS no se entrega de forma óptima, podría estar ralentizando tu sitio web.

En este artículo, te mostraremos dos métodos sencillos para optimizar la entrega de tu CSS en WordPress.

Cómo afecta la entrega de CSS en WordPress al rendimiento de WordPress

Los archivos CSS se utilizan para definir la apariencia visual de tu sitio de WordPress. Tu tema de WordPress contiene un archivo de hoja de estilos CSS, y algunos de tus plugins también pueden utilizar hojas de estilos CSS.

El CSS es necesario para los sitios web modernos, pero es posible que los archivos CSS reduzcan la velocidad y el rendimiento de tu sitio dependiendo de cómo estén configurados.

Incluso un pequeño retraso en la velocidad del sitio crea una mala experiencia para el usuario y puede afectar a tu clasificación en las búsquedas y a las conversiones, lo que se traduce en menos tráfico y ventas.

Una de las formas en que los archivos CSS pueden ralentizar tu sitio web es si tienen que cargarse antes de que se pueda mostrar la página. Esto significa que tus visitantes verán una página en blanco hasta que el archivo CSS se haya cargado. Esto se conoce como CSS de bloqueo de renderización.

Otra razón común por la que los archivos CSS pueden ralentizar tu sitio web es cuando contienen más código del necesario para mostrar la parte visible de la página actual. Ese código extra significa que tardarán más en cargarse.

La buena noticia es que puedes mejorar el rendimiento de tu sitio de WordPress optimizando la forma en que se entrega el código CSS.

Eso se hace identificando el código CSS mínimo necesario para mostrar la primera parte de la página web actual. Esto se conoce como cSS crítico.

Este código crítico se añade entonces en línea al HTML de la página, en lugar de en hojas de estilo separadas, de modo que el código se pueda representar sin necesidad de cargar primero el archivo CSS.

El resto del CSS puede cargarse después de que tus visitantes puedan ver el contenido de la página. Esto se conoce como "carga diferida".

En este tutorial, te mostraremos dos métodos para optimizar la entrega de CSS en WordPress, y podrás elegir el que mejor te funcione.

Método 1: Optimizar la entrega de CSS de WordPress con WP Rocket

WP Rocket es el mejor plugin de caché para WordPress del mercado. Ofrece la forma más sencilla de optimizar la entrega de CSS de WordPress. De hecho, es tan fácil como marcar una casilla.

WP Rocket es un plugin premium, pero lo mejor es que todas las funciones están incluidas en su plan más bajo.

Lo primero que tienes que hacer es 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.

Una vez activado, tienes que ir a la sección Configuración " WP Rocket y pasa a la pestaña "Optimización de archivos".

A continuación, tienes que desplazarte hasta la sección de archivos CSS. Una vez allí, tienes que marcar la casilla junto a la opción "Optimizar la entrega de CSS".

Esta función identificará de forma inteligente el CSS crítico necesario para dar formato a la parte de la página web que tus visitantes ven primero. Tus páginas se cargarán más rápidamente, y el resto del CSS se cargará después de que tus visitantes puedan ver su contenido.

Todo lo que tienes que hacer ahora es pulsar el botón Guardar cambios y esperar a que WP Rocket genere el archivo CSS necesario para todas tus entradas y páginas

También borrará automáticamente la caché de tu sitio web, para que tus visitantes vean la nueva versión optimizada de tu sitio en lugar de las versiones no optimizadas almacenadas en la caché.

Hay muchas otras formas en las que WP Rocket puede ayudarte a mejorar el rendimiento de tu sitio web. Para saber más, consulta nuestra guía sobre cómo instalar y configurar correctamente WP Rocket en WordPress.

Método 2: Optimizar la entrega de CSS de WordPress con Autoptimize

Autoptimize es un plugin gratuito diseñado para mejorar la entrega de los archivos CSS y JS de tu sitio web

Aunque Autoptimize es un plugin gratuito, no tiene tantas funciones como WP Rocket y tarda más en configurarse.

Por ejemplo, no es capaz de identificar automáticamente el CSS crítico como puede hacerlo WP Rocket. En su lugar, Autoptimize requiere la ayuda de un servicio premium de terceros que supone un coste adicional y requiere más tiempo de configuración.

Sin embargo, puede ser una buena opción si tienes un presupuesto ajustado y no necesitas todas las demás funciones de WP Rocket para acelerar tu sitio.

Lo primero que tienes que hacer es instalar y activar el Autoptimizar plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, tienes que visitar la página Ajustes " Optimización automática para configurar los ajustes del plugin. Una vez allí, tienes que desplazarte hasta la sección Opciones CSS y marcar la casilla Optimizar código CSS en la parte superior.

Una vez que lo hagas, debes asegurarte de que la opción "Agregar archivos CSS" esté desmarcada y, a continuación, marca "Eliminar el CSS que bloquea la renderización".

Ahora puedes hacer clic en el botón "Guardar cambios y vaciar la caché" para almacenar tu configuración.

Pero el plugin no funcionará correctamente hasta que te registres en una cuenta de CSS crítico. Este es un servicio de suscripción premium que proporcionará a Autoptimize el código CSS crítico que necesita para optimizar la entrega de tu CSS en WordPress.

Para ello, ve a la pestaña de CSS crítico en la configuración de Autoptimize. Aquí encontrarás la información que necesitas para registrarte en Critical CSS. Puedes empezar haciendo clic en el enlace de registro del tercer párrafo.

Una vez que hayas recibido tu clave API de Critical CSS, desplázate hacia abajo hasta la sección Clave API para poder pegarla en el cuadro de texto "Tu clave API". Después, asegúrate de hacer clic en el botón Guardar cambios.

Ahora Autoptimize tiene toda la información que necesita para añadir el CSS crítico en línea y aplazar la carga de las hojas de estilo hasta después de que se haya renderizado la página. Como resultado, tu sitio web se cargará más rápidamente.

Esperamos que este tutorial te haya ayudado a aprender a optimizar la entrega de CSS en WordPress.

Quizá también quieras ver nuestra guía definitiva sobre cuánto cuesta realmente crear un sitio web de WordPress, y nuestra comparación de las mejores empresas de alojamiento gestionado de WordPress.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.