¿Le gustaría optimizar su entrega de CSS de WordPress?
Los archivos CSS controlan el formato visual y el estilo de su sitio web de WordPress. Pero si su código CSS no se entrega de manera óptima, podría estar ralentizando su sitio web.
En este artículo, le mostraremos dos métodos sencillos para optimizar su entrega de CSS de WordPress.
Cómo la entrega de CSS de WordPress afecta el rendimiento de WordPress
Los archivos CSS se utilizan para definir la apariencia visual de su sitio de WordPress. Su tema de WordPress contiene un archivo de hoja de estilo CSS, y algunos de sus complementos también pueden usar hojas de estilo CSS.
CSS es necesario para los sitios web modernos, pero es posible que los archivos CSS reduzcan la velocidad y el rendimiento de su sitio según cómo estén configurados.
Incluso un pequeño retraso en la velocidad del sitio crea una mala experiencia de usuario y puede afectar sus clasificaciones de búsqueda y conversiones, lo que resulta en menos tráfico y ventas.
Una forma en que los archivos CSS pueden ralentizar su sitio web es si deben cargarse antes de que se pueda mostrar la página. Eso significa que sus visitantes verán una página en blanco hasta que se haya cargado el archivo CSS. Esto se conoce como CSS de bloqueo de procesamiento.
Otra razón común por la que los archivos CSS pueden ralentizar su sitio web es cuando contienen más código del necesario para mostrar la parte visible de la página actual. Ese código adicional significa que tardarán 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 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.
Luego, este código crítico se agrega en línea al HTML de la página, en lugar de en hojas de estilo separadas, para que el código se pueda representar sin necesidad de cargar primero el archivo CSS.
El resto del CSS se puede cargar luego de que sus visitantes puedan ver el contenido de la página. Esto se conoce como ‘carga diferida’.
En este tutorial, le mostraremos dos métodos para optimizar la entrega de CSS de WordPress, y puede elegir el que mejor se adapte a sus necesidades.
Método 1: Optimización de la entrega de CSS de WordPress con WP Rocket
WP Rocket es el mejor complemento de almacenamiento en caché de 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 complemento premium, pero la mejor parte es que todas las funciones están incluidas en su plan más bajo.
Lo primero que debe hacer es instalar y activar el complemento WP Rocket. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez activado, debe navegar a la Ajustes » WP Rocket y cambie a la pestaña ‘Optimización de archivos’.
A continuación, debe desplazarse hacia abajo hasta la sección de archivos CSS. Una vez allí, debe marcar la casilla junto a la opción ‘Optimizar la entrega de CSS’.
Esta característica identificará de manera inteligente el CSS crítico necesario para formatear la parte de la página web que sus visitantes ven primero. Sus páginas se cargarán más rápidamente y el resto del CSS se cargará después de que sus visitantes puedan ver su contenido.
Todo lo que necesita hacer ahora es hacer clic en el botón Guardar cambios y esperar a que WP Rocket genere el archivo CSS necesario para todas sus publicaciones y páginas.
También borrará automáticamente el caché de su sitio web, para que sus visitantes vean la nueva versión optimizada de su sitio en lugar de las versiones no optimizadas almacenadas en el 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: Optimización de la entrega de CSS de WordPress con Autoptimize
Autooptimizar es un complemento gratuito diseñado para mejorar la entrega de los archivos CSS y JS de su sitio web.
Si bien Autoptimize es un complemento gratuito, no tiene tantas funciones como WP Rocket y lleva más tiempo configurarlo.
Por ejemplo, no es capaz de identificar automáticamente CSS crítico como lo hace WP Rocket. En cambio, Autoptimize requiere la ayuda de un servicio de terceros premium que tiene un costo adicional y requiere más tiempo para configurar.
Sin embargo, podría ser una buena opción si tiene un presupuesto ajustado y no necesita todas las demás características de WP Rocket para acelerar su sitio.
Lo primero que debe hacer es instalar y activar el Autooptimizar enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, debe visitar el Ajustes » Optimizar automáticamente página para configurar los ajustes del complemento. Una vez allí, debe desplazarse hacia abajo hasta la sección Opciones de CSS y marcar la casilla Optimizar código CSS en la parte superior.
Una vez que haga eso, debe asegurarse de que la opción ‘Agregar archivos CSS’ no esté marcada y luego marque ‘Eliminar CSS de bloqueo de procesamiento’.
Ahora puede hacer clic en el botón ‘Guardar cambios y vaciar caché’ para almacenar su configuración.
Pero el complemento no funcionará correctamente hasta que se registre para obtener una cuenta de Critical CSS. Este es un servicio de suscripción premium que proporcionará Autoptimize el código CSS crítico que necesita para optimizar su entrega de CSS de WordPress.
Para hacer eso, navegue a la pestaña CSS crítico en la configuración de Autoptimize. Aquí encontrarás la información que necesitas para registrarte en Critical CSS. Puede comenzar haciendo clic en el enlace de registro en el tercer párrafo.
Una vez que haya recibido su clave API CSS crítica, desplácese hacia abajo hasta la sección Clave API para que pueda pegarla en el cuadro de texto «Su clave API». Después de eso, asegúrese de hacer clic en el botón Guardar cambios.
Autoptimize ahora tiene toda la información que necesita para agregar el CSS crítico en línea y diferir la carga de las hojas de estilo hasta que la página se haya renderizado. Como resultado, su sitio web se cargará más rápido.
Esperamos que este tutorial lo haya ayudado a aprender cómo optimizar la entrega de CSS de WordPress.
También es posible que desee ver nuestra guía definitiva sobre cuánto cuesta realmente crear un sitio web de WordPress y nuestra comparación de las empresas de alojamiento de WordPress mejor administradas.
.