WP Rocket 3.17 : améliorez votre métrique INP avec le rendu paresseux automatique

Avez-vous déjà eu l'impression que votre site Web met du temps à répondre, surtout si vous essayez d'interagir avec de longues pages de blog ou des pages de produits de commerce électronique ? L'optimisation des performances est un défi, et l'est encore plus lorsqu'il s'agit d'améliorer des métriques complexes liées à l'expérience utilisateur, telles que l'interaction avec Next Paint (INP). INP est la nouvelle métrique Core Web Vital mesurant la réactivité des pages Web et jouant un rôle clé dans l'amélioration de la vitesse, de l'expérience utilisateur et du référencement – ​​en d'autres termes, vous ne pouvez pas l'ignorer.

Si vous avez travaillé dur pour améliorer la vitesse de votre site Web et l'expérience utilisateur vers une meilleure note INP, vous serez heureux d'en savoir plus sur notre nouvelle version majeure et sa toute nouvelle fonctionnalité automatisée. Dites bonjour à WP Rocket 3.17 !

Notre nouvelle version majeure se concentre sur l'optimisation automatique de la façon dont votre site Web restitue le contenu lorsque les visiteurs font défiler. Il est particulièrement utile pour les blogs, les boutiques en ligne et tout site proposant beaucoup de contenu à explorer.

Nous sommes ravis de présenter WP Rocket 3.17 pour deux raisons.

Premièrement, la nouvelle fonctionnalité améliorera la métrique INP et la vitesse perçue, notamment sur mobile. Cela peut également avoir un impact positif sur d’autres mesures clés telles que les notes de la plus grande peinture de contenu et de la première peinture de contenu. L'optimisation des mesures liées à l'expérience utilisateur peut également améliorer le taux de conversion, ce qui est l'objectif final de rendre votre site Web plus rapide, n'est-ce pas ?

De plus, WP Rocket est le premier plugin à offrir une optimisation aussi puissante et automatique sur toutes les pages du site avec précision.

Découvrez tout dans notre article de blog ou regardez la vidéo.

Qu'est-ce que le rendu et son impact sur les performances

Pour comprendre comment WP Rocket 3.17 peut améliorer les performances de votre site Web, commençons par expliquer le rendu. Lorsque votre page Web se charge, le rendu entre en jeu, c'est-à-dire la manière dont le navigateur transforme le code de votre site Web en éléments visuels que les utilisateurs voient sur leur écran.

Le rendu du navigateur comporte plusieurs étapes qui commencent par la réception par le navigateur du fichier HTML et la création de l'arborescence DOM, qui est la représentation arborescente de la page Web. La dernière étape est la peinture : c'est lorsque le navigateur peint chaque élément sur l'écran et que les utilisateurs peuvent voir la page Web terminée.

Comme cela arrive toujours avec l’optimisation des performances Web, il y a un piège. En fait, le processus de rendu peut constituer un défi en termes de performances, car il nécessite que le navigateur gère plusieurs tâches à la fois. Cette activité multitâche se déroule sur ce qu'on appelle le thread principal, qui est principalement affecté par les fichiers JavaScript.

Lorsque le thread principal devient trop chargé, cela conduit à des tâches longues. Ces longues tâches sont comme des embouteillages qui ralentissent la réactivité de votre page et affectent des mesures telles que l'interaction avec Next Paint – une mesure cruciale de Core Web Vital mesurant la rapidité avec laquelle votre page répond aux interactions des utilisateurs.

Rendu et performances

Lorsque nous parlons de rendu et de son impact sur les performances, nous faisons particulièrement référence à deux parties du processus : le rendu et la peinture – comme vous l'avez vu dans la section précédente. Ce sont les étapes où le navigateur travaille dur pour afficher le contenu à l'écran – et celles qui contribuent au score INP et à la vitesse perçue.

Plusieurs variables peuvent affecter les performances au cours de ce processus. Pour n'en citer que quelques-uns : la taille du DOM, la vitesse d'exécution de JavaScript et les animations. Plus le contenu de la page est important, plus l'optimisation du rendu est difficile.

Maintenant que vous savez que le rendu est crucial pour la vitesse et doit être amélioré, apprenons comment le rendre possible.

Découvrez la propriété CSS de visibilité du contenu

Un moyen efficace d’optimiser le rendu du navigateur – donc la vitesse et la réactivité – consiste à tirer parti de la propriété CSS content-visibility. Cette propriété indique au navigateur de ne pas restituer immédiatement toutes les parties du contenu de la page, mais d'attendre que l'utilisateur soit sur le point de les voir.

Avez-vous déjà joué à des jeux vidéo ? Si c'est le cas, vous savez que le monde entier n'est pas chargé en même temps. Au lieu de cela, les nouvelles scènes et leur arrière-plan ne sont affichés – ou rendus – qu'au fur et à mesure que vous avancez. C’est exactement ce que permet la propriété CSS content-visibility.

Alors, en quoi cela aide-t-il ? En utilisant la visibilité du contenu, le navigateur a moins de travail à faire en même temps. Au lieu d'essayer de tout restituer immédiatement, il peut se concentrer sur ce qui est le plus important à l'heure actuelle. Cela signifie:

1. Il indique au navigateur d'omettre le rendu de certains éléments jusqu'à ce qu'ils soient nécessaires, de sorte que le navigateur a moins de tâches longues à gérer, notamment en matière de rendu et de peinture.
2. La page se charge plus rapidement car les parties les plus visibles sont prêtes rapidement.
3. La page répond plus rapidement lorsque les utilisateurs interagissent avec elle.

En conséquence, votre site Web offre une expérience utilisateur améliorée. Les visiteurs verront votre contenu plus rapidement et pourront interagir avec la page en faisant défiler et en cliquant.

La bonne nouvelle est que la propriété content-visibility est désormais prise en charge par tous les principaux navigateurs. Cela signifie que cette fonctionnalité puissante peut améliorer les performances d'un site Web pour presque tous les utilisateurs, quel que soit leur navigateur.

En appliquant la propriété content-visibility dans WP Rocket 3.17, nous introduisons la fonctionnalité de rendu paresseux automatique. Continuez à lire pour savoir ce que cela implique.

3.17 : Présentation du rendu paresseux automatique

Notre nouvelle version majeure permet un rendu paresseux automatiquement. Comme toujours pour nos nouvelles versions et améliorations, l'objectif est de vous aider à améliorer les performances de votre site Web de la manière la plus simple, quelles que soient vos compétences techniques et si vous maîtrisez les techniques d'optimisation des performances Web.

Nous nous concentrons sur les fonctionnalités qui peuvent avoir un impact significatif sur la vitesse et l'expérience utilisateur, et WP Rocket 3.17 ne fait pas exception.

Avant tout, la nouvelle version peut améliorer considérablement votre score INP, rendant votre site Web plus réactif aux visiteurs. Cela peut également améliorer légèrement vos scores de Largest Contentful Paint et First Contentful Paint, bien que cela constitue plutôt un effet secondaire positif.

La nouvelle fonctionnalité est sûre à mettre en œuvre et n’affectera jamais vos visiteurs. Si un navigateur ne prend pas en charge la propriété de visibilité du contenu parce qu'il s'agit d'une ancienne version, rien ne se passera, même si WP Rocket 3.17 est activé.

Cette fonctionnalité présente également peu de risques pour votre site Web : il est très peu probable qu'elle casse quoi que ce soit.

En passant, nous avons envisagé de publier une telle fonctionnalité il y a trois ans. À cette époque, la fonctionnalité était basée sur JavaScript et nécessitait un test à long terme pour vérifier l’impact potentiel sur le référencement. Entre-temps, la propriété CSS content-visibility bénéficiait de davantage de support, offrant une solution viable et plus simple. L’INP devenant de plus en plus pertinent pour l’optimisation des performances Web, la publication de cette fonctionnalité est devenue une évidence.

Comment fonctionne le rendu paresseux automatique

Revenons à notre analogie avec le jeu vidéo.

Imaginez que vous jouez à un jeu. Au fur et à mesure que vous avancez votre personnage, le jeu affiche de nouvelles zones avant de les atteindre. C’est exactement ainsi que fonctionne le rendu paresseux automatique pour votre site Web.

L'introduction du rendu paresseux automatique a été rendue possible grâce au précédent, WP Rocket 3.16. Notre version précédente introduisait 2 améliorations cruciales :

• Nous avons activé le cache mobile séparé par défaut.
• Nous avons introduit la détection et l'optimisation des images critiques (images au-dessus de la ligne de flottaison) grâce à une balise collectant des informations réelles sur les éléments à optimiser. La fonctionnalité 3.17 étendra simplement ce que la balise suit pour fournir des informations précises sur la mise en page et rendre possible la nouvelle optimisation.

Et voici ce qui se passe lorsque WP Rocket 3.17 est activé.

Lorsqu'un utilisateur arrive sur votre page, la nouvelle fonctionnalité ne permettra pas au navigateur de tout restituer immédiatement. Au contraire, le navigateur affichera les éléments de la page uniquement lorsque les utilisateurs seront proches de ce point de la page – comme le jeu ne chargera la zone suivante que lorsque vous vous en approcherez. Plus la page est longue, plus le rendu paresseux sera efficace.

C'est pourquoi la nouvelle version est particulièrement bénéfique pour :

1. De longues pages avec beaucoup de contenu, comme des articles de blog ou des listes de produits.
2. Pages contenant des éléments complexes dont le rendu prend plus de temps, tels que des animations non composites (par exemple, des animations de canevas et des arrière-plans vidéo).

WP Rocket est le premier plugin à appliquer avec précision cette fonctionnalité automatique sur toutes vos pages. En effet, WP Rocket 3.17 analyse la structure de la page et détecte les éléments sur lesquels un rendu paresseux peut être appliqué. Le plugin traite chaque page individuellement, ordinateur et mobile séparément, pour être sûr que nous obtenons les éléments précis sans manquer aucune opportunité.

Il n’y a pas d’option de signalement – ​​vous n’avez rien à faire pour l’activer. Dès que WP Rocket sera mis à jour vers la version 3.17, cela fonctionnera.

Comment le rendu paresseux peut améliorer l'interaction avec le niveau de peinture suivant

Voyons maintenant comment WP Rocket 3.17 peut améliorer votre note INP.

Tout d’abord : selon Google, une bonne réactivité signifie que votre score INP doit être inférieur à 200 millisecondes.

Avant de plonger dans les résultats des tests que nous avons effectués, il est également important de souligner que les améliorations de performances que votre site Web peut obtenir dépendent de son niveau d'optimisation actuel. Si votre site est déjà bien optimisé, vous constaterez peut-être de subtiles améliorations dans votre note INP. Cependant, s'il y a place à l'amélioration, vous pourriez bénéficier d'une augmentation plus spectaculaire du score INP et des notes LCP et FCP.

Pour mesurer l'amélioration des performances INP, nous vous recommandons d'utiliser un outil comme INP Debugger de DebugBear, qui vous donnera une image claire de la réactivité de votre site avant et après l'activation de WP Rocket 3.17 et de sa fonctionnalité automatique Lazy Rendering.

Si vous vous demandez pourquoi cette fois nous n'utiliserons pas l'outil PageSpeed ​​Insights, basé sur Lighthouse, c'est parce que INP est une métrique de champ et est calculé sur l'interaction. Et Lighthouse ne le mesure pas, du moins pour le moment.

Examinons un exemple concret pour vous montrer les améliorations potentielles que WP Rocket 3.17 peut apporter. Nous avons testé un site Web de commerce électronique avec beaucoup de contenu à parcourir : plusieurs sections, images de produits et listes d'articles. À des fins de tests, nous avons également ajouté une charge de travail JavaScript au site Web pour garder le fil principal occupé et vérifier l'efficacité du rendu paresseux afin d'améliorer la situation.

Voici ce que nous avons trouvé.

Avant d'activer WP Rocket 3.17 avec le rendu paresseux automatique

Le résultat INP est de 204 ms. Comme vous pouvez le constater, le résultat met en évidence un besoin d’amélioration :

D'un point de vue plus technique, nous avons également analysé le rendu du navigateur dans l'onglet Performances de Chrome DevTool. La capture d'écran met en évidence la longueur des tâches et le temps de rendu : 2610 ms.

Après avoir activé WP Rocket 3.17 avec le rendu automatique paresseux

Le résultat INP est désormais de 146 ms. Cette fois, le grade INP est en vert.

Cette fois, l'onglet Performances de Chrome DevTool montre comment les tâches longues ont été optimisées et le temps de rendu a été réduit à 2 325 ms.

Comme vous pouvez le constater, nous avons testé exactement la même page. La seule différence est que le second a le rendu automatique paresseux activé, contrairement au premier.

L'amélioration est substantielle. Nous sommes passés d'une page avec un score INP orange – qui nécessitait d'être amélioré – à une page affichant un résultat vert, ce qui est recommandé pour garantir la réactivité et offrir une excellente expérience utilisateur.

Conclusion

Que vous dirigiez un blog, une boutique en ligne ou tout autre type de site Web riche en contenu, WP Rocket 3.17 et sa fonction de rendu paresseux peuvent automatiquement améliorer une métrique clé comme INP.

Boosting INP améliore la réactivité de la page, donc l'expérience utilisateur. Cela peut aider à garder les visiteurs sur votre site plus longtemps, à les convertir et à revenir – et c'est pourquoi vous ne devez pas négliger son optimisation.

Pourquoi ne pas voir par vous-même comment améliorer la note INP ? Mettez à jour WP Rocket vers la version 3.17 ou essayez-le. Nous serions ravis de savoir comment la nouvelle version majeure fonctionne pour vous. Faites-nous savoir dans les commentaires votre expérience avec WP Rocket 3.17 et les améliorations que vous obtenez !