Qué es el CSS Crítico y cómo usarlo para optimizar tu web WordPress

Hoy me gustaría que aprendiéramos ese concepto de CSS crítico al que tanto se refieren los servicios de optimización web, así que vamos a ver a qué se refieren con eso de CSS crítico, cómo se crea y, sobre todo, cómo aprovechar el concepto para mejorar la experiencia de los usuarios en nuestra web y, de paso, obtener mejores mediciones en servicios como PageSpeed Insights, WebPageTest o GTMetrix.

Así que vamos a empezar por el principio…

WordPress y el CSS

Todo tema WordPress tiene un archivo style.css que contiene todo el código necesario para dar estilo a tu web.

Los desarrolladores de temas tienen que procurar ofrecer estilos compatibles para todas las características de WordPress, o sea, entradas de blog, comentarios, páginas de producto, formularios, cabeceras, pies de página, y a veces con plugins populares.

Además, muchos plugins que instales también añaden hojas de estilo CSS que se cargarán en cada página, por si decides usar su funcionalidad en alguna parte de tu web, algo que ellos nunca saben, pues será decisión tuya.

Todo este CSS se suele cargar mediante llamadas a las distintas hojas de estilo en la cabecera de tu web, llegando a pesar en ocasiones varios cientos de Kbs.

Esto es así porque las hojas de estilo CSS son prioritarias en el proceso de carga de la web cuando un usuario la visita.

Antes de que se cargue el resto de la página las hojas de estilo CSS son lo primero que se renderiza.

Esto incluye contenido tan importante como texto e imágenes, cruciales para satisfacer el motivo por el que el usuario llegó a tu sitio.

¿Hay algo malo en cómo carga WordPress el CSS?

Para plantearnos siquiera el concepto del CSS crítico antes habría que preguntarse si hay algún problema en el modo en el que WordPress, sus temas y plugins cargan el CSS.

Y normalmente no, no hay nada malo, salvo que al analizar tus páginas en algún servicio de medición de las métricas web principales, o Core Web Vitals, descubras un mensaje que indique que hay recursos que bloqueen el renderizado (render blocking resources en inglés).

Como ves en la captura de la herramienta PageSpeed Insights, hay una serie de hojas de estilos, cargados en la cabecera del sitio, que bloquean el renderizado.

Porque si la hoja de estilos CSS tarda mucho en cargar, el contenido de la página tiene que esperarla, para que esta lo analice y lo muestre en la página en el modo en el que esté definido en la hoja de estilos.

Y, si mientras tanto ¿qué pasa si lo único que ve el usuario es una página en blanco durante un segundo o más?

Puede que no te parezca mucho, pero si tienes en cuenta que un segundo de retardo en la carga de página desde dispositivos móviles disminuye la conversión en un 20% por cada segundo adicional, es algo a tener en cuenta.

Pero ¿qué es eso de bloquear el renderizado?

Recursos que bloquean el renderizado

Cuando se habla de recursos que bloquean el renderizado nos referimos siempre a que para mostrar la primera parte visible de la web, hay que cargar un montón de código desde las hojas de estilo o scripts que en realidad no es todo necesario para que se muestre esa primera parte de la web.

A esta primera parte de la web, en la terminología de las métricas web principales se les llama FCP (First Contentful Paint) y FMP (First Meaningful Paint), o sea, a ese conjunto de la web que el usuario ve nada más llegar, antes de hacer scroll para comprobar si hay más contenido.

Puedes detectar estos recursos que bloquean el renderizado, además de con los análisis de PageSpeed Insights y otras herramientas online, desde la misma consola del navegador, en la pestaña «Coverage», que marcará en rojo los recursos críticos para la visualización de la página, y al hacer clic en cada uno se mostrará su posición en el código en la parte superior.

A esta primera parte visible de la web, tan sensible a los recursos que bloquean el renderizado, se le llama también Above the fold o Above the scroll (encima del doblado o encima del scroll).

¿Qué es Above the fold?

Este concepto de above the fold es lo que, según Google, marca diferencia en la experiencia de usuario, pues esa primera impresión de carga del contenido visible antes del scroll es lo que determina para tu visitante si tu web es rápida y está optimizada para su visualización, permitiendo acceder de manera inmediata a su contenido.

Determinará enormemente la percepción de rendimiento de tu web.

El concepto de above the fold proviene de los periódicos en papel, pues en los tradicionales kioscos de prensa se mostraban los distintos diarios doblados, y el usuario optaba (salvo sesgo previo) por uno u otro en base a lo que se veía por encima del doblado, por la llamada «cabecera».

Esto, llevado al mundo digital, es de lo que estamos hablando, de lo que se ve en una página web antes de hacer scroll hacia abajo.

De este modo, si no consigues una magnífica y rápida experiencia de visualización en la parte above the fold, muchos usuarios ni siquiera llegarán a ver lo que hay debajo.

Dicho esto, vamos al siguiente, y esperado, concepto: CSS crítico.

¿Qué es el CSS crítico?

CSS crítico, o ruta de CSS crítico, es el CSS mínimo necesario para mostrar el contenido que está above the fold de cualquier página web.

Se le llama «crítico» porque es el CSS que ayuda al navegador a mostrar rápidamente la primera parte de la página, sin necesidad de descargar todos los archivos CSS completos.

El CSS crítico no tiene nada que ver con la velocidad de carga de la página, sino con el renderizado o visualización del contenido de la página de manera rápida.

Normalmente, el CSS crítico suele estar integrado (inline) en la cabecera de la página, y luego, el archivo CSS original se carga de manera asíncrona en el pie de página.

También ten en cuenta que cómo los tamaños de pantalla pueden variar entre distintos dispositivos, el CSS crítico puede también variar dependiendo en qué dispositivos quieras priorizar el renderizado.

Cómo generar el CSS crítico y no bloquear el renderizado

Si hemos detectado que hay CSS que bloquea el renderizado de nuestras páginas entonces deberíamos hacer algo para mejorar la experiencia de nuestros visitantes ¿no?

Así que vamos a ver varias estrategias que podemos aplicar para no bloquear el renderizado above the fold y obtener una mejor experiencia de usuario y percepción de rendimiento.

Pero ¿qué es eso de generar el CSS crítico?

Pues consiste en:

1. Detectar el CSS crítico, necesario para el renderizado sin bloqueos del above the fold de las páginas.
2. Añadir el CSS crítico integrado (inline) en la cabecera de las páginas.
3. Aplazar la carga del resto del CSS, normalmente en el pie de página.

Hay básicamente 2 maneras de generar el CSS crítico…

Generar el CSS crítico manualmente

Pues sí, puedes crear ese CSS crítico manualmente, y lo primero es obtener el CSS crítico:

1. Ve a la web de Critical Path CSS Generator e introduce la URL de la página.
2. Pulsa el botón de «GENERATE CPCSS»
3. Copia el código resultante en la caja de CSS crítico generado

Ahora, con el CSS crítico generado, hay que que insertarlo antes de la etiqueta </head> de tu tema, normalmente en el archivo header.php.

Puedes hacerlo así, editando el archivo header.php del tema hijo (para no perder cambios en las actualizaciones) si quieres, es totalmente válido.

Solo tienes que añadirlo antes de la primera etiqueta <link rel='stylesheet' href='...'>, dentro de unas etiquetas <style></style>.

O sea, así:

<style>/* Critical Path CSS Generated by Pegasaas Accelerator at https://pegasaas.com/ for https://aulawp.com/web/ */
@charset "UTF-8";body,figure,h2,h3,hr,html,li,p,ul{border:0;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}main,nav{display:block}a{background-color:transparent}a,a:visited{text-decoration:none}strong{font-weight:700}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}button,input{color:inherit;font:inherit;margin:0}button{overflow:visible}button{text-transform:none}button{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}@media (min-width:544px){.ast-container{max-width:100%}}@media (min-width:768px){.ast-container{max-width:100%}}@media (min-width:992px){.ast-container{max-width:100%}}@media (min-width:1200px){.ast-container{max-width:100%}}.ast-container{margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.ast-container::after{content:"";display:table;clear:both}h2,h3{clear:both}.entry-content h2,h2{color:#808285;font-size:1.7em;line-height:1.3}.entry-content h3,h3{color:#808285;font-size:1.5em;line-height:1.4}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{color:#808285;background:#fff;font-style:normal}ul{margin:0 0 1.5em 3em}ul{list-style:disc}li>ul{margin-bottom:0;margin-left:1.5em}strong{font-weight:700}i{font-style:italic}img{height:auto;max-width:100%}hr{background-color:#ccc;border:0;height:1px;margin-bottom:1.5em}button,input{color:#808285;font-weight:400;font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}ul{margin:0 0 1.5em 3em}ul{list-style:disc}li>ul{margin-bottom:0;margin-left:1.5em}button{border:1px solid;border-color:#eaeaea;border-radius:2px;background:#e6e6e6;padding:.6em 1em .4em;color:#fff}input[type=email],input[type=search]{color:#666;border:1px solid #ccc;border-radius:2px;-webkit-appearance:none}a{color:#4169e1}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}#primary:after,#primary:before,.ast-container:after,.ast-container:before,.clear:after,.clear:before,.site-content:after,.site-content:before,.site-header:after,.site-header:before,.site-main:after,.site-main:before{content:"";display:table}#primary:after,.ast-container:after,.clear:after,.site-content:after,.site-header:after,.site-main:after{clear:both}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:not(.logged-in){position:relative}#page{position:relative}a{text-decoration:none}img{vertical-align:middle}.entry-content h2,.entry-content h3{margin-bottom:20px}p{margin-bottom:1.75em}.search-form .search-field{outline:0}.ast-search-menu-icon{position:relative;z-index:3}.site .skip-link{background-color:#f1f1f1;box-shadow:0 0 1px 1px rgba(0,0,0,.2);color:#21759b;display:block;font-family:Montserrat,"Helvetica Neue",sans-serif;font-size:14px;font-weight:700;left:-9999em;outline:0;padding:15px 23px 14px;text-decoration:none;text-transform:none;top:-9999em}input{line-height:1}body,button{line-height:1.85714285714286}body{background-color:#fff}#page{display:block}#primary{display:block;position:relative;float:left;width:100%}#primary{margin:4em 0}.ast-page-builder-template .site-content>.ast-container{max-width:100%;padding:0}.ast-page-builder-template .site-content #primary{padding:0;margin:0}.ast-page-builder-template .entry-header{margin-top:4em;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.ast-page-builder-template .entry-header.ast-header-without-markup{margin-top:0;margin-bottom:0}.astra-search-icon::before{content:"\e8b6";font-family:Astra;font-style:normal;font-weight:400;text-decoration:inherit;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ast-search-icon .astra-search-icon{font-size:1.3em}.main-navigation{height:100%;-js-display:inline-flex;display:inline-flex}.main-navigation ul{list-style:none;margin:0;padding-left:0;position:relative}.main-header-menu .menu-link{text-decoration:none;padding:0 1em;display:inline-block}.main-header-menu .menu-item{position:relative}.main-header-menu .sub-menu{width:240px;background:#fff;left:-999em;position:absolute;top:100%;z-index:99999}.main-header-menu .sub-menu .menu-link{padding:.9em 1em;display:block;word-wrap:break-word}.submenu-with-border .sub-menu{border-width:1px;border-style:solid}.submenu-with-border .sub-menu .menu-link{border-width:0 0 1px;border-style:solid}.ast-desktop .submenu-with-border .sub-menu>.menu-item:last-child>.menu-link{border-bottom-width:0}.header-main-layout-1 .ast-main-header-bar-alignment{margin-left:auto}#site-navigation{height:100%}.ast-no-sidebar .entry-content .alignfull{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);max-width:100vw;width:100vw}.ast-no-sidebar .entry-content .alignwide{margin-left:-100px;margin-right:-100px;max-width:unset;width:unset}.wp-block-separator{max-width:100px}@media (max-width:782px){.entry-content .wp-block-columns .wp-block-column{flex-basis:100%}}body{overflow-x:hidden}.ast-page-builder-template.ast-no-sidebar .entry-content .alignwide{margin-left:0;margin-right:0}.ast-builder-grid-row{display:grid;grid-template-columns:auto auto;align-items:center;grid-column-gap:20px}.ast-container[data-section=section-primary-header-builder],.ast-container[data-section=section-primary-header-builder] .site-header-primary-section-left,.ast-container[data-section=section-primary-header-builder] .site-header-primary-section-right{position:relative}.ast-builder-layout-element{align-items:center}.site-header-section{height:100%;min-height:0;align-items:center}.site-header-section .ast-main-header-bar-alignment{height:100%}.site-header-section>*{padding:0 10px}.site-header-section>div:first-child{padding-left:0}.site-header-section>div:last-child{padding-right:0}.site-header-section.ast-flex{flex-wrap:nowrap}.site-header-section .ast-builder-menu{align-items:center}.ast-builder-layout-element.ast-header-search{height:auto}.ast-grid-right-section{justify-content:flex-end}.ast-logo-title-inline .ast-site-identity{padding:1em 0;-js-display:inline-flex;display:inline-flex;vertical-align:middle;align-items:center}.ast-logo-title-inline .site-logo-img{padding-right:1em}.ast-builder-grid-row-container{display:grid;align-content:center}.site-header-focus-item .main-header-bar-navigation .menu-item-has-children>.menu-link:after{content:"\e900";display:inline-block;font-family:Astra;font-size:9px;font-size:.6rem;font-weight:700;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:10px;line-height:normal}.main-header-bar .main-header-bar-navigation{height:100%}.ast-nav-menu .sub-menu{line-height:1.45}.ast-builder-menu .main-navigation{padding:0}.ast-builder-menu .main-navigation>ul{align-self:center}.ast-header-search .ast-search-menu-icon .search-form .search-field:-ms-input-placeholder{opacity:.5}.site-header{z-index:99;position:relative}.main-header-bar-wrap{position:relative}.main-header-bar{background-color:#fff;border-bottom-color:#eaeaea;border-bottom-style:solid}.main-header-bar{margin-left:auto;margin-right:auto}.ast-desktop .main-header-menu .sub-menu{box-shadow:0 4px 10px -2px rgba(0,0,0,.1)}.site-branding{line-height:1;align-self:center}.ast-menu-toggle{display:none;background:0 0;color:inherit;border-style:dotted;border-color:transparent}.main-header-bar{z-index:4;position:relative}.main-header-bar .main-header-bar-navigation{height:100%}.main-header-bar .main-header-bar-navigation .sub-menu{line-height:1.45}.main-header-bar .main-header-bar-navigation .menu-item-has-children>.menu-link:after{content:"\e900";display:inline-block;font-family:Astra;font-size:9px;font-size:.6rem;font-weight:700;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:10px;line-height:normal}.main-header-bar .ast-search-menu-icon .search-form{background-color:#fff}.ast-search-menu-icon.slide-search .search-form{-webkit-backface-visibility:visible;backface-visibility:visible;visibility:hidden;opacity:0;position:absolute;z-index:3;right:-1em;top:50%;transform:translateY(-50%)}.ast-search-menu-icon .search-form{border:1px solid #e7e7e7;line-height:normal;padding:0 3em 0 0;border-radius:2px;display:inline-block;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;color:inherit;background-color:#fff}.ast-search-menu-icon .astra-search-icon{-js-display:flex;display:flex;line-height:normal}.ast-search-menu-icon .search-field{border:none;background-color:transparent;border-radius:inherit;color:inherit;font-size:inherit;width:0;color:#757575}.ast-search-menu-icon .search-submit{display:none;background:0 0;border:none;font-size:1.3em;color:#757575}.ast-header-search .ast-search-menu-icon.slide-search .search-submit{position:unset}.ast-header-search .ast-search-menu-icon.slide-search .search-form{-js-display:flex;display:flex;align-items:center}.ast-search-icon{z-index:4;position:relative;line-height:normal}.ast-site-identity{padding:1em 0}input[type=email],input[type=search]{color:#666;padding:.75em;height:auto;border-width:1px;border-style:solid;border-color:#eaeaea;border-radius:2px;background:#fafafa;box-shadow:none;box-sizing:border-box}.page .entry-header{margin-bottom:1.5em}.ast-single-post .entry-header.ast-header-without-markup{margin-bottom:0}.entry-header{margin-bottom:1em;word-wrap:break-word}.entry-content{word-wrap:break-word}.entry-content p{margin-bottom:1.6em}.ast-flex{-js-display:flex;display:flex;flex-wrap:wrap}.ast-inline-flex{-js-display:inline-flex;display:inline-flex;align-items:center;flex-wrap:wrap;align-content:center}.ast-flex-grow-1{flex-grow:1}.ast-desktop .astra-menu-animation-fade>.menu-item>.sub-menu{opacity:0;visibility:hidden}@charset "UTF-8";.wp-block-button__link{color:#fff;background-color:#32373c;border:none;border-radius:1.55em;box-shadow:none;display:inline-block;font-size:1.125em;padding:.667em 1.333em;text-align:center;text-decoration:none;overflow-wrap:break-word}.wp-block-button__link:visited{color:#fff}.is-style-outline>.wp-block-button__link{border:2px solid}.is-style-outline>.wp-block-button__link:not(.has-background){background-color:transparent}.wp-block-columns{display:flex;margin-bottom:1.75em;flex-wrap:wrap}@media (min-width:782px){.wp-block-columns{flex-wrap:nowrap}}.wp-block-columns.are-vertically-aligned-center{align-items:center}.wp-block-column{flex-grow:1;min-width:0;word-break:break-word;overflow-wrap:break-word}@media (max-width:599px){.wp-block-column{flex-basis:100%!important}}@media (min-width:600px) and (max-width:781px){.wp-block-column:not(:only-child){flex-basis:calc(50% - 1em)!important;flex-grow:0}.wp-block-column:nth-child(2n){margin-left:2em}}@media (min-width:782px){.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-column[style*=flex-basis]{flex-grow:0}.wp-block-column:not(:first-child){margin-left:2em}}.wp-block-column.is-vertically-aligned-center{-ms-grid-row-align:center;align-self:center}.wp-block-column.is-vertically-aligned-center{width:100%}.wp-block-cover{position:relative;background-size:cover;background-position:50%;min-height:430px;width:100%;display:flex;justify-content:center;align-items:center;padding:1em;box-sizing:border-box}.wp-block-cover.has-parallax{background-attachment:fixed}@supports (-webkit-overflow-scrolling:touch){.wp-block-cover.has-parallax{background-attachment:scroll}}@media (prefers-reduced-motion:reduce){.wp-block-cover.has-parallax{background-attachment:scroll}}.wp-block-cover.has-background-dim:not([class*=-background-color]){background-color:#000}.wp-block-cover.has-background-dim:before{content:"";background-color:inherit}.wp-block-cover.has-background-dim:not(.has-background-gradient):before{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;opacity:.5}.wp-block-cover:after{display:block;content:"";font-size:0;min-height:inherit}@supports ((position:-webkit-sticky) or (position:sticky)){.wp-block-cover:after{content:none}}.wp-block-cover .wp-block-cover__inner-container{width:100%;z-index:1;color:#fff}.wp-block-cover p:not(.has-text-color){color:inherit}.wp-block-group{box-sizing:border-box}.wp-block-spacer{clear:both}:root .has-very-light-gray-color{color:#eee}.has-large-font-size{font-size:2.25em}.has-text-align-center{text-align:center}:root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-20:#005a87}:root{--coblocks-spacing--0:0;--coblocks-spacing--1:0.5em;--coblocks-spacing--2:1em;--coblocks-spacing--3:1.5em;--coblocks-spacing--4:2em;--coblocks-spacing--5:2.5em;--coblocks-spacing--6:3em;--coblocks-spacing--7:3.5em;--coblocks-spacing--8:4em;--coblocks-spacing--9:4.5em;--coblocks-spacing--10:7em}.has-parallax{background-attachment:fixed}@supports (-webkit-overflow-scrolling:touch){.has-parallax{background-attachment:scroll}}@media (prefers-reduced-motion:reduce){.has-parallax{background-attachment:scroll}}.has-huge-padding{padding:var(--coblocks-spacing--4,2em)}.has-shadow{box-shadow:0 1.5vw 3vw -0.7vw rgba(0,0,0,0.125)}.flickity-button-icon{fill:#000;transform:translate3d(0,0,0)}.flickity-prev-next-button .flickity-button-icon{height:50%;left:23%;position:absolute;top:25%;width:50%}.previous.flickity-prev-next-button .flickity-button-icon{left:26%}:root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-20:#005a87}.wp-block-coblocks-accordion-item p:first-of-type{margin-top:0}.wp-block-coblocks-accordion-item p:last-of-type{margin-bottom:0}.wp-block-coblocks-accordion-item__content{border:1px solid rgba(140,140,151,0.1);border-radius:0 0 4px 4px;border-top:0;padding:15px 20px}.coblocks-form .coblocks-field{margin:0 0 1.25rem 0;width:100%}.coblocks-form .coblocks-field.verify{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.wp-block-coblocks-gallery-carousel .flickity-button-icon{display:none}.wp-block-coblocks-icon{position:relative}.wp-block-coblocks-icon__inner{display:inline-block;position:relative;vertical-align:middle}.wp-block-coblocks-icon__inner a{border:0 !important;box-shadow:none !important;height:100%;outline:none;text-shadow:none;width:100%}.wp-block-coblocks-icon__inner svg{fill:currentColor;height:100%;vertical-align:middle;width:100%}.wp-block-coblocks-media-card__wrapper{align-items:center;display:grid;grid-template-areas:"media-text-media media-text-content";grid-template-columns:55% auto;grid-template-rows:auto;margin-left:auto;margin-right:auto;padding:0 !important;position:relative}.wp-block-coblocks-media-card.is-style-right .wp-block-coblocks-media-card__wrapper{grid-template-areas:"media-text-content media-text-media";grid-template-columns:auto 55%}.wp-block-coblocks-media-card__inner{color:inherit !important}.wp-block-coblocks-media-card__media{grid-area:media-text-media;margin:0;position:relative}.wp-block-coblocks-media-card__content{grid-area:media-text-content;margin-left:-50%;position:relative;word-break:break-word;z-index:1}@media (min-width:600px){.wp-block-coblocks-media-card__content{margin-left:-100px}}.wp-block-coblocks-media-card__content p:last-of-type{margin-bottom:0}.wp-block-coblocks-media-card__content h3{margin-top:0 !important}.wp-block-coblocks-media-card.is-style-right .wp-block-coblocks-media-card__content{margin-left:0;margin-right:-50%}@media (min-width:600px){.wp-block-coblocks-media-card.is-style-right .wp-block-coblocks-media-card__content{margin-right:-100px}}.wp-block-coblocks-media-card__wrapper>figure>img{max-width:unset;vertical-align:middle;width:100%}@media (max-width:599px){.wp-block-coblocks-media-card.is-stacked-on-mobile .wp-block-coblocks-media-card__wrapper{grid-template-areas:"media-text-media" "media-text-content";grid-template-columns:100% !important}}@media (max-width:599px) and (min-width:600px){.wp-block-coblocks-media-card.is-stacked-on-mobile.is-style-right .wp-block-coblocks-media-card__content{margin-right:-100px}}@media (max-width:599px) and (min-width:600px){.wp-block-coblocks-media-card.is-stacked-on-mobile .wp-block-coblocks-media-card__media{position:inherit}}@media (max-width:599px){.wp-block-coblocks-media-card.is-stacked-on-mobile .wp-block-coblocks-media-card__content{margin-left:5%;margin-right:5%;margin-top:-33%}}@media (max-width:599px) and (min-width:600px){.wp-block-coblocks-media-card.is-stacked-on-mobile .wp-block-coblocks-media-card__content{grid-area:media-text-content;margin-left:-100px}}@media (max-width:599px){.wp-block-coblocks-media-card.is-stacked-on-mobile .wp-block-coblocks-media-card__content p:last-of-type{margin-bottom:0}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.wp-block-coblocks-media-card .wp-block-coblocks-media-card__wrapper{display:flex}.wp-block-coblocks-media-card .wp-block-coblocks-media-card__wrapper .wp-block-coblocks-row__inner{flex-grow:1}.wp-block-coblocks-media-card.is-style-right figure{order:2}.wp-block-coblocks-media-card.is-style-right .wp-block-coblocks-row__inner{order:1}}.wp-block-coblocks-row{position:relative}.wp-block-coblocks-row[data-columns="1"] .wp-block-coblocks-column__inner>:not([class*="wp-block-"]){margin-left:auto;margin-right:auto;max-width:100%}.wp-block-coblocks-column{height:100%;margin-bottom:32px;min-width:0;overflow-wrap:break-word;position:relative;word-break:break-word}@media (min-width:600px){.wp-block-coblocks-column{margin-bottom:0}}.wp-block-coblocks-column p{margin-top:0}.wp-block-coblocks-column p:last-of-type{margin-bottom:0}.has-medium-gutter>[class*="wp-block-coblocks-column"]:nth-child(odd){margin-right:var(--coblocks-spacing--2,1em)}@media (max-width:599px){.wp-block-coblocks-row__inner.is-stacked-on-mobile{flex-direction:column}.wp-block-coblocks-row__inner.is-stacked-on-mobile>.wp-block-coblocks-column{margin-left:0 !important;margin-right:0 !important;max-width:100% !important;width:100% !important}.wp-block-coblocks-row__inner.is-stacked-on-mobile>.wp-block-coblocks-column:last-child{margin-bottom:0}}.wp-block-coblocks-row__inner .wp-block-coblocks-column .wp-block-coblocks-column__inner{flex:1}.alignleft{float:left;margin:0 1.618em 1em 0}.alignright{float:right;margin:0 0 1em 1.618em}</style>

Guarda los cambios en el archivo y ya has creado el CSS crítico y lo has insertado para que se cargue sin bloquear el renderizado.

Otro modo de insertar el CSS crítico en la cabecera, si lo prefieres, es con la ayuda de plugins.

El primer paso sería igual que antes, generando el CSS crítico, pero en este caso, en vez de añadirlo manualmente a nuestra cabecera, nos valdremos del plugin Autoptimize.

Una vez instalado y activo ve a sus ajustes y activa en las opciones de CSS el ajuste de «Optimizar el código CSS» para que se activen el resto de sub-opciones, de las que tienes que activar obligatoriamente la llamada «¿Incrustar y aplazar CSS?».

En la caja vacía que se mostrará al activar esta última opción es dónde debes pegar el CSS crítico generado previamente.

Guarda los cambios y ya está. Si vuelves a comprobar la página ya no habrá CSS que bloquea el renderizado, pero puede haber JavaScript, aunque eso ya vimos como solucionarlo.

La principal ventaja de este método manual es que es gratis, pero los inconvenientes son que no distingue entre dispositivos ni páginas. Vale perfectamente si se carga el mismo CSS en todas tus páginas.

Generar el CSS crítico automáticamente

Ahora bien, si prefieres que la generación e incrustado de CSS crítico se haga de manera automática te propongo 2 modos de hacerlo.

Uno es contratando el servicio de la API de CriticalCSS que se promueve desde el mismo plugin Autoptimize, por unos 2 euros al mes.

El otro método sería usar WP Rocket.

Este fantástico plugin de optimización y caché para WordPress te permite generar el CSS crítico por separado para la portada, entradas, páginas de archivos y blog, páginas de producto, etc, y de paso lo incrusta integrado (inline) automáticamente.

Además, reconstruye el CSS crítico si  hay algún cambio en  el tema o haces alguna personalización.

Para conseguirlo solo tienes que ir a la sección de optimizar archivos (CSS y JS) y activar la opción de optimizar la entrega de CSS y guarda los cambios.

Cuando activas esta casilla se genera la ruta de CSS crítico para toda tu web en segundo plano, y se añadirá inline en la siguiente carga de la página. Después de eso, el CSS restante se cargará de forma asincrónica (es decir, sin bloquear el renderizado).

La herramienta externa de WP Rocket analiza la primera entrada de cada tipo de contenido (entradas, páginas, productos, etc.), así como las páginas de archivo de taxonomías (categorías, etiquetas, categorías de productos, etc.) y extraerá el CSS crítico de cada uno de esos tipos de contenido por separado y enviará el código a WP Rocket, que luego lo añadirá a las páginas respectivas según lo solicite un visitante, o el precargador de caché de WP Rocket.

El CSS crítico se eliminará cuando se cargue la página. Esto debería ayudar a evitar problemas de diseño cuando un sitio inyecta JavaScript o actualiza las clases CSS después de que se haya aplicado el CSS crítico.

El CSS se almacena en la siguiente carpeta de tu servidor: /wp-content/cache/critic-css/

Las rutas relativas en imágenes y fuentes se cambiarán automáticamente a URL absolutas. El CSS crítico se recortará y reducirá con todas las precauciones necesarias. Esto significa que se conservarán los espacios requeridos (como el interior de las operaciones  calc()) o las barras invertidas (como en  '\f311' en una fuente de icono).

Pero no solo esto, además, en el editor de WordPress encontrarás una caja de WP Rocket en la que puedes revertir el CSS crítico generado o incluso crear un CSS crítico específico para esa página, archivo o lo que sea.

Como ves, WP Rocket ofrece una solución completa para generar e incrustar el CSS crítico, de manera personalizada.

¿Cómo compruebo si se ha generado el CSS crítico?

Si has usado el método de WP Rocket puedes comprobarlo fácilmente.

1. En el código fuente de la página busca:
   • • La etiqueta de estilo rocket-critical-css.
     • En cada enlace a una hoja de estilo se añadirán los atributos:
       • rel='preload'
       • as="style" onload="this.onload=null;this.rel='stylesheet'"
       • data-rocket-async="style"
2. En la herramienta PageSpeed, los archivos CSS ya no se mostrará que bloquean el renderizado.

¿Por qué WordPress no genera el CSS crítico?

Bien visto 😉

Ya habrás visto que para generar el CSS crítico hay que usar servicios externos, pero incluso así WordPress podría generarlo, igual que hacen Autoptimize o WP Rocket ¿no?

El problema es que la generación de CSS crítico es posible gracias a proyectos de código abierto, como Critical de Google, CriticalCSS o Penthouse, y todos estos proyectos están basados en NodeJS, no en PHP.

Así que, para que WordPress pudiese generar el CSS crítico mediante estos servicios tendrías que tener instalado NodeJS en tu servidor, algo que no suele estar disponible en muchos alojamientos compartidos, que son los que tienen mayoritariamente los usuarios de WordPress.

Resumiendo ¿cómo genero el CSS crítico?

En mi opinión y experiencia el mejor método es hacerlo con WP Rocket, pues no solo genera automáticamente el CSS crítico global sino que también te permite generarlo en cada página o tipo de contenido.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!