Tutoriales WordPress

Cómo Optimizar Fácilmente la Entrega de CSS de WordPress (2 Métodos)

¿Le gustaría optimizar su 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, le mostraremos dos métodos sencillos para optimizar la entrega de su CSS en WordPress.

Cómo la entrega de CSS de WordPress afecta al 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 plugins también pueden utilizar hojas de estilo CSS.

El 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 para el usuario y puede afectar a su 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 su sitio web es si necesitan cargarse antes de que la página pueda mostrarse. Esto significa que sus 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 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 extra significa que tardarán más en cargarse.

La buena noticia es que puedes mejorar el rendimiento de tu sitio 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 pueda representarse sin necesidad de cargar primero el archivo CSS.

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

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

WP Rocket es el mejor plugin de caché de WordPress en el 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 características 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, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, necesitas navegar a la página de Ajustes > WP Rocket y cambiar a la pestaña de Optimizar archivos.

A continuación, debe desplazarse hasta la sección de Archivos CSS. Una vez allí, tienes que marcar la casilla junto a la opción “Optimizar la entrega del 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 sus 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, de modo que tus visitantes verán la nueva versión optimizada de tu sitio en lugar de las versiones no optimizadas almacenadas en la caché.

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 características como WP Rocket y lleva más tiempo configurarlo.

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

Sin embargo, podría ser una buena opción si tienes un presupuesto ajustado y no necesitas todas las otras características de WP Rocket para acelerar tu sitio.

Lo primero que tienes que hacer es instalar y activar el plugin Autoptimize. Después de la activación, necesita visitar la página de Ajustes > Autoptimize para configurar los ajustes del plugin. Una vez allí, debe desplazarse hasta la sección de Opciones CSS y marcar la casilla Optimizar código CSS en la parte superior.

Una vez que lo hagas, asegúrate de que la opción “Agregar archivos CSS” esté desmarcada y luego marca “Eliminar el CSS que bloquea la renderización“.

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

Pero el plugin no funcionará correctamente hasta que te registres en una cuenta de Critical CSS. 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 su CSS en WordPress.

Para ello, vaya a la pestaña Critical CSS 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 hasta la sección de la 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.

Autoptimize tiene ahora 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 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 cómo optimizar la entrega de CSS en WordPress.

Publicidad

Síguenos en Facebook