[icon name="fa-wordpress"]

Instalar WordPress

Guía de Instalación

[icon name="fa-heartbeat"]

Optimizar WordPress

Optimización y Velocidad

[icon name="fa-lock"]

Seguridad de WordPress

Guía de Protección

optimizar la entrega de CSS de WordPress

Cómo optimizar la entrega de CSS de WordPress

¿Te gustaría optimizar la entrega de CSS en WordPress?

Los archivos CSS controlan el formato visual y el estilo de tu página web en WordPress. Pero si tu código CSS no se entrega de manera óptima, entonces podrías estar ralentizando su sitio web.

En este artículo, te mostraremos dos métodos sencillos para optimizar la entrega de CSS de WordPress.

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

Los archivos CSS se utilizan para definir la apariencia visual de tu sitio de WordPress. Tu 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 tu sitio dependiendo de cómo estén configurados, de ahí que sea tan importante optimizar la velocidad de WordPress.

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.

Razones por las que CSS puede ralentizar tu página web en WordPress

Una forma en que los archivos CSS pueden ralentizar tu sitio web es si es necesario cargarlos antes de que se pueda mostrar la página. Eso significa que tus visitantes verán una página en blanco hasta que se cargue el archivo CSS. Esto se conoce como bloqueo de renderizado de CSS.

Otra razón común por la que los archivos CSS pueden ralentizar tu 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.

Te podría interesar leer:  Cómo Acelerar y Optimizar Imágenes en WordPress

La buena noticia es que puedes 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 añade 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 tus visitantes puedan ver el contenido de la página. Esto se conoce como «carga diferida».

En este tutorial, te mostraremos dos métodos para optimizar la entrega de CSS en WordPress, y puedes elegir el que mejor se adapte a tus necesidades.

Método 1: Optimización de la entrega de CSS de WordPress con WP Rocket

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 económico.

Lo primero que debes hacer es instalar y activar el complemento WP Rocket . Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin en WordPress.

Una vez activado, debes navegar a la página Configuración » WP Rocket y cambiar a la pestaña ‘Optimizar archivos’

Optimización de archivos wprocket

A continuación, debes desplazarte hacia abajo hasta la sección de archivos CSS. Una vez allí, debes marcar la casilla junto a la opción ‘Optimizar la entrega de CSS‘.

Te podría interesar leer:  Borrar Archivos No Usados en los Medios de WordPress

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 tus 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 tu contenido.

Todo lo que necesitas hacer ahora es hacer clic en el botón Guardar cambios y esperar a que WP Rocket genere el archivo CSS necesario para todas tus publicaciones y páginas.

También borrará automáticamente el caché de tu sitio web, de modo que tus visitantes verán la nueva versión optimizada de tu página web en lugar de las versiones no optimizadas almacenadas en el caché.

Método 2: Optimización de la entrega de CSS de WordPress con Autoptimize

Optimización de 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 tu página 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. Autoptimize necesita la ayuda de un servicio de terceros premium.

Sin embargo, podría ser una buena opción si tienes un presupuesto ajustado y no necesitas todas las demás funciones de WP Rocket para acelerar tu página web.

Lo primero que debes hacer es instalar y activar el complemento Autoptimize.

Tras la activación, debes visitar la página Configuración » Optimización automática para configurar los ajustes del plugin. Una vez allí, debes desplazarse hacia abajo hasta la sección Opciones de CSS y marcar la casilla Optimizar código CSS en la parte superior.

Optimizar código 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‘.

Te podría interesar leer:  Cómo Registrar Nuevo Administrador en WordPress por FTP

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 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 necesitas para optimizar la entrega de CSS de WordPress.

Para hacer eso, navega a la pestaña Critical CSS en la configuración de Autoptimize. Aquí encontrarás la información que necesitas para registrarte con Critical CSS. Puedes comenzar haciendo clic en el enlace de registro en el tercer párrafo.

Critical CSS

Una vez que hayas recibido tu clave API Critical CSS, desplázate hacia abajo hasta la sección Clave API para poder pegarla en el cuadro de texto «tu clave API». Después de eso, asegúrate de hacer clic en el botón Guardar cambios.

API Critical CSS

Autoptimize ahora tiene toda la información que necesita para agregar el CSS crítico online y posponer la carga de las hojas de estilo hasta que la página se haya renderizado. Como resultado, tu sitio web se cargará más rápidamente.

Esperamos que este tutorial te haya ayudado a aprender a optimizar la entrega de CSS de WordPress.

Es posible que también desees ver nuestra guía definitiva sobre cómo instalar WordPress y nuestra guía sobre cómo acelerar la velocidad de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver tutoriales en video de WordPress.

Deja un comentario

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar