Iniciar sesión Empezar

Solución de problemas de Critical CSS en Jetpack Boost

Si aparece un error que indica que Critical CSS no se está generando como debería, es fundamental identificar el problema concreto a partir del mensaje de error recibido.

Para comprobar si Critical CSS funciona, puedes ver el código fuente de tu página y buscar esta línea:

<style id="jetpack-boost-critical-css">

Para ver el código fuente de la página, haz clic con el botón derecho en cualquier parte de tu sitio y selecciona Ver código fuente de la página (o pulsa Ctrl+U / Cmd+U en el teclado).

Si ves esa línea, Jetpack Boost ha añadido correctamente Critical CSS a tu sitio. Si no aparece o algo no parece correcto, consulta la página de solución de problemas.

Error de redirección

Este error se produce cuando Jetpack Boost se dirige a una nueva URL durante la generación de Critical CSS. Puede deberse a lo siguiente:

  • Plugins del modo de mantenimiento que redirigen a una página «Próximamente».
  • Plugins de gestión del consentimiento que redirigen a una página de consentimiento.
  • Los plugins que reescriben URL eliminan los argumentos GET, lo que da lugar a URL incorrectas.

Posibles soluciones:

  1. Asegúrate de que las URL están configuradas correctamente y de que no hay redirecciones no deseadas.
  2. Desactiva temporalmente los plugins del modo de mantenimiento para comprobar si el problema se resuelve.
  3. Configura los plugins de gestión del consentimiento para permitir que Jetpack Boost acceda a las páginas necesarias.
  4. Ajusta la configuración de los plugins que reescriben URL para evitar que modifiquen las URL de destino.
  5. Si la redirección se debe a redirecciones HTTP 301/302 estándar, puede que tengas que aceptar que no se puede generar Critical CSS para esas páginas.

Errores HTTP

Al generar Critical CSS, Jetpack Boost puede encontrarse con diversos errores HTTP. Cada error indica un problema concreto que debe solucionarse. A continuación se muestran los errores HTTP más habituales que puedes encontrar, junto con sus causas y posibles soluciones para ayudarte a resolverlos de forma eficaz.

Error HTTP 401, 403

Este error indica un problema de permisos en tu sitio de WordPress.

Posibles soluciones para los errores HTTP 401/403:

  1. Comprueba la configuración de WordPress o ponte en contacto con tu proveedor de hosting para preguntarle por qué la URL no está disponible.
  2. Asegúrate de que la página no sea privada y de que se pueda acceder a ella. Para ello, abre el enlace en «Modo incógnito» o «Navegación privada» y comprueba que se carga correctamente cuando no has iniciado sesión.

Error HTTP 404

Este error indica que la URL solicitada no existe.

Posibles soluciones para el error HTTP 404:

  1. Confirma que la página se carga correctamente.
  2. Si la página muestra un error, asegúrate de que forma parte de tu sitio de WordPress y está publicada.
  3. Prueba a visitar el enlace mediante el «Modo incógnito» o la «Navegación privada» para comprobar si el error aparece cuando no has iniciado sesión.
  4. Si ves un error únicamente cuando no has iniciado sesión (es decir, en el «Modo incógnito»), busca plugins que puedan estar imponiendo permisos de acceso a tus páginas, como los que permiten que solo los usuarios autenticados vean determinadas áreas.

Error HTTP 418 – Soy una tetera

Normalmente se utiliza para indicar que una solicitud ha sido rechazada debido a las reglas de seguridad.

Posibles soluciones para el error HTTP 418:

  1. Ponte en contacto con tu proveedor de hosting y proporciónale los detalles del problema, mencionando el error HTTP 418, las URL afectadas y la hora en que se produjo.
  2. Tu proveedor de hosting debería indicarte cuáles son los siguientes pasos.

Error HTTP 500 – Error interno del servidor

Esto indica un error del lado del servidor que impide completar la solicitud.

Posible solución para el error HTTP 500:

Ponte en contacto con tu proveedor de hosting y pídele que compruebe los registros del servidor para consultar los mensajes de error detallados.

Error entre dominios

Esto ocurre cuando la página está alojada en un dominio diferente y la configuración de seguridad del servidor impide acceder a ella o cargarla desde fuera de su propio dominio.

Posible solución para el error entre dominios: 

Visita la página y comprueba el protocolo y el nombre de host para asegurarte de que coinciden con los de la pantalla de administración de WordPress. Por ejemplo: En http://jetpack.com, el http es Protocolo, y jetpack.com es Nombre de host

No se ha podido verificar la página (UrlVerifyError)

Para que Critical CSS funcione correctamente, Boost intenta añadir una etiqueta meta al sitio durante la generación de Critical CSS para verificar la página. Si por algún motivo no consigue añadir la etiqueta meta, devuelve este error.

Posibles soluciones para el error «No se ha podido verificar la página»: 

  1. Las causas más habituales son plugins con el modo de mantenimiento activado y páginas protegidas mediante algún tipo de autenticación (como un formulario de inicio de sesión).
  2. Asegúrate de que sigues pudiendo acceder a la página cuando no has iniciado sesión.
  3. Si puedes acceder, pero sigues recibiendo este error, es posible que algún tipo de almacenamiento en caché impida que Boost añada la etiqueta de generación de meta.

Página visible solo para visitantes que han iniciado sesión

Jetpack Boost genera CSS crítico para un visitante que no ha iniciado sesión. Si una página solo está disponible para usuarios que han iniciado sesión o redirige a los visitantes a una pantalla de inicio de sesión, Boost no puede leer la página para generar CSS crítico.

Si la página es privada intencionadamente, puedes ignorar este mensaje sin problema.

Si la página debe ser accesible públicamente, comprueba si hay algún plugin o ajuste que obligue a los visitantes a iniciar sesión y vuelve a ejecutar la generación de CSS crítico.

No se ha podido generar Critical CSS

Este es un error general que puede aparecer por distintos motivos. Comprueba el mensaje de error concreto que se muestra en el escritorio de Boost o en los registros del sitio para identificar qué está fallando.

No se ha encontrado CSS relevante en las hojas de estilo externas

Boost depende de archivos CSS externos para generar Critical CSS. Si tu página no carga ninguno, Boost no puede extraer los estilos necesarios. Es posible que estés utilizando un plugin de optimización que inserta todo CSS en línea en lugar de cargarlo desde archivos externos.

Qué hacer: Puedes ignorar este mensaje sin problemas si el sitio ya utiliza CSS en línea para mejorar el rendimiento.

Problema de conexión o acceso

A veces, Boost no consigue acceder a tu sitio o se bloquea al cargar las páginas correctamente.

Posibles soluciones:

  • Asegúrate de que el sitio web no se carga mediante HTTP y HTTPS a la vez. Para solucionarlo, dirige todo el tráfico del sitio web a HTTPS. Tu proveedor de hosting puede ayudarte o puedes utilizar un plugin como Really Simple SSL.
  • Comprueba que no haya redirecciones desde la página de inicio, como de https://yourjetpack.blog a https://yourjetpack.blog/en. Tu proveedor de hosting puede ayudarte con las redirecciones no deseadas.
  • Confirma que el sitio está activo y se puede ver públicamente. Las páginas «Próximamente» y «En construcción» impedirán que Jetpack genere Critical CSS.
  • Si has confirmado todo lo anterior y sigues viendo un error, la causa podría ser un conflicto entre plugins. Los plugins en conflicto pueden interferir con la conexión de Jetpack o impedir que los estilos necesarios se carguen correctamente. Para comprobarlo, sigue la guía para comprobar si hay conflictos entre plugins.

Posibles conflictos con otros plugins de rendimiento

Pueden producirse conflictos cuando otro plugin de rendimiento o de caché, como LiteSpeed Cache — modifica la forma en que se carga u optimiza CSS. Estos cambios pueden interferir con la generación de CSS crítico de Jetpack Boost y provocar problemas de diseño, especialmente después de actualizar el plugin o el tema.

Posibles soluciones:

  • Ve a Jetpack → Boost en el panel de administración de WordPress, despliega la Carga de la página y desactiva el interruptor de optimización de CSS crítico. Si el diseño vuelve a la normalidad, es posible que el problema se deba a un conflicto con las optimizaciones de CSS realizadas por otro plugin.
  • Si usas LiteSpeed Cache, ve a Configuración de LiteSpeed Cache → Optimización de página → CSS, y desactiva la Carga asíncrona de CSS.
  • Como alternativa, considera mantener desactivada la optimización de Jetpack Boost de CSS y utilizar en su lugar las funciones de optimización de tu plugin de caché, o viceversa.
  • También puedes intentar excluir determinadas hojas de estilo o clases de la optimización en el otro plugin, si este lo permite.

Si no sabes qué plugin causa el problema, desactívalos uno a uno y vuelve a comprobar el diseño cada vez.

Error de tiempo de espera de carga

Esto puede ocurrir debido a un bucle de redirecciones causado por una configuración incorrecta del servidor o por el comportamiento inadecuado de algún plugin (o código personalizado). También hemos visto casos en los que los anuncios tardan demasiado en cargarse y Boost agota el tiempo de espera mientras los espera.

Posibles soluciones para el error de tiempo de espera de carga:

  1. Borra la caché del navegador para asegurarte de que Boost carga la versión más reciente de la página.
  2. Visita la página sin haber iniciado sesión en WordPress para comprobar si el problema persiste.
  3. Comprueba cuánto tarda en cargarse esta página en comparación con otras páginas de tu sitio.
  4. Si esta página es más lenta que las demás, identifica qué plugins están activos en ella.
  5. Desactiva los plugins que creas que hacen que la página se cargue lentamente.

Error XFrameDeny

Jetpack Boost utiliza iframes para generar tu CSS crítico. Este error se produce cuando el sitio tiene un encabezado de configuración especial que impide que se cargue dentro de un iframe. El encabezado se llama X-Frame-Options: DENY. Esto puede añadirse a un sitio de WordPress mediante un plugin o mediante la configuración del servidor.

Posibles soluciones para el error XFrameDeny:

  1. Asegúrate de no utilizar plugins que añadan encabezados HTTP adicionales a tu sitio de WordPress y, si los utilizas, desactívalos.
  2. Si no sabes cuáles son estos encabezados o de dónde proceden, ponte en contacto con tu proveedor de hosting y pídele que elimine el encabezado X-Frame-Options del sitio.

Error InvalidURL

Jetpack Boost ha encontrado una o más URL no válidas al intentar generar Critical CSS. Ten en cuenta que a veces no pasa nada por ignorar esas URL. Esto puede ocurrir por muchos motivos, así que es difícil ofrecer una solución que funcione siempre.

Posibles soluciones para el error InvalidURL:

  1. Asegúrate de que las reescrituras personalizadas de tu sitio web funcionan correctamente.
  2. Es posible que haya un plugin activo que esté haciendo que una o más URL no sean válidas. Revisa la lista de plugins y desactiva los que puedan causar el problema hasta resolverlo.

Error del proveedor

Esto ocurre cuando algo impide que Jetpack Boost guarde el CSS crítico que ha generado para un grupo concreto de páginas. Lo más habitual es que un firewall de aplicaciones web (WAF) o un plugin de seguridad bloquee la solicitud.

Posibles soluciones para el error del proveedor:

  1. Comprueba si tienes plugins de seguridad y desactívalos. Después, comprueba si la generación funciona ejecutándola de nuevo. Si funciona, intenta añadir una regla de exclusión en el plugin de seguridad para las URL que contengan set-provider-css.
  2. Si no tienes instalados plugins de seguridad, es posible que el WAF de tu proveedor de hosting esté bloqueando la solicitud. Puedes comprobarlo ejecutando este comando curl en un terminal o en el símbolo del sistema (asegúrate de sustituir https://yourjetpack.blog/ por la URL de tu sitio web):
    curl --location 'https://yourjetpack.blog/' \ --data '<svg xmlns'
  3. Si el comando anterior muestra Forbidden, tendrás que ponerte en contacto con tu proveedor de hosting y pedirle que desbloquee la solicitud.

Biblioteca de generación dañada

Es poco probable que ocurra, pero tenemos una solución por si sucede. Si la biblioteca de generación de CSS crítico de Boost se corrompe de algún modo o interfiere algún otro plugin, aparecerá este error.

Posibles soluciones para el error de biblioteca de generación dañada:

  1. Desactiva y vuelve a activar el módulo para comprobar si el error persiste.
  2. Si persiste, reinstala Jetpack Boost para asegurarte de que todos sus archivos están en buen estado.
  3. Si reinstalarlo no ayuda, es posible que otro plugin esté causando un conflicto. En ese caso, desactiva los plugins uno a uno hasta resolver el problema.

Se esperaba una matriz asociativa, pero se recibió «NULL»

Este error puede aparecer cuando Boost no consigue generar Critical CSS debido a un problema del servidor durante la solicitud.

Posible solución para el error «NULL»:

  • Esto puede deberse a una configuración incorrecta o a un problema con el Memory Node.
  • Ponte en contacto con tu proveedor de hosting y pídele que compruebe si Memory Node funciona correctamente.
  • Si has instalado o actualizado plugins recientemente, o si Boost funcionaba correctamente antes, la causa podría ser un problema temporal del servidor.
  • Si utilizas Cloudflare, prueba a desactivarlo temporalmente para comprobar si así se resuelve el error.

Cuando se resuelva el problema del servidor, deberías poder volver a generar Critical CSS correctamente.

Error PayloadTooLargeError

Este error aparece cuando el CSS crítico generado supera 1 MB. A menudo ocurre en páginas creadas con plugins de construcción de páginas.

Si Jetpack Boost incluyera el CSS crítico, la página pesaría más y, de hecho, se cargaría más lentamente. Por eso se excluye intencionadamente. Ni siquiera se guarda en tu sitio web.

Posibles soluciones para PayloadTooLargeError:

  1. Comprueba si puedes actualizar tus páginas para que compartan los mismos bloques.

Al hacer que las páginas compartan el mismo diseño, te aseguras de que el CSS crítico generado sea más pequeño.

Si no es posible compartir los mismos bloques y el diseño de las páginas es demasiado específico, no podrás aprovechar la función de CSS crítico en las páginas de ese grupo.

Error desconocido

Esto ocurre cuando se produce un error inesperado al intentar generar CSS crítico para la página especificada. Jetpack Boost no había previsto este problema.

Posibles soluciones para el error desconocido:

  1. Abre la URL para comprobar que la página se carga correctamente.
  2. Asegúrate de que la página se carga sin errores ni problemas.
  3. Si la página se carga correctamente pero el CSS crítico sigue fallando, ponte en contacto con nosotros para que podamos investigar más a fondo.

Al identificar el problema concreto a partir del mensaje de error y aplicar estas soluciones, puedes resolver problemas habituales de Jetpack Boost relacionados con su función de CSS crítico, lo que garantiza que tu sitio se cargue de forma eficiente y ofrezca una experiencia de usuario óptima.

Still need help?

Please contact support. We’re happy to advise.