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

¿Le gustaría optimizar la 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, entonces podría estar ralentizando su sitio web.

En este artículo, le mostraremos dos métodos sencillos para optimizar la 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 plugins también puede utilizar 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 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 sus clasificaciones de búsqueda y conversiones, lo que resulta en menos tráfico y ventas.

Estudio de StrangeLoop

Una forma 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: Optimización de la entrega de CSS de WordPress con WP Rocket

WP Rocket es el mejor almacenamiento en caché de WordPress plugin 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 una prima plugin, 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 WP Rocket plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.

Una vez activado, debe navegar a la Configuración »WP Rocket y cambie a la pestaña ‘Optimización de archivos’.

Cambiar 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’.

Marque Optimizar la entrega de CSS

Esta función identificará inteligentemente 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, de modo que sus visitantes verán 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

Autoptimizar es gratis plugin diseñado para mejorar la entrega de los archivos CSS y JS de su sitio web.

Si bien Autoptimize es gratis plugin, 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 Autoptimizar plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.

Tras la activación, debe visitar el Configuración »Optimización automática página para configurar el plugin ajustes. 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.

Desplácese hacia abajo hasta Opciones de CSS

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 plugin 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.

Regístrese para obtener una cuenta CSS crítica

Una vez que haya recibido su clave API Critical CSS, desplácese hacia abajo hasta la sección Clave API para poder pegarla en el cuadro de texto “Su clave API”. Después de eso, asegúrese de hacer clic en el botón Guardar cambios.

Pegue su clave API CSS crítica

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 construir 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 . También puedes encontrarnos en Twitter y Facebook.

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

Fuente: wpbeginner

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *