Jetpack Boost maneja CSS crítico para usted

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 colocar solo el CSS necesario para hacer que las cosas sean inmediatamente visibles en una styleetiqueta headpara que aparezca en la primera solicitud de red, luego cargar el resto de forma asincrónica , lo que ayudará a que la página se cargue más rápido.

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

No soy una persona que se dedique a procesos de construcción complejos y, desafortunadamente, muchas herramientas para CSS crítico implican incluirlas dentro de un proceso de construcció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 (¡gratuito!) 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.

La activación del complemento agrega un elemento “Jetpack Boost” al menú de administración de WordPress, y eso conduce a una pantalla útil que se ejecuta algo así 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 comienza a funcionar.

El proceso no tarda mucho en ejecutarse. Cambié de Windows 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:

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

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

Es realmente genial ver al equipo de Jetpack tan concentrado 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 hacerlo tan central como este realmente permite a Jetpack hacer cosas más interesantes con el rendimiento, como calificaciones y CSS crítico, en formas que van más allá de las configuraciones básicas. Me imagino que veremos más configuraciones de rendimiento de Jetpack migrando al nuevo complemento en algún momento.

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