Optimiser les images critiques

WP Rocket 3.16 introduit une fonctionnalité appelée Optimiser les images critiques, qui optimise automatiquement les images situées en haut de la page, afin qu'elles soient restituées plus rapidement.

Cette optimisation est automatiquement activée lors de l'activation de WP Rocket, c'est pourquoi il n'y a pas d'option ou de bouton dans la page des réglages.

Attention ! Le processus d'optimisation des images est automatique, mais pas immédiat, il est asynchrone.

Dans cet article, vous trouverez plus d'informations sur son fonctionnement, comment vérifier si ça fonctionne, comment résoudre les problèmes courants, ainsi que d'autres informations pertinentes.

Aperçu

La fonction Optimiser les images critiques détecte automatiquement l'image LCP (Largest Contentful Paint) d'une page. L'image LCP sera préchargée, l'attribut fetchpriority="high" sera défini et l'image sera également exclue du LazyLoad.

En outre, cette option détectera automatiquement toutes les images au-dessus de la ligne de flottaison et les exclura également du LazyLoad.

Des images différentes pour les mobiles et les ordinateurs

Pour une optimisation précise du contenu, les versions mobiles et de bureau d'une page sont traitées indépendamment.

Cela signifie que toutes les images spécifiques aux mobiles et aux ordinateurs de bureau seront optimisées en conséquence.

Ce comportement dépend de l'option de cache mobile qui, par défaut, crée une version du cache spécifique aux téléphones portables. 

Approche asynchrone

L'option Optimiser les images critiques fonctionne de manière asynchrone :

• Tout d'abord, un script doit être injecté dans la page à optimiser.
• Lorsque ce script est exécuté lors d'une visite, il détecte les images critiques et les renvoie à WP Rocket.
• Ensuite, le script sera supprimé et le balisage résultant des images optimisées sera appliqué à la page après la suppression du cache.

Autres types d'éléments LCP

L'option Optimiser les images critiques ne peut optimiser que l'élément LCP qui est une image. 

Cependant, il ne peut optimiser d'autres types d'éléments LCP tels que les nœuds de texte (div, section...) Pour optimiser ces autres types d'éléments LCP, veuillez consulter le guide général sur le Largest Contentful Paint

Avantages de la fonctionnalité

Avantages pour PageSpeed/Lighthouse

• Avec l'option Optimiser les images critiques, l'audit Précharger l'image LCP doit être traité.
• L'audit L'image Largest Contentful Paint a été chargée de manière différé devrait être résolu. Sauf si vos images sont chargées de manière différé par des tiers.
• Cette fonctionnalité devrait améliorer la métrique Largest Contentful Paint de PageSpeed. En particulier, la phase de Délai de chargement sera améliorée :
  

Remarque ! Vous devez toujours optimiser l'élément LCP conformément à l'audit Servir les images dans des formats nouvelle génération et suivre les instructions supplémentaires trouvées ici.

Comment utiliser la fonction Optimiser les images critiques

Optimiser les images critiques est activée par défaut, mais pour que l'ensemble du processus se déroule automatiquement et aussi rapidement que possible, il est recommandé d'utiliser l'option Supprimer les ressources CSS inutilisées.

Si vous ne pouvez pas activer la fonction  Supprimer les ressources CSS inutilisées, vous devez tenir compte des points suivants :

1. Pour que le script soit exécuté et que le processus de détection et d'extraction des données soit réussi, il faut que le type de visite de la page fournisse suffisamment d'informations sur les images et le navigateur.
   
   Ce type de visite est possible dans les cas suivants :
   
   
   • Un utilisateur réel visite la page à l'aide d'un navigateur avec les dimensions requises.
   • La page est traitée par le SaaS de Supprimer les ressources CSS inutilisées lors de la génération du CSS utilisé.
   • 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 images est terminé, le cache doit être supprimé manuellement ou automatiquement.
   
   Une fois le cache vidé, les images optimisées doivent enfin être appliquées à la page.

Conditions requises

Voilà les conditions de base pour que le dispositif fonctionne :

1. Votre serveur, pare-feu et/ou plugin de sécurité doit autoriser les requêtes AJAX provenant du frontend et de wp-admin/admin-ajax.php.
2. Les IP figurant dans cette liste doivent être autorisées par le serveur, le pare-feu et/ou le plugin de sécurité.
3. Lorsqu'elle est utilisée avec l'option Supprimer les ressources CSS inutilisées (recommandée), les mêmes exigences de base de l'option Supprimer les ressources CSS inutilisées doivent être respectées.
   
   Si WP Rocket ne peut pas accéder à votre site, le message suivant sera affiché :

   

   WP Rocket : Il semble qu'un plugin de sécurité ou le pare-feu du serveur empêche WP Rocket d'accéder au SaaS. 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

Préparation

Pour accélérer partiellement le traitement des pages, l'option Optimiser les images critiques peut utiliser un système de préparation, qui fonctionne comme suit :

• Les 10 premières URLs trouvées dans la page d'accueil mobile seront envoyées au SaaS Optimiser les images critiques de WP Rocket. Le reste des pages sera traité au fur et à mesure de leur visite.
• 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 auxquelles la chaîne de requête ?wpr_imagedimensions=1&nowprocket=1&no_optimize=1 a été ajoutée. L'option Ajouter les dimensions d'image manquantes est appliquée à cette chaîne de requête.

La préparation ne se produit pas lorsque

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

Comment vérifier si l'optimisation des images critiques fonctionne ?

Vous pouvez vérifier si les images d'une page sont optimisées par la fonction Optimiser les images critiques en vérifiant les changements dans le code source de la page.

Présence du script

Dans un premier temps, un script appelé wpr-beacon.min.js sera ajouté à la page afin d'optimiser ce balisage :

<script data-name="wpr-wpr-beacon" src='https://yoursite.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script>

L'image suivante montre le script dans le code source d'une page :

Si une page contient ce script, cela signifie que l'optimisation a été lancée.

Les balises Preload 

Une fois l'optimisation terminée pour une page, son image LCP sera préchargée à l'aide d'un nouvel élément HTML. Le fichier wpr-beacon.min.js sera également supprimé.

Ainsi, pour ce type de balise des images originales :

<img href="image.jpg" class="image-class" alt="image title">

WP Rocket :

• Créera une balise <link> dans <head>, avec un attribut rel="preload".
• Ajoutera l'attribut fetchpriority="high" à la balise <link>.
• Ajoutera l'attribut fetchpriority="high":
• à la balise <link>.
• à l'élément d'image d'origine, uniquement s'il utilise une balise <img>.
• Ajoute aussi l'attribut data-rocket-preload pour identifier WP Rocket en tant que responsable.

Par conséquent, la balise résultante <link> sera ajoutée avec la balise suivante :

<link rel="preload" data-rocket-preload as="image" href="image.jpg" fetchpriority="high">

Selon le type de balisage utilisé par une image, <link> présentera quelques différences, comme ci-dessous :

• Lors de l'utilisation des balises <picture>, chacune des images de la balise <source> aura sa propore balise <link rel="preload" >.
• Dans la balise <link rel="preload" > des images responsive, l'attribue srcset deviendra imagesrcset, et l'attribut sizes deviendra imagesizes.
• Il y aura une balise <link rel="preload" > pour chacune des images définies dans la propriété url des background superposés. 

Exclusion du LazyLoad

De plus, lorsque l'optimisation d'une page est effectuée, l'image LCP, ainsi que les images au-dessus de la ligne de flottaison, seront exclues de l'option LazyLoad.

Par conséquent, la classe  lazyloaded ne sera pas présent dans le balisage des images originales.

Effacement automatique des images critiques

Les scénarios suivants déclenchent l'effacement automatique des images critiques :

• Lorsque les permaliens sont modifiés, toutes les images sont supprimées.
• Lorsque le thème est modifié, toutes les images sont effacées.
• Lors de la mise à jour de l'article, les images spécifiques à l'article sont effacées. Cela ne s'applique pas aux images des pages liées.
• Lorsque l'on clique sur les boutons Purger le CSS Utilisé et/ou Purger le CSS Utilisé pour cette URL, si l'option Supprimer les ressources CSS inutilisées est active.

Effacement manuel des images critiques

• Cliquez sur le bouton "Effacer les images critiques".
• Utilisez le lien Purger le CSS Utilisé et/ou Purger le CSS Utilisé pour cette URL, si l'option Supprimer les ressources CSS inutilisées est active.

Pour des pages spécifiques, lorsque vous visitez l'URL tout en étant connecté, vous pouvez effacer les images spécifiques :

• Cliquez sur le bouton "Effacer les images critiques pour cette URL".
• Utilisez le lien Purger le CSS Utilisé pour cette URL, si l'option Supprimer les ressources CSS inutilisées est active.

Videos et iframes

• Cette fonctionnalité optimisera les images provenant de l'option Remplacer l'iframe YouTube par une image de prévisualisation.
• Dans le cas où l'élément LCP est l'image à l'intérieur d'un attribut poster dans une balise video, WP Rocket peut la précharger. Cependant, étant donné que la balise video ne le supporte pas, elle n'utilisera pas l'attribut fetchpriority="high". De plus, puisque l'image de l'attribut poster n'est pas un élément image isolé, elle ne sera pas chargée en différé, donc elle ne sera pas exclue du chargement différé.
• Si leur balisage le permet, les images de façade pour les iframes, telles que les cartes, seront également optimisées.

Comment désactiver Optimiser les images critiques ?

Si vous rencontrez des problèmes avec cette option et que vous devez la désactiver, vous pouvez installer et activer le plugin suivant :

📥  Télécharger (.zip): WP Rocket | Disable Critical Images Optimization
Developpeurs: Vous pouvez trouver le code pour ce plugin sur GitHub.

Alternativement vous pouvez ajouter à votre site l'extrait de code suivant :

add_filter( 'rocket_above_the_fold_optimization', '__return_false' );

Conflicts connus

• Couches supplémentaires ou cache qui ne font pas la différence entre les types d'appareils
  
  Si le site utilise des niveaux de cache supplémentaires qui ne font pas la différence entre les appareils mobiles et les ordinateurs de bureau, cette optimisation peut rencontrer des problèmes lors de la détection des images et de l'application de l'optimisation.
  
  Par conséquent, il est possible que les images spécifiques au mobile apparaissent optimisées dans la version de bureau de la page, et inversement. 
  
  Malheureusement, 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.
• Les images LCP pour mobile sont servies en version bureau, ou autre.
  
  Ce problème peut se produire si l'option Mobile Cache et/ou son cache spécifique au mobile ont été désactivés manuellement (si ce plugin d'aide n'est pas utilisé).

Dépannage

• Le script n'est pas ajouté
  
  Lors de la mise à jour des versions précédentes vers WP Rocket 3.16, le cache n'est pas automatiquement effacé. 
  
  Pour que le script soit ajouté pour la première fois à une page, le cache de l'ensemble du site ou d'une page spécifique doit être vidé.
• Les images ne sont pas optimisées
  
  Si le script  wpr-beacon.min.js a été correctement ajouté à la page, mais les images ne sont pas encore optimisées.
  
  La solution est de 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é. Dans ce cas, assurez-vous qu'une visite est effectuée dans les dimensions requises.
  
• Les images critiques sont encore LazyLoadées 
  
  WP Rocket exclura les images de sa propre fonctionnalité LazyLoad, et il devrait également supprimer l'attribut loading="lazy" lorsqu'il est ajouté au début du traitement de la page.
  
  Toutefois, si les images sont LazyLoadées de manière dynamique, c'est-à-dire plus tard dans le processus de rendu, lorsque l' optimisation des images critiques a déjà été exécutée, les images peuvent encore être LazyLoadées.
  
  Dans ce cas, vous devez désactiver toutes les autres fonctions de LazyLoading de tierces parties.

Notes 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 suivantes :
• Appareils mobiles dont la taille de l'écran est inférieure à 393x830.
• Les ordinateurs de bureau dont la surface d'affichage est supérieure à 1600x700.
  
  Pour les visites effectuées en dehors des dimensions ci-dessus, 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 ne peut pas être exécuté sur les navigateurs "headless".
• Les données collectées par le script sont stockées dans la table wpr_above_the_fold.
• La tâche d'Action Scheduler appelée rocket_job_warmup, sera créé pour récupérer la page d'accueil mobile et envoyer chacune des 10 URL au processus de préparation.

Pour tout autre problème ou question, veuillez contacter l'équipe de support de WP Rocket.