É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

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

1. Un script nommé wpr-beacon.min.js doit être injecté dans la page pour l'optimiser.
2. Lorsque ce script est exécuté lors d'une visite, il détecte les éléments prioritaires et les renvoie à WP Rocket.
3. 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.

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

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 :

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