Rendu différé automatique

WP Rocket 3.17 introduit une fonctionnalité appelée Rendu différé, qui différe le rendu des éléments sous la ligne de flottaison d'une page, afin d'afficher plus rapidement les éléments du haut.

Les éléments situés sous la ligne de flottaison ne seront affichés que lorsque les visiteurs feront défiler la page vers le bas.

Cette optimisation est automatiquement activée lors de l'activation de WP Rocket, il n'y a donc pas d'option ou de bouton dans la page des paramètres.

Note! Le processus de Rendu différé des éléments est automatique mais pas immédiat, il est asynchrone.

Dans cet article, vous trouverez plus d'informations sur le fonctionnement de cette fonctionnalité, comment vérifier si elle fonctionne, comment résoudre les problèmes courants, et d'autres informations pertinentes.

Aperçu de la fonctionnalité

La fonctionnalité Rendu différé détecte automatiquement les éléments d'une page situés sous la ligne de flottaison, puis, à l'aide d'une feuille de style CSS, demande au navigateur de retarder le rendu de ces éléments jusqu'à ce que le visiteur fasse défiler la page vers le bas, atteigne la fenêtre de visualisation et ait réellement besoin de les voir. WP Rocket applique l'optimisation aux éléments HTML suivants :

div
main
footer
section
article
header

Différents éléments du Rendu différé pour les mobiles et les ordinateurs de bureau

Pour obtenir un retard précis des éléments, les versions mobile et de bureau d'une page sont traitées et leurs éléments spécifiques sont optimisés indépendamment.

Ce comportement dépend de l'option Cache Mobile, qui crée par défaut une version du cache spécifique au mobile. Par conséquent, l'option Cache Mobile, et son comportement spécifique aux mobiles, ne doit pas être désactivée.

Approche asynchrone

L'approche asynchrone du Rendu différé fonctionne ainsi de manière asynchrone :

Un identifiant sera ajouté aux éléments d'une page.
En outre, un script sera injecté dans la page.

Avantages de la fonctionnalité

L'objectif de la fonctionnalité Rendu différé est d'accélérer le processus de rendu de la page, d'offrir aux utilisateurs un temps de chargement perçu plus rapide et de réduire la consommation de données.

Les éléments qui ne sont pas essentiels sur une page, comme le pied de page, ne seront rendus que si l'utilisateur fait défiler la page et a vraiment besoin de les voir.

Avantages de PageSpeed/Lighthouse

Les bénéfices pour PageSpeed/Lighthouse sont les suivants :

Avec cette fonctionnalité, vous pouvez vous attendre à certaines améliorations autour de ces mesures et audits :

Note ! Les améliorations sont particulièrement perceptibles sur les pages qui contiennent plusieurs éléments devant être rendus en différé.

Comment utiliser la fonctionnalité Rendu différé

La fonctionnalité Rendu différé est activée par défaut et est automatique, mais pour s'assurer que l'ensemble du processus asynchrone se déroule aussi rapidement que possible, il est recommandé de l'utiliser avec l'option Supprimer les ressources CSS inutilisées.

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

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é sur la page doit fournir des informations valides sur les éléments situés à l'intérieur et à l'extérieur du viewport du navigateur.

Ce type de visite valide se produit lorsque
- Un utilisateur réel visite la page avec un navigateur dans les dimensions requises.
- La page est traitée par le Remove Unused CSS SaaS lors de la génération des CSS utilisés.
- Ou, si l'option Remove Unused CSS n'est pas active, un processus de préchauffage se produira pour exécuter le script pour 10 des pages de votre site.
Après l'exécution du script et la détection des éléments, le cache doit être vidé manuellement ou automatiquement.

Une fois le cache vidé à ce stade, les éléments situés sous la ligne de flottaison auront le balisage qui les rendra différé.

Exigences de base

L'option Rendu différé a ces exigences de base :

Votre serveur, votre pare-feu et/ou votre plugin de sécurité doit autoriser la liste des requêtes AJAX provenant du frontend et de wp-admin/admin-ajax.php.
Les IPs trouvés dans cette liste doivent être autorisés dans le serveur, le pare-feu et/ou le plugin de sécurité.
Lorsqu'elle est utilisée avec l'option Supprimer les ressources CSS inutilisées (recommandée), les mêmes exigences de base doivent être respectées.

Si WP Rocket ne peut pas accéder à votre site, l'avis d'administration suivant sera affiché :

firewall block admin notice

Il semble qu'un plugin de sécurité ou le pare-feu du serveur empêche WP Rocket d'accéder aux fonctionnalités SaaS. Les IP 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. - Dans le pare-feu du serveur. Votre hébergeur peut vous aider à cet égard

Préchauffage

Pour accélérer le traitement de certaines pages, l'option Rendu différé utilise un système de préchauffage, qui fonctionne comme suit :

Les 10 premières URL 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 en utilisant un véritable navigateur et les données seront générées par le script.
Le SaaS visitera les URL avec ?wpr_imagedimensions=1&nowprocket=1&no_optimize=1 chaîne de requête ajoutée.

Le préchauffage n'aura pas lieu lorsque :

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

Comment vérifier si le Rendu différé fonctionne

Voici comment vous pouvez savoir si les éléments d'une page sont encore en cours de traitement ou s'ils sont déjà optimisés par la fonction Rendu différé.

La page est en cours de traitement

Si l'optimisation d'une page a commencé, les éléments HTML de la page utiliseront la balise data-rocket-location-hash, avec une valeur unique, comme ceci :

<div data-rocket-location-hash="aa11bb22" class="wp-block-group" style="padding-top:0">

Le aa11bb22 est une valeur unique qui identifie chaque élément.

De plus, le fichier wpr-beacon.min.js sera présent dans le code source.

Le script peut être trouvé avec la balise suivante :

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

Si les éléments d'une page utilisent la balise data-rocket-location-hash, ou qu'une page contient le script wpr-beacon.min.js, cela signifie que l'optimisation a commencé.

La page est déjà traitée

Ensuite, vous pouvez savoir si la page a déjà été traitée lorsque les éléments HTML, qui sont effectivement situés sous la ligne de flottaison, utilisent la balise data-wpr-lazyrender="1".

Un élément dont le Rendu différé présente le balisage suivant :

<footer data-wpr-lazyrender="1" class="wp-block-group">

En outre, ce bloc CSS en ligne, utilisé par le navigateur pour exécuter le rendu différé, sera ajouté à la page :

<style id="rocket-lazyrender-inline-css">[data-wpr-lazyrender] {content-visibility : auto;}</style>

Les éléments dotés de l'attribut data-wpr-lazyrender="1" ont été correctement rendus en différé.

Effacement automatique des éléments rendus en différé

WP Rocket effacera automatiquement les éléments rendus en différé :

Lorsque les permaliens sont modifiés, tous les éléments seront purgés.
Lorsque le thème est changé, tous les éléments seront effacés.
Lors de la mise à jour de l'article, les éléments spécifiques à l'article seront effacés. Cela ne s'applique pas aux éléments du Contenu associé.

Effacement manuel des éléments rendus en différé

Lorsque vous faites des modifications manuelles du contenu de vos pages, vous devez effacer manuellement les éléments via le menu supérieur de la barre d'outils de WP Rocket.

Pour effacer les éléments de tout votre site, depuis le menu supérieur vous pouvez cliquer sur le bouton Vider les Éléments prioritaires :

Pour effacer les éléments d'une page ou un article spécifique, vous pouvez cliquer sur le bouton Vider les Éléments prioritaires pour cet URL :

Remarque : L'option Vider les Éléments prioritaires efface les éléments rendus différés, de plus, les images critiques de la fonction Optimiser les images critiques sont également purgées.

Comment exclure des éléments de cette fonctionnalité ?

Si vous devez exclure certains éléments de cette optimisation parce qu'ils en subissent les effets négatifs, vous pouvez installer le plugin suivant :

📥 Télécharger (.zip): WP Rocket | Exclude specific elements from Automatic Lazy Rendering
Développeurs: Vous pouvez trouver le code pour ce plugin sur GitHub.

Remarque ! Édition manuelle du code requise avant utilisation !

Après avoir téléchargé le fichier zip du plugin, décompressez-le et ouvrez le fichier PHP dans un éditeur de texte.
Cherchez les attributs de la balise HTML que vous souhaitez exclure et choisissez un attribut qui soit unique.

Remplacez cette ligne par l'attribut de l'élément que vous souhaitez exclure :
```
$exclusions[] = 'main-footer"';
	
```
Si vous avez besoin d'exclure d'autres éléments, vous pouvez ajouter autant de lignes que nécessaire.
Après avoir effectué vos modifications, enregistrez le fichier PHP et rezippez le plugin.
Dans votre site WordPress, allez à Extensions > Ajouter nouveau > Télécharger l'extension et téléversez le fichier zip.
Activez-le et vider le cache.

Comment désactiver cette fonctionnalité

Si cette optimisation pose des problèmes et que vous souhaitez la désactiver, veuillez installer et activer le plugin d'aide suivant :

📥 ; Télécharger (.zip): WP Rocket | Disable Lazy Render Content
Développeurs : Vous pouvez trouver le code de ce plugin sur GitHub.

Conflits connus

Des couches supplémentaires de cache qui ne différencient pas le type d'appareil

Si le site utilise des couches de cache supplémentaires qui ne font pas la différence entre les appareils mobiles et de bureau, cette optimisation peut rencontrer des problèmes lors de la détection et de l'optimisation des éléments sous la ligne de flottaison.

En conséquence, il est possible que les éléments spécifiques au mobile apparaissent optimisés dans la version desktop de la page, ou l'inverse.

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.
Les éléments rendus différé sont mélangés pour les mobiles et les ordinateurs de bureau

Ce problème peut se produire si l'option Mobile Cache, et/ou sa fonction de cache spécifique au mobile, sont désactivées.

Solution : En principe, réactivez l'option Mobile Cache. Toutefois, si le Mobile Cache, ou sa fonction de cache spécifique au mobile, doit rester désactivé sur un site, la fonction Rendu différé doit également être désactivée. Vous pouvez le faire avec ce plugin d'aide.

Dépannage

Le wpr-beacon.min.js a été correctement ajouté à la page, mais les éléments ne sont pas encore optimisés.

Une solution courante consiste à vider le cache de WP Rocket et de toute autre couche de cache fonctionnant sur le site.

Si l'effacement du cache ne résout pas le problème, il se peut que le script n'ait pas encore été exécuté. Dans ce cas, assurez-vous qu'une visite est effectuée à l'intérieur de la section dimensions requises.

Notes techniques

Le script wpr-beacon.min.js ne collectera des données qu'après une visite effectuée avec un navigateur ayant les dimensions suivantes :
- Appareils mobiles avec une zone d'affichage inférieure à 393x830.
- Les appareils de bureau avec une zone d'affichage plus grande que 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_lazy_render_content.
Les éléments HTML seront traités lorsque leur profondeur est au maximum de 3 à partir de l'élément body.
La tâche du planificateur d'actions, appelée rocket_job_warmup, sera créée pour récupérer la page d'accueil mobile et envoyer chacune des 10 URL au processus de préchauffage.

Si vous avez des questions supplémentaires, vous pouvez contacter l'équipe de support de WP Rocket.