Jetpack Boost maneja CSS crítico para usted | Programar Plus

El CSS crítico es una de esas cosas que veo en mis informes de rendimiento pero que siempre parezco ignorar. Se lo que significa. Significa poner solo el CSS requerido para hacer que las cosas sean inmediatamente visibles en un <style> etiqueta en el <head> por lo que aparece en la primera solicitud de red, luego carga el resto de forma asincrónica, lo que ayudará a que la página se cargue más rápido.

Probablemente también haya visto la molestia en los informes de rendimiento de Lighthouse:

Lighthouse me dice que el CSS crítico es una oportunidad e incluso me da algunos consejos específicos de WordPress.

No soy del tipo de persona que se dedica a procesos de compilación grandes y complejos y, desafortunadamente, muchas herramientas para CSS crítico implican incluirlo dentro de un proceso de compilación existente.

Me enteré de Jetpack Boost y está diseñado para (entre otras cosas relacionadas con el rendimiento) facilitar el CSS crítico para los sitios de WordPress. Tener un complemento (¡gratis!) que se encargue de eso realmente me atrae.

Jetpack Boost está disponible gratuitamente en el directorio de complementos de WordPress, por lo que se instala como cualquier otro complemento.

Captura de pantalla del directorio de complementos de WordPress en el administrador de WordPress con una búsqueda abierta de Jetpack Boost, que es el primer elemento en los resultados de un total de cuatro complementos que se muestran.¡Busca, instala y activa! 🚀

La activación del complemento agrega un elemento “Jetpack Boost” al menú de administración de WordPress, y eso lleva a una pantalla práctica que se ejecuta como Lighthouse, pero en WordPress. Y no lo sabrías, hay una opción para generar CSS crítico allí mismo. Todo lo que tuve que hacer fue activar la función y Jetpack Boost comenzó a funcionar.

La pantalla de administración de Jetpack Boost que muestra el puntaje de rendimiento general del sitio, que es una letra B, un puntaje móvil del 83 % y un puntaje de escritorio del 86 %.  Debajo de los puntajes hay tres configuraciones de alternancia para habilitar CSS crítico, diferir JavaScript no esencial e imágenes de carga diferida.Mi puntaje solo puede subir desde aquí, ¿verdad?

El proceso no tarda mucho en ejecutarse. Cambié de ventana para revisar mi correo electrónico por un minuto y ya estaba hecho cuando volví a cambiar. Y, oye, mira lo que hizo por mí mientras holgazaneaba:

La pantalla de configuración de Jetpack Boost después de que se haya generado el CSS crítico.  El puntaje general ahora es una letra A, con un puntaje móvil de 94 y un puntaje de escritorio de 91.

¡No está mal para hacer clic en un botón! Pero tenemos que comparar manzanas con manzanas, ¿verdad? Volvamos a Lighthouse para ver qué dice.

Faro abierto en Chrome DevTools.  La puntuación de rendimiento es 99 y la oportunidad de usar CSS crítico ha pasado la auditoría.Ahora, si tan solo pudiera reducir el tiempo de respuesta inicial del servidor. 🧐

Incluso podemos ver la fuente para ver que la prueba está en el pudín:

Ventana de DevTools que muestra el código CSS en línea contenido en una etiqueta de estilo en el encabezado HTML.  El código en línea es un bloque gigante de texto blanco sobre un fondo negro.¡Vaya, eso es más de lo que esperaba!

Es realmente genial ver al equipo de Jetpack tan centrado en el rendimiento y en la medida en que le han dedicado un complemento completo. El rendimiento siempre ha sido parte de la configuración de Jetpack. Pero hacer que sea frontal y central como este realmente le permite a Jetpack hacer cosas más interesantes con el rendimiento, como la calificación y el CSS crítico, en formas que van más allá de la configuración básica. Me imagino que veremos más configuraciones de rendimiento de Jetpack haciendo el cambio al nuevo complemento en algún momento.

¡Felicitaciones al equipo de Jetpack! Esta es una mejora realmente agradable, y ciertamente oportuna, dado el reciente impulso de Google en Core Web Vitals y cómo afectarán al SEO.

(Visited 4 times, 1 visits today)