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.

Exigences en matière de 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 :

1. Vous devez avoir une licence WP Rocket valide.

2. 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é.

3. 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.
4. 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.
     

   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 Suppression des 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

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 :

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 vérifier l'état de WP-Cron de deux manières :

Vérifier WP-Cron avec un plugin

Vous pouvez installer un plugin tiers tel que WP-Cron Status Checker. Si WP-Cron est activé, le widget WP-Cron Status Checker dans votre tableau de bord WordPress devrait afficher ce qui suit :

Le widget indiquera si WP-Cron est en mesure de s'exécuter et la dernière fois qu'il a réussi :

WP-Cron is able to run as of: October 5, 2022 3:05 pm
Last time WP Cron succeeded: October 5, 2022 4:05 pm

Vérifier WP-Cron manuellement

Vous pouvez vérifier si WP-Cron a été désactivé en consultant votre fichier wp-config.php et en recherchant cette ligne :

define('DISABLE_WP_CRON', true);

Lorsque la ligne ci-dessus est ajoutée, cela signifie que WP-Cron a été désactivé. Dans la plupart des cas, cela signifie également qu'une tâche cron côté serveur a été mise en place à la place.

Vérification des réglages du cron côté serveur

Maintenant, si WP-Cron a été désactivé, et que vous avez une tâche cron côté serveur en cours d'exécution. Veuillez vous assurer que les conditions suivantes sont remplies :

• La requête doit être faite au fichier wp-cron.php. La commande la plus répandue est la suivante :

wget -q -O - http://yourdomain.com/custom-cron-multisite.php?doing_wp_cron >/dev/null 2>&1<br>
	

• votresupersite.fr doit être remplacé par le nom de domaine réel de votre site.

• La fréquence doit être réglée sur 5 minutes.

Vous pouvez voir ceci et plus d'informations sur la mise en place de tâches cron pour les installations mono et multisites dans cet article.

Vérification des occurrences de cron

Si la fréquence de WP Cron est suffisante et fiable, alors la génération du CSS utilisé devrait pouvoir fonctionner comme prévu.

Vous pouvez enregistrer les événements de WP Cron en ajoutant le code suivant :

// added to log the wp-cron calls
 
error_log( "\n [" . date('Y-m-d H:i:s', $_SERVER['REQUEST_TIME']) . "] Cron: " . print_r(($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : 'Triggered by the server', true), 3, "cron.log" );
 
 // end of addition

Ajoutez-le en haut du fichier wp-cron.php, après le premier bloc de commentaires et avant la ligne ignore_user_abort( true );.

Idéalement, le fichier cron.log résultant sera situé au même niveau que wp-cron.php, et ressemblera à quelque chose comme ceci :

[2022-11-15 20:00:00] Cron: Triggered by the server
[2022-11-15 20:01:00] Cron: WordPress/6.0.2; https://yourdomain.com/
[2022-11-15 20:02:00] Cron: WordPress/6.0.2; https://yourdomain.com/
[2022-11-15 20:05:00] Cron: Triggered by the server
[2022-11-15 20:06:00] Cron: WordPress/6.0.2; https://yourdomain.com/
[2022-11-15 20:07:00] Cron: WordPress/6.0.2; https://yourdomain.com/
[2022-11-15 20:10:00] Cron: Wget/1.14 (linux-gnu)
[2022-11-15 20:13:32] Cron: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
[2022-11-15 20:15:00] Cron: Triggered by the server
[2022-11-15 20:16:00] Cron: WordPress/6.0.2; https://yourdomain.com/
[2022-11-15 20:17:00] Cron: WordPress/6.0.2; https://yourdomain.com/
[2022-11-15 20:20:00] Cron: Triggered by the server

Dans le log ci-dessus, vous pouvez voir que le cron est déclenché toutes les 5 minutes par le serveur, toutes les quelques minutes par WordPress, et qu'il y a aussi une visite cron générée par le navigateur.

Si votre log affiche un résultat similaire, cela signifie que cron s'exécute comme il se doit.

Le cron déclenché par le serveur peut être enregistré sous la forme de la commande Cron: Wget/1.14 (linux-gnu) ou d'une chaîne aléatoire, telle que Cron: Wxfo4jfv6u, en fonction de la configuration du serveur.

S'il y a des problèmes avec la périodicité du cron, la génération du CSS utilisé sera lente, peut se bloquer ou ne pas progresser du tout.

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.

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 :

Toutes les valeurs de  status possibles sont les suivantes :

• Lorsque la génération du CSS utilisé est réussie, status est le suivant completed.
• Si la génération de CSS utilisé n'a pas commencé pour l'URL, status est défini comme suit pending.
• Lorsque le CSS utilisé se trouve dans la file d'attente de génération, status est le suivant in-progress.
• Et, si la génération échoue, la valeur de status sera failed. Dans ce cas, les colonnes error_code et error_message vous donneront plus de détails.

The resulting Used CSS will be located in the /wp-content/cache/used-css/ folder, within a system of subfolders, whose names depend on the first characters of the hash assigned in the wpr_rucss_used_css table.

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.