Acelera la carga de CSS con Jetpack Boost

Jetpack Boost ayuda a que tu sitio cargue más rápido al optimizar la forma en que se entrega CSS. La función crítica de CSS coloca la información de estilo más importante al principio de tus páginas para que el contenido se muestre antes, especialmente en dispositivos móviles. Esto mejora la experiencia de tus visitantes y la puntuación de velocidad de tu sitio.

Según tu plan, esta función está disponible en dos versiones: generación manual (plan gratuito) y generación automática (plan de pago).

¿Qué es Critical CSS?MD

El CSS crítico hace referencia a los estilos esenciales necesarios para mostrar la parte visible de una página. Jetpack Boost extrae este CSS y lo inserta directamente en el código de tu página <head> para reducir los retrasos al cargar los elementos visuales principales.

Para admitir diseños de escritorio y móvil, Boost analiza tu sitio con varios anchos de pantalla y genera un único conjunto de Critical CSS que funciona en todos los dispositivos.

Generar Critical CSS manualmenteMD

Con la versión gratuita de Jetpack Boost, generas Critical CSS manualmente. Vuelve a generarlo después de realizar cambios que afecten a la estructura HTML o CSS de tu sitio.

Cómo activar y generar Critical CSSMD

1. Ve a Jetpack → Boost en el panel de administración de WordPress.
2. Despliega la sección «Carga de páginas».
3. Activa el interruptor «Optimizar la carga de Critical CSS (manual)».
4. Haz clic en el botón Generar.

Permanece en el escritorio de Boost mientras se genera Critical CSS. Si sales de la página, el proceso se pausará.

Cuándo volver a generar Critical CSSMD

Vuelve a generar Critical CSS después de:

• Cambiar o actualizar tu tema
• Añadir o editar entradas y páginas con nuevos diseños o bloques
• Instalar o actualizar plugins relacionados con el diseño
• Actualizar el núcleo de WordPress

Un plan de pago de Jetpack Boost te permite automatizar la generación de Critical CSS.

Generar Critical CSS automáticamenteMD

La generación automática de CSS crítico está disponible con el plan de pago de Jetpack Boost o con Jetpack Complete.

Para generar Critical CSS automáticamente:

1. Ve a Jetpack → Boost en el panel de administración de WordPress.
2. Despliega la sección «Carga de páginas».
3. Activa el interruptor «Optimizar la carga de Critical CSS (automática)».

Una vez activada, Boost genera automáticamente Critical CSS cuando realizas cambios en tu sitio.

Ventajas de generar Critical CSS automáticamenteMD

• Mantiene Critical CSS actualizado automáticamente después de realizar cambios en el sitio.
• Reduce la necesidad de volver a generar Critical CSS manualmente.
• Utiliza la generación en el servidor para ofrecer resultados más uniformes.
• Ayuda a evitar que Critical CSS quede obsoleto después de realizar cambios en el diseño o la maquetación.
• Proporciona acceso a asistencia directa si algo sale mal.

Mensajes de estadoMD

Jetpack Boost muestra mensajes de estado debajo de Critical CSS para informarte de si la generación se ha completado correctamente o requiere tu atención.

• La generación automática está activada. En los planes de pago, Boost indica que generará automáticamente Critical CSS cada vez que realices cambios.
• Critical CSS se ha generado correctamente. Boost muestra cuántos archivos se han generado y cuándo se actualizaron por última vez.
• No se han podido generar algunos archivos. Boost enlaza a recomendaciones para las páginas afectadas.
• Una página solo está disponible para visitantes que han iniciado sesión. Boost no puede leer la página como visitante que ha cerrado sesión. Si la página es privada intencionadamente, puedes ignorar el mensaje. Si debería ser pública, comprueba el plugin o ajuste que requiere que los visitantes inicien sesión y vuelve a intentarlo.
• Se ha producido otro error de generación. Sigue las recomendaciones que se muestran en Boost o consulta la solución de problemas de CSS crítico en la guía.

Desactivar Critical CSS automático para desarrolladoresMD

Si tienes el plan de pago, pero prefieres la versión manual, puedes desactivar la función automática añadiendo este filtro a un plugin de uso obligatorio (mu-plugin):

add_filter( "jetpack_boost_has_feature_cloud-critical-css", '__return_false' );

Una vez desactivada, el interruptor manual «Optimizar la carga de Critical CSS (manual)» volverá a aparecer en tu escritorio.

Solución de problemasMD

Si Jetpack Boost no consigue generar Critical CSS o ves un mensaje que indica que hay problemas, sigue los pasos de nuestra guía completa:

Solución de problemas de Critical CSS en Jetpack Boost