Éléments prioritaires

Dans WP Rocket, il existe deux types d' éléments prioritaires :

Les images critiques au-dessus de ligne de flottaison traitées par la fonctionnalité Optimiser les images critiques.
Les éléments HTML en dessous de ligne de flottaison optimisés par l'option Rendu différé automatique.

Aperçu

WP Rocket optimise les éléments prioritaires afin que le navigateur puisse identifier et rendre les éléments au-dessus de la ligne de flottaison aussi rapidement que possible.

Pour fournir une optimisation précise du contenu, les versions mobiles et bureau d'une page seront traitées indépendamment. Cela signifie que WP Rocket différencie les éléments prioritaires spécifiques au mobile et ceux spécifiques au bureau. Ce comportement dépend de l'option de Cache Mobile, qui crée une version du cache spécifique au mobile par défaut.

Le processus d'optimisation des éléments prioritaires est automatique, mais pas immédiat, il est asynchrone et suit les étapes suivantes :

Un script nommé wpr-beacon.min.js doit être injecté dans la page pour l'optimiser.
Lorsque ce script est exécuté lors d'une visite, il détecte les éléments prioritaires et les renvoie à WP Rocket.
WP Rocket ajoutera les balises optimisées lors de la prochaine mise en cache de la page.

Recommendation ! To make sure the whole process happens as automatic and as fast as possible, use the Remove Unused CSS option. Pour que l'ensemble du processus soit aussi automatique et rapide que possible, utilisez l'option Supprimer les ressources CSS inutilisées.

Par conséquent, votre site doit répondre aux exigences de base de l'option Supprimer les ressources CSS inutilisées.

Quand vider les éléments prioritaires ?

Ces éléments sont automatiquement purgés dans la plupart des scénarios, sauf :

Lorsque vous avez apporté des modifications manuelles au contenu, au CSS et/ou aux images de vos pages.

Dans ce cas, vous pouvez utiliser l'option Vider les Éléments prioritaires dans le menu supérieur de WP Rocket, comme ceci :

Ou, si vous modifiez une page spécifique, vous verrez un bouton Vider les éléments prioritaires de cette URL dans la barre supérieure, comme ceci :

Ces actions permettent d'effacer tous les types d' éléments prioritaires.

Préparation

Pour accélérer partiellement le traitement des pages, les éléments prioritaires utilisent un système de préparation qui fonctionne de la manière suivante :

Les 10 premières URL trouvées dans la page d'accueil mobile seront envoyées au SaaS de WP Rocket.
Le SaaS ouvrira ces liens à l'aide d'un navigateur réel et les données seront générées par le script.
Le SaaS visitera les URL avec la chaîne de requêtes suivante ?wpr_imagedimensions=1&nowprocket=1&no_optimize=1

Remarque : Les autres pages du site, qui ne seront pas traitées par les préparatifs, peuvent toujours bénéficier des optimisations correspondantes lorsqu'elles reçoivent des visites.

La préparation n'a pas lieu lorsque

Supprimer les ressources CSS inutilisées est activée, car les URLs visitées par le SaaS de génération de CSS utilisé déclencheront le script, et génèreront les données automatiquement. La préparation n'est donc pas nécessaire ici.
L'accès à la chaîne de requête ?wpr_imagedimensions=1&nowprocket=1&no_optimize=1 est bloquée.
La constante WP_ENVIRONMENT_TYPE est sur local.
La licence est expirée depuis plus de 15 jours.

Comment désactiver cette optimisation ?

Si vous rencontrez des problèmes avec cette option et que vous devez désactiver tous les éléments prioritaires, vous pouvez installer et activer le plugin d'aide suivant :

📥 Télécharger (.zip): WP Rocket | Disable Priority Elements
Développeur•ses : Vous pouvez trouver le code de ce plugin sur GitHub.

Ce plugin d'aide désactivera les éléments suivants :

Rendu différé automatique
Optimiser les images critiques
Le script beacon wpr-beacon.min.js

Si vous rencontrez des problèmes avec une seule de ces fonctionnalités, veuillez vous référer à leurs articles spécifiques pour trouver le plugin d'aide spécifique que vous devriez utiliser à la place.

Conflits connus

Si les éléments prioritaires sont mélangés et que les éléments spécifiques au mobile sont servis dans la version de bureau, ou que les éléments de bureau sont servis dans la version mobile, cela peut être dû à l'une des raisons suivantes :

Couches de cache additionnelles

Si le site utilise des couches de cache supplémentaires qui ne font pas la différence entre les appareils mobiles et les ordinateurs de bureau, il est possible que les éléments spécifiques aux appareils mobiles apparaissent optimisés dans la version de bureau de la page, et inversement.

Solution : La seule solution connue est de désactiver toutes les couches de cache qui n'utilisent pas de cache spécifique pour le type d'appareil.

Le cache mobile a été désactivé

Lorsque l'option Cache mobile et/ou son cache spécifique au mobile sont désactivés, l'optimisation des éléments prioritaires en fonction de l'appareil ne fonctionnera pas correctement.

Solution : Activez les options de cache mobile pour utiliser correctement les éléments prioritaires ou désactivez les éléments prioritaires ainsi que le cache mobile à l'aide de ce plugin d'aide.

Dépannage

Les éléments prioritaires ne sont pas optimisés

Vous pouvez voir le script wpr-beacon.min.js dans la page, mais les Éléments prioritaires ne sont pas optimisés depuis longtemps.

Solution : Vider le cache de WP Rocket et de toute autre couche de cache fonctionnant sur le site.

Si le fait de vider le cache ne change rien, il se peut que le script n'ait pas encore été exécuté. Veillez à consulter de nouveau ces recommandations. Ou encore, autorisez le processus asynchrone à fonctionner correctement en visitant une page avec les dimensions requises dans votre navigateur.

Détails techniques

Le script wpr-beacon.min.js ne recueille des données qu'après une visite effectuée à l'aide d'un navigateur ayant les dimensions requises suivantes :
- Appareils mobiles dont la taille de l'écran est inférieure à 393x830 px.
- Les ordinateurs de bureau dont la taille de l'écran est supérieure à 1600x700 px.
  
  Les visites effectuées en dehors des dimensions ci-dessus ne sont pas valables. WP Rocket considérera que le type d'appareil utilisé est trop grand ou trop petit, et le script ne sera pas exécuté.
Le script wpr-beacon.min.js script ne peut pas être exécuté sur les navigateurs headless.
Une tâche Action Scheduler rocket_job_warmup, sera créé pour récupérer la page d'accueil du mobile et envoyer chacun des 10 URL au processus de préparation.

Détails sur le traitement asynchrone

Les éléments prioritaires sont toujours traités de manière asynchrone, que ce soit avec l'option Supprimer les ressources CSS inutilisées ou indépendamment de celle-ci.

Si Supprimer les ressources CSS inutilisées est utilisée, les éléments prioritaires seront appliqués à la page lorsque le CSS utilisée lui sera appliquée.

Si Supprimer les ressources CSS inutilisées n'est pas actif sur un site, ou si une page est traitée avant Supprimer les ressources CSS inutilisées, le traitement asynchrone des éléments, après l'ajout du script de balise, se déroule comme suit :

Pour que le script soit exécuté et que le processus de détection et de récupération des données soit couronné de succès, le type de visite effectuée sur la page doit fournir suffisamment d'informations sur les éléments à optimiser.

Ce type de visite valide se produit lorsque :
- Un utilisateur réel visite la page avec un navigateur aux dimensions requises.
- La page est traitée par le SaaS de Supprimer les ressources CSS inutilisées pendant la génération du CSS utilisée.
- Ou, si l'option Supprimer les ressources CSS inutilisées n'est pas active, un processus de préparation exécutera le script pour 10 pages de votre site.
Une fois que le script est exécuté et que le processus de détection des éléments est terminé, le cache doit être vidé manuellement ou automatiquement.

Une fois le cache vidé, les optimisations doivent enfin être appliquées à la page.