Maîtriser l'INP : comment tirer parti de la visibilité du contenu pour une réactivité améliorée

Voulez-vous connaître le secret des pages Web réactives, d'une UX plus fluide et d'un excellent score INP ?

C'est un travail de rendu efficace.

Cela est généralement réalisé en contrôlant le rendu du contenu hors écran, déchargeant ainsi le navigateur de l'exécution de tâches qui ne sont pas immédiatement nécessaires lors du chargement initial de la page.

Dans les lignes suivantes, vous apprendrez comment exploiter la propriété CSS content-visibility pour améliorer considérablement les performances de votre site, booster vos Core Web Vitals et améliorer l'expérience utilisateur.

Continuer à lire.

Quantification de la réactivité avec l'interaction avec la peinture suivante (INP)

90 % du temps d'un utilisateur sur une page est passé après son chargement.

En d’autres termes, aussi crucial que d’investir des efforts pour accélérer le chargement initial de votre page, il est tout aussi important de savoir comment votre site Web se comporte une fois que l’utilisateur commence à interagir avec lui.

Est-ce que c'est problématique ? Est-ce qu'il permet un défilement fluide ? Est-ce réactif ?

Toutes les réponses sont cachées derrière votre score INP.

L'interaction avec Next Paint est une mesure de performances centrée sur l'utilisateur et succède au First Input Delay, utilisée pour évaluer la réactivité d'une page Web. Il mesure spécifiquement le temps nécessaire à une page Web pour répondre visuellement à la saisie d'un utilisateur.

Le mot-clé ici est « visuellement ».

Personne ne s'attend à ce que toutes vos interactions soient exécutées en quelques millisecondes. Ce n'est tout simplement pas possible. Tout ce que vous devez faire pour avoir un bon score INP et Core Web Vitals est de fournir un retour visuel immédiat sur les actions de vos visiteurs sur votre site Web.

Pour revenir au début de notre article, s'assurer que le navigateur peut afficher efficacement vos pages est le moyen infaillible d'obtenir d'excellents scores et une expérience du monde réel.

Et les deux facteurs critiques qui ont un impact considérable sur votre vitesse de rendu sont le thread principal et la taille de votre DOM.

Le rôle du thread principal et la taille du DOM

Faisons un peu de ménage avant d'entrer dans les détails techniques.

Votre score INP dépend de la rapidité avec laquelle le navigateur renvoie un retour visuel à l'utilisateur après avoir interagi avec votre site Web.

Pour que le navigateur puisse recevoir, traiter et présenter rapidement les commentaires, son fil principal doit être déchargé des tâches de longue durée.

Certains des plus grands coupables incluent des ressources JavaScript lourdes et, enfin et surtout, une grande taille du DOM.

C'est le processus. Maintenant, démystifions chaque partie.

Le fil conducteur

Le thread principal est le thread d'exécution principal qui gère la plupart des tâches critiques associées au rendu d'une page Web, notamment :

• Analyse HTML, CSS
• Exécution JavaScript
• construction du modèle objet de document (DOM)
• ajout de styles calculés
• produire l'arborescence de mise en page
• créer des enregistrements de peinture

Lorsqu'une tâche prend plus de 50 ms pour être exécutée, elle est considérée comme une tâche longue . Cela se produit principalement en raison de l'exécution de fichiers JavaScript volumineux ou de la grande taille du DOM.

Il faut savoir que le thread principal ne peut exécuter qu’une seule tâche à la fois. Ainsi, plus les tâches sont longues, plus votre site Web apparaîtra lent.

Pourquoi?

Imaginez que vous disposez d'une page Web dotée d'une fonctionnalité interactive, comme une visualisation de données complexe ou une interface utilisateur dynamique. L'utilisateur déclenche une action, par exemple en cliquant sur un bouton, qui lance un calcul JavaScript lourd (l'exécution prend plus de 50 ms).

Cela pose automatiquement plusieurs défis en termes de performances et de réactivité de votre site :

1. Ce long calcul bloque le thread, l'empêchant d'effectuer d'autres tâches telles que la gestion des entrées utilisateur, le rendu des mises à jour ou l'exécution d'autres scripts.
2. Pendant que le calcul est en cours, l'utilisateur peut essayer d'interagir avec d'autres parties de la page - en faisant défiler, en cliquant sur d'autres boutons ou en tapant dans des champs de saisie. Cependant, ces actions ne seront pas traitées immédiatement et la page semblera gelée ou ne répondra pas.
3. Si l'interaction de l'utilisateur était censée déclencher un changement visuel (comme la mise en surbrillance d'un bouton lorsqu'on clique dessus), ce retour sera retardé jusqu'à ce que la tâche de longue durée soit terminée.

En un mot, il est essentiel de décharger les tâches du thread principal, et nous connaissons au moins 7 façons de le faire.

Le DOM (Modèle Objet de Document)

L'une des tâches du fil principal consiste à analyser le code HTML.

Cela signifie que le navigateur transforme les données (balisage HTML) en DOM.

Le DOM représente la structure de la page sous la forme d'une arborescence d'objets que le navigateur utilise pour afficher le contenu à l'écran.

Un DOM plus grand signifie généralement plus de nœuds (éléments, texte, commentaires, etc.) à gérer par le navigateur.

Lorsque vous disposez d’un DOM de grande taille, le thread principal a plus de travail à faire. Il faut plus de temps pour analyser le HTML dans un DOM, appliquer des styles CSS, mettre en page la page et restituer des parties de la page lorsque des modifications se produisent (par exemple via des manipulations JavaScript).

Les grandes arborescences DOM peuvent également ralentir les interactions entre les pages, car chaque interaction de l'utilisateur (comme les clics, les défilements et la saisie) nécessite souvent que le navigateur recalcule les styles et la mise en page de certaines parties du DOM.

Ainsi, une bonne règle de base est qu'une page ait unetaille DOM allant jusqu'à 1 400 nœuds.

Une façon d'améliorer l'efficacité du thread principal et d'atténuer l'impact d'un DOM volumineux consiste à contrôler le rendu du contenu hors écran.

Et cette propriété CSS peut vous aider à le faire…

Tirer parti dela visibilité du contenupour un rendu amélioré

La propriété CSS content-visibility est un ajout révolutionnaire à la boîte à outils d’optimisation des performances Web.

Cette propriété, en particulier dans son paramètre automatique, joue un rôle central dans l'amélioration de l'efficacité du rendu des pages Web. L'attribut content-visibility: auto informe le navigateur qu'il peut ignorer les calculs de rendu et de mise en page pour un élément jusqu'à ce que cela soit nécessaire, ce qui est généralement lorsque l'élément entre dans la fenêtre d'affichage.

Lorsqu'il est appliqué, content-visibility: auto permet au navigateur d'optimiser la charge de travail de rendu. En différant le rendu du contenu non visible, la visibilité du contenu diminue considérablement le temps de chargement initial et réduit la charge de travail sur le thread principal, ce qui entraîne des vitesses de rendu plus rapides et une meilleure réactivité des pages Web.

Un exemple pratique où content-visibility: auto brille est l'optimisation de l'interaction avec Next Paint.

Par exemple, dans un article de blog contenant plusieurs commentaires ou sur un site d'actualités à défilement long, l'application de content-visibility: auto à des commentaires individuels ou à des articles d'actualité qui ne sont pas immédiatement visibles garantit que le navigateur reste réactif aux interactions des utilisateurs et charge rapidement le contenu visible.

Voici un moyen simple de le mettre en œuvre :

Cependant, sachez qu’il ne s’agit pas d’une solution universelle. Vous devez aborder la visibilité du contenu avec équilibre, en testant ses effets sur différents appareils et navigateurs pour garantir des performances cohérentes et éviter les changements de mise en page imprévus ou les problèmes d'accessibilité.

La visibilité du contenu en action

Lors de notre webinaire avec Google sur « Optimiser l'INP », nous avons eu l'occasion de démontrer l'impact de la visibilité du contenu et comment NitroPack l'applique.

Nous avons identifié la cause première d'un mauvais INP à l'aide de plusieurs outils : l'extension Web Vitals, Chrome DevTools et le profileur de performances.

Au cours du processus, nous avons découvert que les principaux responsables d'un score INP de 272 ms étaient deux événements de type « Recalculate » qui prenaient 69,87 ms pour être traités et affectaient 1 139 éléments.

En activant NitroPack sur le site Web, notre service a automatiquement détecté les éléments qui bénéficieraient de la visibilité du contenu : auto . Après une configuration rapide, nous avons réussi à réduire de plus de deux le temps de rendu des tâches longues et le nombre d'éléments affectés :

En outre, le score INP est passé de « à améliorer » à « bon ».

Préparez votre site Web pour l’avenir et passez l’INP en pilote automatique. Obtenez NitroPack maintenant →

Conseils supplémentaires pour optimiser l'INP

Il ne fait aucun doute que la visibilité du contenu offre d’importants gains de performances avec un minimum d’effort.

Cependant, dans certains cas, vous aurez peut-être besoin de performances supplémentaires pour garantir une réactivité fluide et de bons scores INP. Si cela se produit, voici plusieurs autres stratégies d’optimisation INP que vous pouvez utiliser :

1. Cédez au fil conducteur

Comme vous le savez déjà, les performances de votre site dépendent fortement de l'occupation du fil de discussion principal. Céder au thread principal fait référence à la pratique consistant à diviser délibérément les tâches de longue durée en morceaux plus petits et gérables pour éviter de bloquer le thread principal pendant des périodes prolongées.

Ceci peut être réalisé en utilisant des fonctions de rendement telles que :

• planificateur.rendement()
• setTimeout
• requêteAnimationFrame
• requestIdleCallback

2. Réduisez la taille de votre DOM

Le deuxième responsable de la réactivité mentionné était la taille du DOM. Avoir un grand DOM peut entraver considérablement la transmission de l'INP. Pour éviter cela, il est crucial de minimiser sa taille ou, plus précisément, de limiter la profondeur de votre DOM.

Cet objectif peut être atteint grâce à diverses stratégies :

• Évitez les plugins et les thèmes mal codés.
• Limitez l'utilisation de JavaScript pour créer des nœuds DOM.
• Optez pour des alternatives aux constructeurs de pages connus pour produire du HTML excessif.
• Pensez à diviser un site Web d'une seule page en plusieurs pages.
• Évitez de masquer les éléments inutiles avec la propriété CSS display: none.
  

3. Évitez le chevauchement des interactions

Le chevauchement des interactions se produit lorsqu'un utilisateur interagit avec un autre élément de page avant que le rendu de la première interaction ne soit terminé. Cela se produit souvent lors d'une saisie rapide dans des champs de formulaire, où plusieurs frappes se produisent rapidement.

Pour optimiser cela, pensez à :

• Implémentation d'un système anti-rebond sur les entrées pour réduire la fréquence de rappel des événements.
• Utilisation d'AbortController pour annuler les requêtes de récupération en cours, empêchant ainsi la surcharge du thread principal due à des rappels de récupération excessifs.
  

Conclure

N'oubliez pas : INP vise à permettre au navigateur de peindre l'écran suivant le plus rapidement possible.

Les utilisateurs veulent savoir que leurs actions sont en cours de traitement et que quelque chose se passe en arrière-plan.

Et en combinant les fonctionnalités du navigateur, telles que la visibilité du contenu, avec de puissantes solutions de performances Web telles que NitroPack, vous couvrez l'ensemble du spectre de l'expérience utilisateur, du chargement initial à la navigation dans toutes vos pages.

Testez NitroPack gratuitement →