Las personas que visitan tu sitio web no quieren esperar mucho para ver tu contenido. Si no optimizas el código, los recursos que bloquean el renderizado, como el CSS, pueden hacer que los visitantes perciban que los tiempos de carga son más lentos.
Por suerte, puedes generar fácilmente CSS crítico para tu sitio web. Si instalas un plugin como Jetpack Boost, podrás extraer todo el CSS necesario para mostrar el contenido de la parte visible. Esto puede ser fundamental para que tu sitio web parezca más rápido y fácil de usar.
En esta guía, explicaremos qué es el CSS crítico y por qué deberías plantearte generarlo para tu sitio web. Después, te mostraremos dos formas diferentes de hacerlo en WordPress.
¿Qué es el CSS crítico en WordPress?
Cuando un visitante hace clic en un enlace a tu sitio web, su navegador tiene que procesar una serie de tareas para renderizar completamente el contenido. Todos los pasos necesarios para descargar, procesar y convertir el código en píxeles conforman la ruta crítica de renderizado.
Durante este proceso de carga, el navegador lee de arriba abajo el código HTML, CSS y JavaScript del sitio. Como no sabe automáticamente qué recursos son más importantes para renderizar la página, podría quedarse procesando código innecesario.
Si un archivo CSS concreto impide que tu sitio web se renderice, se convierte en un recurso que bloquea el renderizado. Aunque no sea necesario para mostrar la página, los visitantes no verán el contenido hasta que se procese por completo este CSS que bloquea el renderizado.
El CSS crítico hace referencia al código CSS necesario para mostrar el contenido web de la parte visible. En esencia, es el código mínimo que necesita el navegador para mostrar a los visitantes la primera sección del contenido.
Ventajas de generar CSS crítico
Generar CSS crítico para tus páginas web implica eliminar cualquier CSS que bloquee el renderizado y permitir que el navegador procese únicamente lo necesario.
1. Optimiza la entrega de contenido
Cuando optimizas la entrega de CSS para tu sitio web de WordPress, mejoras el proceso de renderizado. Para quienes visitan la parte pública del sitio, incluso puede parecer que tus páginas se cargan más rápido.
Cuando alguien llega a tu sitio web, lo primero que verá es el contenido de la parte visible. Es todo lo que se muestra en la página sin necesidad de desplazarse.
Al extraer CSS crítico, optimizas los archivos CSS necesarios para mostrar esta sección inicial. Sin ello, los usuarios podrían ver elementos parciales que no se han renderizado por completo.
Una idea equivocada muy común es que el CSS crítico reduce el tiempo de carga. Aunque esto no es cierto, esta técnica de optimización puede mejorar el rendimiento percibido.
En esencia, los usuarios pensarán que tus páginas se cargan más rápido porque el navegador puede mostrar los elementos de la parte visible de forma más eficiente.
Al generar el CSS crítico de WordPress, los visitantes disfrutarán de una mejor experiencia de usuario (UX) en tu sitio. Como resultado, puedes reducir las tasas de rebote y fomentar que vuelvan a visitarlo.
2. Mejora Core Web Vitals
Aunque el CSS crítico de WordPress no aumenta ni reduce el tiempo de carga de la página, puede mejorar tus Core Web Vitals. Estas métricas analizan la experiencia de usuario de un sitio web.
Estos son los Core Web Vitals:
- Renderizado del mayor elemento con contenido (LCP): El rendimiento de carga de un sitio web
- First Input Delay (FID), o retraso de la primera interacción: La interactividad de un sitio web
- Cumulative Layout Shift (CLS): La estabilidad visual de un sitio web
Después de analizar tu sitio web para obtener un informe de Core Web Vitals, es posible que veas métricas adicionales, como First Contentful Paint (FCP) o Tiempo hasta el primer byte (TTFB). Estas afectan a LCP y desempeñan un papel importante en el proceso de carga.
El CSS crítico afecta directamente al FCP. Dicho de forma sencilla, el FCP mide el tiempo que se tarda en renderizar el primer elemento de una página web después de que comienza a cargarse. Si tu sitio obtiene una puntuación baja en el FCP, los visitantes suelen ver una página en blanco durante un tiempo.
Como propietario de un sitio web de WordPress, deberías intentar que el FCP esté por debajo de 1,8 segundos, pero muchos elementos pueden afectar negativamente a esta puntuación, entre ellos:
- JavaScript y CSS que bloquean el renderizado
- Un servidor lento
- Archivos de fuentes demasiado pesados
- Un tamaño grande del modelo de objetos del documento (DOM)
Como el CSS que bloquea el renderizado contribuye al FCP, generar CSS crítico puede mejorar esta puntuación. Durante este proceso, insertarás todo el CSS necesario para renderizar el contenido de la parte visible.
Cómo comprobar si CSS bloquea el renderizado en tu sitio web
Antes de generar el CSS crítico de WordPress, tendrás que saber si es necesario para tu sitio web. Como los archivos CSS de gran tamaño se consideran recursos que bloquean el renderizado, puedes analizarlos con una herramienta de optimización de velocidad.
Para empezar, introduce la URL de tu sitio web en PageSpeed Insights. Este software de Google analizará el rendimiento de tu sitio mediante varias auditorías de velocidad.
En la parte superior de la página, verás la evaluación de tus Core Web Vitals. Incluye métricas de Largest Contentful Paint, First Input Delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint y Tiempo hasta el primer byte.
Como has visto antes, el CSS que bloquea el renderizado está estrechamente relacionado con la puntuación de FCP. Asegúrate de que los resultados de la evaluación, tanto en móviles como en ordenadores, sean de 1,8 segundos o menos.
Si obtienes una puntuación baja, es posible que tengas archivos CSS demasiado pesados y sin optimizar en tu sitio web. Para comprobar si es así, desplázate hasta Oportunidades. Esta sección ofrece sugerencias específicas para mejorar el tiempo de carga de tu sitio web.
Aquí puedes ver una alerta que te indica que debes Eliminar los recursos que bloquean el renderizado. Aunque este mensaje podría referirse a un archivo JavaScript, también puede indicar que necesitas generar CSS crítico.
Cómo generar CSS crítico en WordPress
Ahora que entiendes mejor el CSS crítico de WordPress y por qué es importante, ¡es hora de generarlo! Independientemente de tu nivel de conocimientos, puedes aprender fácilmente a optimizar la entrega de CSS en WordPress siguiendo nuestro tutorial para principiantes.
Método 1: generar CSS crítico con un plugin
Aunque podrías generarlo tú mismo, optimizar la entrega de CSS con un plugin de WordPress suele ser más fácil. La herramienta adecuada puede aplazar automáticamente el CSS menos importante. Además, no tendrás que editar ningún código manualmente.
Jetpack Boost puede mejorar rápidamente el rendimiento de carga de tu sitio. Tras un sencillo proceso de configuración, puedes usar este plugin para generar CSS crítico, aplazar el JavaScript no esencial y mucho más.
Para empezar a usar Jetpack Boost, instálalo y actívalo en WordPress. Después, recibirás una puntuación basada en el rendimiento actual de tu sitio.
Con el plugin gratuito, verás una opción para Optimizar la carga de CSS. Como alternativa, puedes pasarte a una suscripción de pago para generar automáticamente el CSS crítico. Esto te ayudará a evitar tener que volver a generar el CSS cada vez que hagas un cambio.
Para activar el CSS crítico, solo tienes que usar el interruptor de la izquierda. Del mismo modo, puedes aplazar el JavaScript no esencial y activar la carga diferida de imágenes. En conjunto, estos ajustes pueden reducir considerablemente el tiempo de carga de la página y permitir que los visitantes vean tu contenido antes.
Método 2: generar manualmente CSS crítico
Si no quieres usar un plugin, también puedes generar manualmente CSS crítico. Es importante recordar que este método implica editar el código de tu sitio, por lo que puede ser un proceso más complicado para principiantes.
Paso 1: hacer una copia de seguridad de tu sitio web
Para empezar, crea una copia de seguridad de tu sitio de WordPress. Si cometes un error en los archivos de tu sitio, podrás volver fácilmente a esta versión guardada. Así no perderás ningún dato importante.
Si necesitas gestionar fácilmente tus copias de seguridad, puedes instalar el plugin Jetpack VaultPress Backup. Esta herramienta almacena las copias de seguridad fuera del sitio y permite restaurarlas con un solo clic, incluso si tu sitio está completamente caído.
Esta es la forma de empezar:
Ve a Plugins → Añadir nuevo en el panel de WordPress. Busca «Jetpack VaultPress Backup» y haz clic en Instalar ahora → Activar.
A continuación, verás una nueva ventana que te permitirá configurar el plugin. Haz clic en Configurar Jetpack.
A continuación, conecta tu sitio con tu cuenta de WordPress.com. Cuando se te redirija de nuevo a tu sitio, haz clic en Actualizar ahora para consultar varias opciones de planes de Jetpack VaultPress Backup.
Como mínimo, necesitarás el plan Backup, pero los planes Security y Complete ofrecen herramientas adicionales para proteger, hacer crecer y acelerar tu sitio.
Tu primera copia de seguridad se iniciará automáticamente y podrás comprobar su progreso al ir a Jetpack → Copia de seguridad en el panel de WordPress.
Si cometes algún error durante los siguientes pasos, vuelve a esta página y haz clic en Restaurar hasta este punto. Esto devolverá tu sitio a la versión anterior y eliminará los errores que se hayan producido.
Paso 2: usar un generador de CSS crítico
Cuando sepas que tu sitio tiene una copia de seguridad, puedes empezar a generar tu CSS crítico. Una de las formas más sencillas de hacerlo es mediante un generador de CSS crítico. Esta herramienta producirá automáticamente tu CSS crítico, por lo que no tendrás que crear el código manualmente.
Primero, abre el Generador de CSS crítico de CoreWebVitals. Introduce la URL de tu sitio web o de una página concreta que quieras optimizar. Después, haz clic en Generar CSS crítico.
Cuando termine de cargarse, verás el código CSS generado en el cuadro de texto. Copia este código.
Cuando guardes este código, ¡podrás insertarlo directamente en tu sitio web!
Paso 3: insertar CSS crítico
Cuando alguien visita tu sitio web, su navegador recupera los archivos de tu sitio desde el servidor. Primero, comprueba la sección <head> para buscar el contenido necesario durante el proceso de análisis. Después, continúa renderizando el contenido de <body>.
Para dar prioridad al CSS crítico, colócalo en la sección <head> de tus archivos. Esto se denomina inserción directa. Cuando insertas directamente el CSS, el navegador solicita que esta hoja de estilos se recupere antes de renderizar el resto de la página.
En esencia, insertar directamente el CSS coloca el código donde debe utilizarse. Así, el navegador del visitante no tendrá que analizar archivos que bloquean el renderizado antes de mostrar el contenido de destino.
Una vez que hayas copiado el CSS crítico generado, puedes insertarlo en línea en tus archivos. Navega hasta tu carpeta public_html mediante FTP. Después, ve a wp-content → temas → tu tema activo y abre el archivo header.php.
En este archivo de cabecera, localiza la etiqueta <title>. Debajo de ella, añade el CSS crítico usando etiquetas <style>. Por último, selecciona Actualizar archivo.
Cómo comprobar que tu CSS crítico funciona correctamente
Después de generar e insertar directamente el CSS crítico, tienes tres métodos para comprobar que funciona:
- Volver a probar con Google PageSpeed Insights. Vuelve a ejecutar tu URL y comprueba si la oportunidad «Eliminar recursos que bloquean la renderización» ha desaparecido o ha reducido su impacto. Comprueba también tu puntuación de FCP; intenta que sea inferior a 2 segundos en dispositivos móviles.
- Pestaña Cobertura de las herramientas para desarrolladores de Chrome. Abre el menú de DevTools → three puntos de Chrome → Más herramientas → Cobertura. Recarga la página y comprueba qué porcentaje de tu CSS se está utilizando al cargarla por primera vez. Un porcentaje elevado de «bytes sin utilizar» en la carga inicial sugiere que la extracción de tu CSS crítico estaba incompleta.
- Ver código fuente. Haz clic derecho en tu página y selecciona «Ver código fuente». Busca
Preguntas frecuentes
Hasta ahora, hemos hablado del CSS crítico y de cómo generarlo. Si aún tienes preguntas sobre cómo insertar directamente el CSS en tu sitio web, ¡las responderemos aquí!
¿Generar CSS crítico puede alterar el aspecto de tu sitio?
Si no se hace correctamente, generar CSS crítico puede afectar negativamente al aspecto y al diseño de tu sitio. Por suerte, puedes revertir cualquier cambio simplemente restaurando una copia de seguridad guardada de tu sitio de WordPress. Con Jetpack VaultPress Backup, puedes consultar un registro de actividad y restaurar versiones anteriores de tu sitio con un solo clic.
Además, puedes usar un plugin como Jetpack Boost para activar y desactivar el CSS crítico cuando sea necesario. Estos ajustes sencillos se han creado según las prácticas recomendadas de WordPress, por lo que es menos probable que afecten a la parte pública de tu sitio.
¿Qué más puedo hacer para optimizar mi código CSS?
Si quieres optimizar aún más el CSS de tu sitio, plantéate minificarlo. Durante la minificación del CSS, eliminarás el código innecesario para reducir el tamaño de los archivos CSS.
Es probable que tu código CSS tenga espacios y saltos de línea para que sea más fácil de leer. Como un navegador puede procesar el código sin estos elementos adicionales, puedes eliminarlos. Esto reduce los recursos y el tiempo necesarios para ejecutar los archivos.
También puedes eliminar por completo el CSS que no utilices. Al reducir tus archivos al código estrictamente necesario, tu sitio web empezará a cargarse más rápido.
¿Qué más puedo hacer para mejorar la velocidad de carga de mis páginas?
Una de las mejores formas de acelerar tu sitio es mejorar tus Core Web Vitals. Con una herramienta como PageSpeed Insights, puedes identificar elementos no optimizados, como los recursos que bloquean el renderizado.
Como los navegadores cargan el código de tu sitio de arriba abajo, el proceso de carga puede interrumpirse fácilmente debido a JavaScript. Al posponer el análisis de JavaScript, los visitantes no tendrán que esperar a que se carguen los scripts antes de ver tu contenido.
Además, plantéate activar la carga diferida de imágenes. Con este ajuste de Jetpack Boost, las imágenes que aparecen por debajo de la parte visible no se cargarán hasta que los visitantes se desplacen hacia abajo. Esto puede evitar que tu sitio web cargue todas las imágenes a la vez y retrase el proceso de renderizado.
Por último, una red de distribución de contenido (CDN) puede acelerar significativamente tu sitio web. En lugar de depender de un solo servidor, la CDN utiliza un sistema de centros de datos distribuidos por todo el mundo. Una opción como la CDN de Jetpack puede mejorar la distribución de contenido para imágenes y archivos estáticos.
¿Cada cuánto debería volver a generar el CSS crítico?
Vuelve a generarlo cada vez que cambies el tema, actualices un plugin que afecte al diseño o hagas cambios importantes en el diseño de la parte visible. El plan de pago de Jetpack Boost lo hace automáticamente, una de sus ventajas más prácticas frente al método manual.
¿El CSS crítico funciona con Elementor u otros constructores de páginas?
Sí, pero los constructores de páginas generan un CSS más complejo que los temas programados manualmente, lo que puede hacer que la extracción del CSS crítico sea incompleta. Jetpack Boost es compatible con los principales constructores de páginas. Si lo generas manualmente, ejecuta el generador por separado en varias plantillas de página (página de inicio, entrada, producto y archivo), ya que cada una puede tener un CSS específico para la parte visible.
¿Cuál es la diferencia entre el CSS crítico y el CSS diferido?
Son dos aspectos de la misma optimización. El CSS crítico es el que insertas en línea: los estilos mínimos necesarios para renderizar el contenido visible. El CSS diferido hace referencia al resto de la hoja de estilos, que cargas de forma asíncrona después del renderizado inicial mediante rel=”preload” o JavaScript. Ambos funcionan conjuntamente: insertar en línea el CSS crítico y diferir el resto es la estrategia de optimización completa.
Optimiza la entrega de CSS en WordPress
Si intentas mejorar la entrega del contenido de tu sitio web, es importante eliminar todos los recursos que bloqueen el renderizado. Como un CSS sin optimizar puede retrasar el proceso de renderizado, merece la pena generar CSS crítico. Aunque hacerlo no mejorará directamente el tiempo de carga, permitirá que los visitantes vean mucho más rápido el contenido de la parte visible.
A modo de repaso, estos son los pasos para generar CSS crítico en WordPress:
- Genera CSS crítico con un plugin como Jetpack Boost.
- Utiliza un Generador de CSS crítico.
Con Jetpack Boost, puedes optimizar CSS sin editar código. ¡Después de descargar y activar el plugin, podrás generar CSS crítico con un solo clic!
Jetpack 