Résoudre les problèmes liés à la génération du CSS utilisé

Ce guide vous aidera si vous remarquez que la génération du CSS Utilisé de l'option Supprimer les ressources CSS inutilisées est lente ou ne fonctionne pas du tout.

Vue d'ensemble de la génération du CSS utilisé

Par défaut, la génération du CSS utilisé traitera jusqu'à 100 URL toutes les 60 secondes.

Le nombre d'URL et la fréquence peuvent être modifiés, afin d'accélérer ou de ralentir la génération, comme indiqué dans l'article Personnaliser les paramètres de Supprimer les ressources CSS inutilisées.

L'activation de l'option de Préchargement du cache permettra d'automatiser ce processus.

Toutefois, cette vitesse maximale de génération par défaut dépend des facteurs abordés ci-dessous dans cet article : autoriser la connexion, configurer les plugins de sécurité et les pare-feux, la fiabilité de cron et l'état général d' Action Scheduler.

Solutions rapides

Régénérer le CSS utilisé
Si vous remarquez que le CSS utilisé n'est pas appliqué à votre (vos) page(s), dans la plupart des cas, la régénération du CSS utilisé sera la solution. Vous pouvez le faire en cliquant sur les boutons Purger le CSS utilisé ou Purger le CSS utilisé pour cette URL dans le menu d'administration de WP Rocket.

Remarque : La génération du CSS utilisé peut s'interrompre de manière aléatoire, par exemple si votre serveur est temporairement surchargé. La régénération manuelle du CSS utilisé est une première étape logique de dépannage, qui permet généralement d'éviter les faux positifs.
Vider les niveaux de cache supplémentaires
En outre, si votre site utilise une autre couche de cache, telle que la mise en cache côté serveur, vous devriez effacer cette couche de cache pour voir si cela peut vous aider.
Tronquer la table wpr_rucss_used_css

ATTENTION ! : S'il vous plaît, ne tronquez la table wpr_rucss_used_css qu'après avoir fait une sauvegarde de votre site.

Si les solutions ci-dessus ne suffisent toujours pas, poursuivez votre lecture pour obtenir de plus amples informations.

Configuration requise pour la connexion

Le CSS utilisé ne sera pas généré s'il n'y a pas de connexion entre le serveur de WP Rocket et votre site.

Veuillez vérifier les exigences de base suivantes :

Vous devez avoir une licence WP Rocket valide.
Votre site doit être accessible au public pour que l'outil fonctionne, ce qui signifie qu'il ne sera pas appliqué aux utilisateurs connectés même lorsque le Cache utilisateur est activé, et qu'il ne fonctionnera pas sur les sites bloqués au public par l'authentification htaccess, les plugins "mode maintenance", ou similaires.

Remarque : Cette fonctionnalité est automatiquement désactivée dans les environnements où la constante WP_ENVIRONMENT_TYPE est définie comme locale, car elle nécessite d'établir une connexion avec l'outil de WP Rocket pour générer le CSS utilisé.
WP Rocket accédera à la version non mise en cache de la page pour analyser son CSS. Pour ce faire, il accédera aux pages de votre site auxquelles la chaîne de requête ?nowprocket=1&no_optimize=1 a été ajoutée. Cette chaîne de requête doit être autorisée. La page non mise en cache ne devrait pas prendre plus de 45 secondes à charger, ou elle sera désactivée dans le SaaS de WP Rocket.
Votre serveur, votre pare-feu et/ou votre plugin de sécurité doivent autoriser :

Ces deux agents utilisateurs :
- Desktop: WP-Rocket/SaaS Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
- Mobile: WP-Rocket/SaaS Mozilla/5.0 (Linux; Android 13; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36
Et/ou les IPs de cette liste.

Plugins de sécurité et pare-feu

Les services suivants peuvent détecter les requêtes de génération du CSS utilisé comme un risque potentiel et les bloquer. Veuillez tenir compte de ce qui suit :

Si vous utilisez Wordfence, activez le Mode Apprentissage (Learning Mode) comme décrit ici.
Le Bot Fight Mode de Cloudflare doit être désactivé comme indiqué ici.

Lorsque WP Rocket ne peut pas accéder à votre site, la notification suivante sera affichée :

Il semble qu'un plugin de sécurité ou le pare-feu du serveur empêche WP Rocket d'accéder au générateur de l'option Supprimer les ressources CSS inutilisées. Les IPs listées ici dans notre documentation devraient être ajoutées à vos listes d'autorisation :

- Dans le plugin de sécurité, si vous en utilisez un
- Dans le pare-feu du serveur. Votre hébergeur peut vous aider à cet égard

Si le CSS utilisé résultant est plus petit que 150 octets (150 caractères), parce que, par exemple, le SaaS de WP Rocket est bloqué par un plugin de sécurité ou un captcha, alors il sera considéré comme un CSS invalide et WP Rocket ne l'appliquera pas à vos pages. Dans ce cas, vos pages continueront à utiliser le CSS original.

Problèmes liés à Cron

La génération du CSS utilisé et son application ultérieure dépendent fortement de cron. Ainsi, que vous utilisiez WP-Cron ou un job cron côté serveur, vous devez vous assurer que la fréquence d'occurrence est fiable et suffisamment élevée.

Vous pouvez apprendre comment vérifier le statut du cron et comment enregistrer les occurrences du cron en consultant l'article Comment vérifier si Cron fonctionne correctement ?

Problèmes liés à Action Scheduler

Tables Action scheduler

WP Rocket utilise les tables wp_actionscheduler_ pour gérer la génération des CSS utilisés. Le message suivant sera affiché si WP Rocket ne peut pas créer les tables Action Scheduler :

WP Rocket : Nous avons détecté une table de base de données manquante liée à Action Scheduler. Veuillez visiter l'URL suivante pour la recréer, car elle est nécessaire au bon fonctionnement de WP Rocket.

Ce problème est généralement dû à une mauvaise configuration de l'encodage de la base de données ou peut survenir après une migration du serveur. Si la notification ne disparaît pas, ou si le CSS utilisé ne semble pas être généré, veuillez contacter notre support.

File d'attente des tâches planifiées

S'il y a des dizaines ou des centaines d'actions en attente dans le tableau de bord Actions Scheduled, la génération des CSS utilisés sera mise en file d'attente et arrêtée. Nous vous recommandons de supprimer les actions en attente, de vous assurer que le cron fonctionne et contacter notre support.

Domaines mappés

Dans les configurations multilingues avec domaines mappés, la génération des CSS utilisés peut échouer pour les langues supplémentaires si elles utilisent un nom de domaine ou un TLD différent.

Cela peut être lié à une limite dans la validation de la licence. Si vous pensez que c'est le cas pour votre site, vous devriez contacter notre support.

Les styles en ligne ne sont pas supprimés lorsque le CSS utile est appliqué

Dans certains cas, votre style en ligne peut déclencher une erreur PHP de type PREG_BACKTRACK_LIMIT_ERROR. Lorsque cela se produit, les actions peuvent être incomplètes, par exemple les styles ne sont pas supprimés lorsque l'option Supprimer les ressources CSS inutilisées est appliquée. Un problème potentiel est que PageSpeed peut encore signaler le style en ligne puisqu'il n'est pas inclus dans le CSS utilisé qui en résulte.

En guise de solution de rechange, vous pouvez essayer d'augmenter la valeur de l'option pcre.backtrack_limit en ajoutant ini_set('pcre.backtrack_limit', '2000000'); à votre fichier wp-config.php ou demandez à votre hébergeur de l'augmenter pour vous.

Suivi de la génération du CSS utilisé

WP Rocket suit la génération du CSS utilisé via la base de données, et place le fichier CSS utilisé résultant dans le système de fichiers.

Vous pouvez consulter la table wpr_rucss_used_css pour suivre l'évolution de la génération des CSS utilisés via un plugin tel que SQL Buddy ou à l'aide d'un logiciel de gestion de base de données tel que phpMyAdmin.

Lorsque vous consultez la table, vous pouvez voir le statut de la génération du CSS utilisé dans la colonne status, ici :

used css table

La colonne wpr_rucss_used_css table status aura l'une de ces cinq valeurs possibles pour chaque entrée :

to-submit - Statut initial pour toutes les pages qui sont déclenchées pour la génération de Used CSS, ce qui signifie que la page doit avoir Used CSS généré, mais que le traitement n'est pas encore planifié.
pending - État des pages qui ont été soumises pour être traitées dans le générateur, ce qui signifie que le traitement est programmé mais n'a pas encore commencé.
in-progress - Statut des pages dont le CSS utilisé est en cours de traitement par le générateur.
completed - État confirmant que le générateur a créé avec succès le CSS utilisé pour l'URL.
failed - Statut lorsqu'une requête n'a pas abouti, c'est-à-dire qu'elle n'envoie pas un code de statut 200 (OK). Dans ce cas, les colonnes error_code et error_message afficheront plus de détails.

Le CSS utilisé qui en résulte sera situé dans le dossier /wp-content/cache/used-css/, dans un système de sous-dossiers dont les noms dépendent des premiers caractères du hachage attribué dans la table wpr_rucss_used_css .

Consultez le court enregistrement suivant pour avoir une idée de la manière dont le CSS utilisé est stocké :

Le fichier CSS utilisé est stocké en utilisant le format de compression CSS.GZ, afin d'économiser de l'espace disque.

La vérification des fichiers CSS dans tous les sous-dossiers pouvant être une tâche fastidieuse, il est recommandé d'utiliser la base de données si vous devez suivre la génération des CSS utilisés.