Cómo optimizar fácilmente la entrega de CSS en WordPress (2 formas)

¿Quieres optimizar la entrega de CSS de WordPress?

Los archivos CSS controlan el formato visual y el estilo de su sitio de WordPress. Sin embargo, si su código CSS no se entrega de manera óptima, esto puede ralentizar su sitio web.

En este artículo, le mostraremos dos formas fáciles de optimizar la entrega de CSS de WordSress.

Cómo la entrega de CSS a WordPress afecta el rendimiento de WordPress

Los archivos CSS se utilizan para definir la apariencia visual de un sitio web de WordPress. Su tema de WordPress incluye un archivo de hoja de estilo CSS, y algunos de sus complementos también pueden usar hojas de estilo CSS.

Los sitios web modernos requieren CSS, pero los archivos CSS pueden ralentizar y degradar el rendimiento de su sitio web, según cómo estén configurados.

Incluso un ligero retraso en la velocidad del sitio web puede crear una experiencia de usuario deficiente y puede afectar sus clasificaciones de búsqueda y conversión, lo que reduce el tráfico y las ventas.

Una de las formas en que los archivos CSS pueden ralentizar su sitio web es si deben cargarse antes de que aparezca la página. Esto significa que sus visitantes verán una página en blanco mientras se carga el archivo CSS. Esto se llama procesamiento de bloqueo de CSS.

Otra razón común por la que los archivos CSS ralentizan su sitio web es que contiene más código del necesario para mostrar la parte visible de la página actual. El código adicional significa que tardará más en cargarse.

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

Lo hace identificando el código CSS mínimo necesario para mostrar la primera parte de la página web actual. comentarios CSS.

Estos códigos clave luego se incrustan en el HTML de la página, en lugar de en una hoja de estilo separada, para que el código se pueda mostrar sin tener que cargar primero el archivo CSS.

Una vez que sus visitantes puedan ver el contenido de la página, se puede cargar el resto del CSS. Esto se llama "carga diferida".

En este tutorial, le mostraremos dos formas de optimizar la entrega de CSS de WordPress y puede elegir la que mejor se adapte a sus necesidades.

• Método 1: Optimice la entrega de CSS a WordPress con WP Rocket
• Método 2: Optimice la entrega de CSS de WordSress con Autooptimize

Método 1: Optimice la entrega de CSS de WordSress con WP Rocket

WP Rocket es el mejor complemento de almacenamiento en caché de WordPress del mercado. Proporciona la forma más fácil de optimizar la entrega de CSS en WordPress. De hecho, es tan simple como marcar una casilla.

WP Rocket es un complemento de primera, pero lo mejor es que todas las funciones están incluidas en su plan mínimo.

Lo primero que debe hacer es instalar y activar WP Rocket. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Después de la activación, debe ir a Configuración de WP Rocket y vaya a la sección "Optimización de archivos".

Luego, debe desplazarse hacia abajo hasta la sección de archivos CSS. Allí debe marcar la casilla junto a "Optimizar la entrega de CSS".

Esta característica identificará de manera inteligente el CSS clave necesario para formatear la parte de la página web que el visitante ve primero. Sus páginas se cargarán más rápido y el resto del CSS se cargará una vez que sus visitantes puedan ver su contenido.

Todo lo que tiene que hacer ahora es hacer clic en el botón Guardar cambios y esperar a que WP Rocket genere los archivos CSS necesarios para todas sus publicaciones y páginas.

También borra automáticamente el caché de su sitio para que sus visitantes vean una versión nueva y optimizada de su sitio en lugar de la versión sin caché.

Hay muchas otras formas en que WP Rocket puede ayudarlo a mejorar el rendimiento de su sitio web. Para obtener más información, consulte nuestra guía sobre cómo instalar y configurar correctamente WP Rocket en WordPress.

Método 2: Optimice la entrega de CSS de WordSress con Autooptimize

Autoptimize es un complemento gratuito diseñado para mejorar la entrega de archivos CSS y JS en su sitio web.

Aunque Autoptimize es un complemento gratuito, no tiene tantas funciones como WP Rocket y requiere más tiempo de configuración.

Por ejemplo, no reconoce automáticamente el CSS crítico, como lo hace WP Rocket. En su lugar, Autooptimize requiere la ayuda de un servicio de terceros de primera clase, que es un costo adicional y lleva más tiempo configurarlo.

Sin embargo, si tiene un presupuesto limitado y no necesita todas las demás funciones de WP Rocket para acelerar su sitio web, esta puede ser una buena idea. opción.

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

Después de la activación, debe visitar Configuración »Optimización automática página para configurar los ajustes del complemento. Una vez que esté allí, debe desplazarse hacia abajo hasta la sección de opciones de CSS y marcar la casilla para optimizar el código CSS en la parte superior.

Una vez hecho esto, debe asegurarse de que la opción "Agregar archivos CSS" no esté marcada y luego "Eliminar el bloqueador de CSS" esté marcado.

Ahora puede hacer clic en el botón "Guardar cambios y borrar caché" para guardar su configuración.

Pero el complemento no funcionará hasta que se registre en una cuenta CSS importante. Este es un servicio de suscripción de primera clase que proporcionará a Autoptimize el código CSS crítico necesario para optimizar la entrega de CSS de WordSress.

Para hacer esto, abra la pestaña CSS crítico en la configuración de optimización automática. Aquí encontrará la información que necesita para registrar CSS crítico. Puede comenzar haciendo clic en el enlace de registro en el tercer párrafo.

Una vez que haya recibido su clave API CSS, desplácese hacia abajo hasta la sección Claves API para colocarla en el cuadro de texto "Su clave API". Luego, asegúrese de hacer clic en el botón "Guardar cambios".

Autooptimize ahora tiene toda la información que necesita para agregar CSS crítico incrustado y estilos de carga lenta hasta que se represente la página. Por lo tanto, su sitio web se cargará más rápido.

Esperamos que este tutorial le haya ayudado a aprender cómo optimizar la entrega de CSS en WordPress.

También puede echar un vistazo a nuestra guía final sobre cuánto cuesta realmente crear un sitio de WordPress y nuestra comparación de las empresas de alojamiento de WordPress mejor gestionadas.

Si te ha gustado este artículo, suscríbete a nuestro canal de tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.