Se connecter Commencer

Dépannage du CSS critique dans Jetpack Boost

Si vous rencontrez une erreur indiquant que le CSS critique n’est pas généré comme prévu, il est essentiel d’identifier le problème précis à partir du message d’erreur reçu.

Pour vérifier si le CSS critique fonctionne, vous pouvez afficher le code source de votre page et rechercher cette ligne :

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

Pour afficher le code source de la page, cliquez avec le bouton droit n’importe où sur votre site et sélectionnez Afficher le code source de la page (ou appuyez sur Ctrl+U / Cmd+U sur votre clavier).

Si vous voyez cette ligne, Jetpack Boost a bien ajouté le CSS critique à votre site. Si elle est absente ou si quelque chose ne semble pas correct, consultez la page de dépannage.

Erreur de redirection

Cette erreur se produit lorsque Jetpack Boost est redirigé vers une nouvelle URL lors de la génération du CSS critique. Elle peut être causée par :

  • Les extensions de mode maintenance qui redirigent vers une page « bientôt disponible ».
  • Les extensions de gestion du consentement qui redirigent vers une page de consentement.
  • Les extensions de réécriture d’URL qui suppriment les arguments GET, ce qui produit des URL incorrectes.

Solutions possibles :

  1. Vérifiez que les URL sont correctement définies et qu’aucune redirection involontaire n’est en place.
  2. Désactivez temporairement les extensions de mode maintenance pour vérifier si le problème est résolu.
  3. Configurez les extensions de gestion du consentement afin d’autoriser Jetpack Boost à accéder aux pages requises.
  4. Modifiez les réglages des extensions de réécriture d’URL pour empêcher la modification des URL cibles.
  5. Si la redirection est due à des redirections HTTP 301/302 standard, il peut être nécessaire d’accepter que le CSS critique ne puisse pas être généré pour ces pages.

Erreurs HTTP

Lors de la génération du CSS critique, Jetpack Boost peut rencontrer diverses erreurs HTTP. Chaque erreur indique un problème précis qui doit être résolu. Vous trouverez ci-dessous les erreurs HTTP courantes susceptibles de se produire, ainsi que leurs causes et les solutions possibles pour vous aider à les résoudre efficacement.

Erreur HTTP 401, 403

Cette erreur indique un problème d’autorisation sur votre site WordPress.

Solutions possibles pour les erreurs HTTP 401/403 :

  1. Vérifiez les réglages de votre site WordPress ou contactez votre hébergeur pour lui demander pourquoi l’URL est indisponible.
  2. Vérifiez que la page n’est pas privée et qu’elle est accessible. Pour cela, ouvrez le lien en « mode navigation privée » et assurez-vous qu’il se charge comme prévu lorsque vous n’êtes pas connecté.

Erreur HTTP 404

Cette erreur indique que l’URL demandée n’existe pas.

Solutions possibles pour l’erreur HTTP 404 :

  1. Vérifiez que la page se charge correctement.
  2. Si la page affiche une erreur, vérifiez qu’elle fait partie de votre site WordPress et qu’elle est publiée.
  3. Essayez d’ouvrir le lien en « mode navigation privée » pour vérifier si l’erreur se produit lorsque vous n’êtes pas connecté.
  4. Si vous voyez une erreur uniquement lorsque vous n’êtes pas connecté (c’est-à-dire en « mode navigation privée »), recherchez les extensions susceptibles d’imposer des restrictions d’accès à vos pages, notamment celles qui autorisent uniquement les utilisateurs authentifiés à consulter certaines zones.

Erreur HTTP 418 – Je suis une théière

Cette erreur sert généralement à indiquer qu’une requête a été refusée en raison de règles de sécurité.

Solutions possibles pour l’erreur HTTP 418 :

  1. Contactez votre hébergeur en lui fournissant les détails du problème, en mentionnant l’erreur HTTP 418, la ou les URL concernées et l’heure à laquelle elle s’est produite.
  2. Votre hébergeur devrait vous indiquer les prochaines étapes.

Erreur HTTP 500 – Erreur interne du serveur

Cela indique une erreur côté serveur qui empêche la requête d’aboutir.

Solution possible pour l’erreur HTTP 500 :

Contactez votre hébergeur et demandez-lui de vérifier les journaux de votre serveur afin d’obtenir des messages d’erreur détaillés.

Erreur inter-domaines

Cela se produit lorsque la page est hébergée sur un autre domaine et que les réglages de sécurité du serveur l’empêchent d’être consultée ou chargée depuis l’extérieur de son propre domaine.

Solution possible pour l’erreur inter-domaines : 

Accédez à la page et vérifiez le protocole et le nom d’hôte afin de vous assurer qu’ils correspondent à ceux de votre écran d’administration WordPress. Par exemple : dans http://jetpack.com, le http est Protocole, et jetpack.com est Nom d’hôte

Impossible de vérifier la page (UrlVerifyError)

Pour que le CSS critique fonctionne correctement, Boost tente d’ajouter une balise meta au site lors de la génération du CSS critique afin de vérifier la page. Si, pour une raison quelconque, l’ajout de la balise meta échoue, cette erreur est renvoyée.

Solutions possibles pour l’erreur « Impossible de vérifier la page » : 

  1. Les causes les plus fréquentes sont les extensions dont le mode maintenance est activé et les pages protégées par une forme d’authentification (comme un formulaire de connexion).
  2. Assurez-vous que vous pouvez toujours accéder à la page lorsque vous n’êtes pas connecté.
  3. Si vous y parvenez mais que cette erreur s’affiche toujours, une forme de mise en cache peut empêcher Boost d’ajouter la balise de génération des meta.

Page visible uniquement par les visiteurs connectés

Jetpack Boost génère du CSS critique lorsqu’un visiteur n’est pas connecté. Si une page est uniquement accessible aux utilisateurs connectés ou redirige les visiteurs vers une page de connexion, Boost ne peut pas lire la page pour générer du CSS critique.

Si la page est volontairement privée, vous pouvez ignorer ce message sans risque.

Si la page doit être accessible au public, vérifiez si une extension ou un réglage n’oblige les visiteurs à se connecter, puis relancez la génération du CSS critique.

Échec de la génération du CSS critique

Il s’agit d’une erreur générale qui peut apparaître pour différentes raisons. Consultez le message d’erreur précis affiché dans votre tableau de bord Boost ou dans les journaux de votre site afin d’identifier le problème.

Aucun CSS pertinent trouvé dans les feuilles de style externes

Boost s’appuie sur des fichiers CSS externes pour générer le CSS critique. Si votre page n’en charge aucun, Boost ne peut pas extraire les styles nécessaires. Vous utilisez peut-être une extension d’optimisation qui intègre tout le CSS au lieu de les charger depuis des fichiers externes.

À faire : Vous pouvez ignorer ce message sans risque si le site utilise déjà du CSS intégré pour améliorer ses performances.

Problème de connexion ou d’accès

Parfois, Boost ne parvient pas à accéder à votre site ou est empêché de charger correctement les pages.

Solutions possibles :

  • Assurez-vous que le site ne se charge pas à la fois en HTTP et en HTTPS. Pour résoudre ce problème, redirigez tout le trafic du site vers HTTPS. Votre hébergeur peut vous aider, ou vous pouvez utiliser une extension telle que Really Simple SSL.
  • Vérifiez qu’il n’y a aucune redirection depuis la page d’accueil, par exemple de https://yourjetpack.blog vers https://yourjetpack.blog/en. Votre hébergeur peut vous aider à résoudre les redirections indésirables.
  • Vérifiez que le site est en ligne et accessible au public. Les pages « bientôt disponible » et « en construction » empêcheront Jetpack de générer le CSS critique.
  • Si vous avez confirmé tout ce qui précède et que l’échec persiste, il est possible qu’un conflit entre extensions en soit la cause. Des extensions en conflit peuvent perturber la connexion à Jetpack ou empêcher le chargement correct des feuilles de style requises. Pour tester cela, suivez le guide de test des conflits entre extensions.

Conflits potentiels avec d’autres extensions de performance

Des conflits peuvent survenir lorsqu’une autre extension de performance ou de mise en cache — telle que LiteSpeed Cache — modifie le chargement ou l’optimisation de CSS. Ces modifications peuvent interférer avec la génération de CSS critique par Jetpack Boost et entraîner des problèmes de mise en page, notamment après la mise à jour de l’extension ou du thème.

Solutions potentielles :

  • Accédez à Jetpack → Boost dans l’interface d’administration WP, développez la section Chargement des pages et désactivez l’option d’optimisation du CSS critique. Si la mise en page revient à la normale, le problème peut être dû à un conflit avec les optimisations CSS d’une autre extension.
  • Si vous utilisez LiteSpeed Cache, accédez à LiteSpeed Cache → Optimisation de page → Paramètres CSS, puis désactivez l’option Charger le CSS de manière asynchrone.
  • Comme solution alternative, envisagez de laisser désactivée l’optimisation du Jetpack Boost de CSS et d’utiliser à la place les fonctions d’optimisation de votre extension de mise en cache, ou inversement.
  • Vous pouvez également essayer d’exclure certaines feuilles de style ou classes de l’optimisation dans votre autre extension, si celle-ci le permet.

Si vous ne savez pas quelle extension est à l’origine du problème, désactivez-les une par une et testez la mise en page à chaque fois.

Erreur de délai de chargement

Cela peut se produire à cause d’une boucle de redirection due à une mauvaise configuration du serveur ou au dysfonctionnement d’une extension (ou d’un code personnalisé). Nous avons également constaté que des publicités peuvent mettre trop de temps à se charger et que Boost expire en attendant leur chargement.

Solutions potentielles pour l’erreur de délai de chargement :

  1. Videz le cache de votre navigateur pour vous assurer que Boost charge la version la plus récente de la page.
  2. Consultez la page sans être connecté à WordPress pour vérifier si le problème persiste.
  3. Vérifiez le temps nécessaire au chargement de cette page par rapport aux autres pages de votre site.
  4. Si cette page est plus lente que les autres, identifiez les extensions actives sur cette page.
  5. Désactivez les extensions qui, selon vous, ralentissent le chargement de la page.

Erreur XFrameDeny

Jetpack Boost utilise des iframes pour générer votre CSS critique. Cette erreur se produit lorsque le site possède un en-tête de configuration spécial qui l’empêche de se charger dans une iframe. Cet en-tête s’appelle X-Frame-Options: DENY. Celui-ci peut être ajouté à un site WordPress par une extension ou par la configuration du serveur.

Solutions potentielles pour l’erreur XFrameDeny :

  1. Assurez-vous de ne pas utiliser d’extensions qui ajoutent des en-têtes HTTP supplémentaires à votre site WordPress et désactivez-les si c’est le cas.
  2. Si vous ne savez pas ce que sont ces en-têtes ni d’où ils proviennent, contactez votre hébergeur et demandez-lui de supprimer l’en-tête X-Frame-Options de votre site.

Erreur InvalidURL

Jetpack Boost a trouvé une ou plusieurs URL non valides en tentant de générer le CSS critique CSS. Notez qu’il est parfois possible d’ignorer ces URL. Cela peut se produire pour de nombreuses raisons, et il est donc difficile de proposer une solution qui fonctionne à chaque fois.

Solutions potentielles pour l’erreur InvalidURL :

  1. Assurez-vous que les réécritures personnalisées configurées sur votre site fonctionnent correctement.
  2. Il est possible qu’une extension active rende une ou plusieurs URL non valides. Parcourez la liste des extensions et désactivez celles qui posent problème jusqu’à ce que le problème soit résolu.

Erreur du fournisseur

Cela se produit lorsque quelque chose empêche Jetpack Boost d’enregistrer le CSS critique CSS qu’il a généré pour un groupe de pages donné. La cause la plus fréquente est un pare-feu d’applications Web (WAF) ou une extension de sécurité qui bloque la requête.

Solutions potentielles pour l’erreur du fournisseur :

  1. Vérifiez si des extensions de sécurité sont installées et désactivez-les. Vérifiez ensuite si la génération fonctionne en la relançant. Si c’est le cas, voyez si vous pouvez ajouter une règle d’exclusion dans l’extension de sécurité pour les URL contenant set-provider-css.
  2. Si aucune extension de sécurité n’est installée, le WAF de votre hébergeur bloque peut-être la requête. Vous pouvez le vérifier en exécutant cette commande curl dans un terminal ou une invite de commandes (veillez à remplacer https://yourjetpack.blog/ par l’URL de votre site) :
    curl --location 'https://yourjetpack.blog/' \ --data '<svg xmlns'
  3. Si la commande ci-dessus affiche Forbidden, vous devrez contacter votre hébergeur et lui demander de débloquer la requête.

Bibliothèque de génération défectueuse

Cela est peu probable, mais nous avons prévu le cas où cela se produirait. Si la bibliothèque de génération du CSS critique de Boost est corrompue ou si une autre extension interfère d’une quelconque manière, cette erreur s’affichera.

Solutions potentielles pour l’erreur de bibliothèque de génération défectueuse :

  1. Désactivez puis réactivez le module pour vérifier si l’erreur persiste.
  2. Si elle persiste, réinstallez Jetpack Boost pour vous assurer que tous ses fichiers sont intacts.
  3. Si la réinstallation ne résout pas le problème, il est possible qu’une autre extension provoque un conflit. Dans ce cas, désactivez les extensions une par une jusqu’à ce que le problème soit résolu.

Un tableau associatif était attendu, mais « NULL » a été reçu

Cette erreur peut apparaître lorsque Boost ne parvient pas à générer le CSS critique CSS en raison d’un problème côté serveur pendant la requête.

Solution potentielle pour l’erreur « NULL » :

  • Cela peut être dû à une mauvaise configuration ou à un problème avec le Nœud de mémoire.
  • Contactez votre hébergeur et demandez-lui de vérifier que le nœud de mémoire fonctionne correctement.
  • Si vous avez récemment installé ou mis à jour des extensions, ou si Boost fonctionnait auparavant correctement, le problème peut être dû à un incident temporaire du serveur.
  • Si vous utilisez Cloudflare, essayez de le désactiver temporairement pour voir si cela résout l’erreur.

Une fois le problème du serveur résolu, vous devriez pouvoir régénérer le CSS critique CSS correctement.

PayloadTooLargeError

Cette erreur apparaît lorsque le CSS critique CSS généré dépasse 1 Mo. Cela se produit souvent sur les pages créées à l’aide d’extensions de création de pages.

Si Jetpack Boost incluait le CSS critique CSS, la page serait plus lourde et son chargement serait en fait ralenti. C’est pourquoi il n’est volontairement pas inclus. Il n’est même pas enregistré sur votre site.

Solutions potentielles pour l’erreur PayloadTooLargeError :

  1. Vérifiez si vous pouvez mettre à jour vos pages afin qu’elles partagent les mêmes blocs.

En faisant partager la même mise en page à vos pages, vous vous assurez que le CSS critique CSS généré sera moins volumineux.

Si le partage des mêmes blocs n’est pas possible et que la mise en page des pages est trop particulière, vous ne pouvez alors pas profiter de la fonctionnalité de CSS critique sur les pages de ce groupe.

Erreur inconnue

Cela se produit lorsqu’une erreur inattendue survient lors de la génération du CSS critique pour la page indiquée. Jetpack Boost n’avait pas prévu ce problème.

Solutions possibles en cas d’erreur inconnue :

  1. Ouvrez l’URL pour vérifier que la page se charge correctement.
  2. Vérifiez que la page se charge sans erreur ni problème.
  3. Si la page se charge correctement, mais que le CSS critique échoue toujours, veuillez nous contacter afin que nous puissions approfondir l’analyse.

En identifiant le problème précis à partir du message d’erreur et en appliquant ces solutions, vous pouvez résoudre les problèmes courants liés à Jetpack Boost et à sa fonctionnalité de CSS critique, afin de garantir le chargement efficace de votre site et une expérience utilisateur optimale.

Still need help?

Please contact support. We’re happy to advise.