Optimiser les images critiques

La fonctionnalité Optimiser les images critiques optimise automatiquement les images situées au-dessus de la ligne de flottaison, 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.
Pour que l'ensemble du processus soit aussi automatique et rapide que possible, utilisez l'option Supprimer les ressources CSS inutilisées.

Cette optimisation fait partie des Éléments prioritaires de WP Rocket.

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 et :

• L'image LCP sera préchargée
• l'attribut fetchpriority="high" sera défini
• 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 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.

Preload & Fetchpriority

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.

Note : L'option Vider les éléments prioritaires effacera les images critiques et les autres Éléments prioritaires.

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

• 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

• 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.
• Vous trouverez tous les détails techniques ici.

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