CSS crítico en WordPress: qué es y cómo optimizar la entrega de CSS

Al ejecutar una auditoría de rendimiento en Google PageSpeed ​​Insights, encontrará que Google le recomienda "eliminar los recursos que bloquean el procesamiento" casi siempre. Lo que significa que siempre debe cargar su CSS y JavaScript críticos en prioridad.

Pero, ¿cómo decidir qué CSS es crítico y cuál no? ¿Qué parte de tu sitio web deberías “retrasar” para acelerar otra? Se trata de priorizar y encontrar qué recursos de CSS son esenciales y cómo optimizar su entrega.

Sumerjámonos.

¿Qué es CSS crítico y por qué es importante para el rendimiento?

Critical CSS es una técnica que extrae el CSS de la parte superior de la página para mostrar la página lo más rápido posible. Es como tomar el mínimo de CSS para mostrar el contenido que está viendo un visitante.

En otras palabras, el CSS crítico es clave para optimizar el rendimiento. Antes de renderizar la página, su navegador necesita descargar y analizar los archivos CSS, haciendo que esos archivos sean un recurso de bloqueo de renderizado. Cuanto más grandes sean sus archivos CSS, más tiempo le llevará al navegador procesarlos. Todas esas solicitudes creadas por pesados ​​archivos CSS aumentarán el tiempo de carga de una página web, molestando a los visitantes. y Google.

La velocidad de la página también puede afectar su rendimiento de SEO debido al nuevo factor de clasificación, incluido Core Web Vitals. Son un conjunto de factores implementados por Google para medir la experiencia del usuario, incluida la velocidad de una página. Cuanto mejor sea la experiencia, mejor será su clasificación.

¿Está familiarizado con las seis métricas de Lighthouse que miden el rendimiento? Dos de ellos, First Contentful Paint (FCP) y First Input Delay (FID), miden la velocidad percibida de su sitio web. Si esas métricas están en buen estado, también lo estará su experiencia de usuario medida por Google. Sin embargo, si ambos KPI están en rojo, es mejor que optimice su CSS crítico.

CSS crítico explicado en lenguaje sencillo

En lenguaje sencillo, el CSS crítico es una tarea de optimización. Es como decirle a su navegador que cargue solo el CSS que está viendo el visitante. Esto ayuda a mejorar la velocidad percibida, es decir, qué tan rápido le parece el sitio web a un visitante.

Hagamos un ejercicio rápido con la imagen de abajo. Imagina que eres un usuario móvil que accede a un sitio web.

Escenario n. ° 1 : en la parte superior, hay una página con CSS que bloquea el renderizado. Verá una página en blanco hasta que se haya cargado todo el archivo CSS.

Escenario n.º 2 : en la parte inferior, el CSS crítico se representa primero. Comienza a ver la página mucho antes, ya que el navegador ya comenzó a cargar la hoja de estilo más importante.

Pregunta: ¿Qué escenario le “siente” más rápido?

Respuesta: Todos estamos de acuerdo en que la velocidad percibida del resultado final es mejor.

Su visitante notará una disminución percibida en el tiempo de carga de la página debido a una representación más rápida de la página cuando se realiza correctamente.

¿Por qué es necesario el CSS crítico?

Cargar una hoja de estilo CSS es típicamente la forma en que diseña su sitio de WordPress. CSS es el lenguaje utilizado para describir una página web, como los colores, el diseño y las fuentes. Sin CSS, la web se vería como nuestra columna izquierda a continuación:

Sitio de WP Rocket sin CSS	Sitio de WP Rocket con CSS

¿Qué significa la ruta de representación crítica de CSS?

La ruta de representación crítica es la serie de tareas que el navegador debe realizar para mostrar una página en la pantalla del visitante. Por ejemplo, esas tareas incluyen la descarga de fotos, las fuentes y el texto para mostrar en la página web.

Como se vio anteriormente, el navegador también necesita descargar sus archivos CSS para mostrar el diseño adecuado de la página. Si sus archivos son realmente grandes, los visitantes terminarán esperando hasta que se haya descargado todo el archivo.

Pero, ¿y si el navegador pudiera comenzar a mostrar el CSS a medida que avanza la descarga?

Imagine una forma de mitigar el bloqueo y comenzar la entrega de CSS lo antes posible. Esta técnica se conoce precisamente como la optimización de la ruta crítica de renderizado.

El navegador sigue cinco pasos hasta que muestra la página a los visitantes. Pueden pasar muchas cosas durante este proceso. Es por eso que debemos asegurarnos de que cada paso se complete lo más rápido posible.

Ahora surgen dos preguntas: ¿cómo optimizar cada paso? ¿Cómo asegurarnos de que tenemos la entrega de CSS más eficiente?

Estas preguntas nos llevan a la siguiente sección. Aprenderá cómo mejorar los tiempos de renderizado con la técnica crítica de CSS (optimizar la entrega de CSS) y eliminar los errores de CSS que bloquean el renderizado.

Los 3 pasos para optimizar la entrega de CSS

CSS controla el formato y el estilo visual de su sitio de WordPress, pero si el archivo CSS no se entrega de manera óptima, puede terminar con una página web lenta.

Entonces, una de las mejores maneras de mejorar el rendimiento de su sitio de WordPress es optimizar cómo y cuándo se entrega el código CSS. Hay tres pasos principales para optimizar la entrega de CSS para su sitio de WordPress, a saber:

Paso 1: encuentre y genere el CSS crítico , es decir, identificar el código CSS mínimo que necesita para mostrar el contenido de la mitad superior de la página. Debe averiguar qué puede ver el usuario en la ventana gráfica cuando carga la página por primera vez. Determinar el CSS crítico correcto para una página puede ser complejo porque los visitantes usan muchos tamaños de pantalla diferentes, como computadoras de escritorio, tabletas y dispositivos móviles.

Cómo encontrar CSS crítico

WebDev le brinda tres herramientas que puede usar para identificar CSS crítico:

• Crítico: extrae CSS de la parte superior de la página (y también lo alinea y lo minimiza)
• CriticalCSS: otro módulo que extrae el CSS crítico
• Penthouse: una buena opción si su sitio tiene mucho CSS

Paso 2: Alinee este CSS crítico : agregue el CSS crítico en el <head> del documento HTML para eliminar todas las solicitudes adicionales para obtener estos estilos.

En el siguiente ejemplo de WebDev, han insertado el CSS crítico en el archivo <head> para que el navegador pueda entregarlo más rápido y mostrar algo a los usuarios lo antes posible.

Paso 3: cargue el resto del CSS de forma asíncrona ; eso retrasa el CSS no crítico para que pueda cargarse después de que sus visitantes puedan ver el contenido de su página web. Esta técnica también se conoce como “carga diferida”. WebDev explica muy bien todo el proceso manual.

Al seguir esos tres pasos manuales, optimizará su entrega de CSS y su ruta de representación crítica. Sin embargo, existen métodos más sencillos para optimizar la entrega de CSS de WordPress: ¡utilizando un complemento de WordPress!

Cómo generar CSS crítico y optimizar la ruta de representación crítica con un complemento

Afortunadamente, puede optimizar la entrega de su CSS crítico y diferir recursos menos importantes utilizando un complemento de WordPress. Eso le ahorrará algo de tiempo y evitará modificar sus archivos de código manualmente. Hemos elaborado una lista para que pueda probar qué herramienta es la mejor para usted.

• WP Rocket: el complemento de caché más completo que detecta su CSS crítico en línea y lo difiere de la manera más simple. Verás un ejemplo práctico en la siguiente sección.

• Optimización automática: inyecta CSS en el encabezado de la página de forma predeterminada y también puede alinear y diferir CSS crítico.

• Limpieza de activos: archivos CSS en línea (automáticamente y especificando la ruta a las hojas de estilo).

Cómo optimizar la entrega de CSS con WP Rocket

En WP Rocket 3.10, la opción Cargar CSS de forma asincrónica aborda la recomendación de velocidad de página que vimos anteriormente: "Eliminar los recursos que bloquean el renderizado". WP Rocket cubre dos optimizaciones principales de CSS:

1. Genera el CSS crítico necesario para representar la parte visible de su sitio web (el contenido de la mitad superior de la página).
2. Carga todos los demás archivos CSS de forma asíncrona (priorizando cuál debe cargarse primero).

Para optimizar la entrega de CSS, simplemente siga esos pasos en el tablero de WP Rocket:

• Ve a Ajustes > WP Rocket
• Haga clic en la pestaña Optimización de archivos .
• Desplácese hacia abajo hasta la sección Archivos CSS y haga clic en el cuadro denominado Optimizar la entrega de CSS .
• Selecciona la opción Remove Unused CSS (opción recomendada ). Esto extraerá solo el CSS necesario en la página y también lo integrará.

Alternativamente, WP Rocket también le permite cargar CSS de forma asíncrona y ofrece una opción alternativa para el CSS crítico. Utilice este campo alternativo en caso de que el complemento no pueda generar el CSS crítico correcto.

Por último, pero no menos importante, WP Rocket también aborda las recomendaciones de “Reducir el CSS no utilizado” de PageSpeed ​​Insights.

El CSS no utilizado afecta el tiempo de carga de la página porque el navegador todavía tiene que cargarlos. Las métricas de rendimiento de Google, como la pintura con contenido más grande (LCP) y el tiempo total de bloqueo (TBT) , también se verán afectadas. LCP y TBT tienen un peso total del 55% en la calificación de Google PageSpeed ​​y Core Web Vitals, por lo que es crucial mantener esas métricas saludables.

Probemos esas opciones de WP Rocket en un sitio de WordPress con una mala calificación en PSI (móvil). Verá cómo WP Rocket nos ayudará en nuestro proceso de optimización de la velocidad de la página.

Antes de optimizar mi CSS crítico, mi calificación de rendimiento era solo de 43/100, lo que puso a mi sitio móvil en números rojos:

También recibo dos advertencias: "Reducir el CSS no utilizado" y "Eliminar los recursos que bloquean el renderizado".

Ahora, instalemos WP Rocket y activemos la opción “ Eliminar CSS no utilizado” .

Los resultados de rendimiento ahora son excelentes en dispositivos móviles . Hemos llegado al 94/100 con solo un par de clics. WP Rocket optimizó mi ruta de renderizado y también se ocupó de mi CSS crítico.

Las advertencias "Eliminar recursos de bloqueo de procesamiento" y "Reducir CSS no utilizado" ahora se encuentran en la sección "auditorías aprobadas".

Al igual que yo, puede usar WP Rocket para optimizar la entrega de nuestro CSS crítico. Es un complemento confiable y eficiente que me ayudó a alcanzar objetivos de rendimiento sorprendentes con unos pocos clics.

Terminando

Optimizar su CSS crítico parece desalentador, pero no tiene por qué ser así, gracias a complementos como WP Rocket. Vimos que WP Rocket ayudó a eliminar las advertencias rojas relacionadas con los recursos que bloquean el renderizado en Google PageSpeed ​​Insights.

Ahorrará un tiempo precioso porque WP Rocket aplica automáticamente el 80 % de las mejores prácticas de rendimiento web, y verá una mejora instantánea de la velocidad tras la activación .

Además, siempre puede contar con nuestra garantía de devolución del 100 % del dinero. Aunque no creemos que alguna vez desee uno, con gusto le proporcionaremos un reembolso si lo solicita dentro de los 14 días posteriores a la compra.