¿Necesitas optimizar la entrega de CSS de WordPress?
Los archivos CSS son muy útiles ya que controlan el formato visual y el estilo de los sitios en WordPress. Surge un problema cuando ese código CSS no se entrega de manera óptima, lo que puede causar en el sitio web.
En este tutorial mostraremos dos métodos sencillos para optimizar la entrega de CSS de WordPress.
Cómo afecta la entrega de CSS de WordPress al rendimiento de WordPress
Los archivos CSS gestionan la apariencia visual de su sitio de WordPress. Los temas WordPress contienen un archivo de hoja de estilo CSS, y algunos de sus complementos también pueden usar hojas de estilo CSS.
El código CSS es necesario para los sitios web modernos, pero es posible que los archivos CSS reduzcan la velocidad y el rendimiento de su sitio dependiendo de cómo estén configurados. Incluso un pequeño retraso en la velocidad del sitio crea una mala experiencia de usuario y puede afectar su ranking de búsqueda y conversiones, lo que resulta en menos tráfico y ventas.
Una manera en que los archivos CSS pueden ralentizar su sitio web es si es necesario cargarlos antes de que se pueda mostrar la página. Eso significa que sus visitantes verán una página en blanco hasta que se cargue el archivo CSS. Esto se conoce como CSS de bloqueo de renderizado.
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 el archivo CSS primero.
El resto del CSS se puede cargar después 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: Optimizar la entrega de CSS de WordPress con WP Rocket
- Método 2: Optimizar la entrega de CSS de WordPress con Autoptimize
Método 1: Optimizar la entrega de CSS de WordPress con WP Rocket
WP Rocket es el mejor complemento de almacenamiento en caché de WordPress que podemos encontrar. Proporciona 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 Configuración »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 función identificará de forma 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 la memoria caché de su sitio web, de modo que sus visitantes verán la nueva versión optimizada de su sitio en lugar de las versiones no optimizadas almacenadas en la memoria 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: Optimizar la entrega de CSS de WordPress con Autoptimize
Autoptimize 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 puede identificar automáticamente CSS crítico como lo hace WP Rocket. En cambio, Autoptimize requiere la ayuda de un servicio de terceros premium, que es un costo adicional y requiere más tiempo para configurarlo.
Sin embargo, podría ser una buena opción si tiene un presupuesto ajustado y no necesita todas las demás funciones de WP Rocket para acelerar su sitio. Lo primero que debe hacer es instalar y activar el complemento Autoptimize. 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 Configuración »Optimización automática 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 lo hagas, debes asegurarte de que la opción ‘Agregar archivos CSS’ esté desmarcada y luego marcar ‘Eliminar CSS que bloquea el renderizado’.
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 Critical CSS. Este es un servicio de suscripción premium que proporcionará Autoptimize el código CSS crítico que necesita para optimizar la entrega de CSS de WordPress.
Para hacer eso, navegue a la pestaña Critical CSS en la configuración de Autoptimize. Aquí encontrará la información que necesita para registrarse con Critical CSS. Puede comenzar haciendo clic en el enlace de registro en el tercer párrafo.
Una vez que haya recibido su clave API Critical CSS, 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 posponer 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ápidamente.
Esperamos que este tutorial le haya ayudado a aprender a optimizar la entrega de CSS de WordPress.
Es posible que también 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.
Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
La publicación Cómo optimizar fácilmente la entrega de CSS de WordPress (2 métodos) es una técnica sencilla pero necesaria.
