Optimiser les interactions sur le site web : stratégies clés pour améliorer l'INP et l'expérience de l'utilisateur

Qu'est-ce que l'Interaction to Next Paint (INP) ?

Interaction to Next Paint (INP) , est une mesure de Core Web Vitals qui mesure les temps de réponse des pages web. Il remplacera en mars 2024 l'ancien First Input Delay (FID).Comprendre le FID et l'INPLa FID mesure la réactivité uniquement lorsque le site est chargé pour la première fois, tandis que l'INP examine le temps de réponse du site aux actions de l'utilisateur tout au long de la visite.

L'INP est un indicateur qui mesure la rapidité avec laquelle une page web réagit aux actions de l'utilisateur, par exemple lorsque vous cliquez sur un bouton. Il fonctionne de la manière suivante :

1. opération de l'utilisateurVous effectuez une action sur une page web, par exemple en cliquant sur un bouton.
2. Envoyer une demandeVotre navigateur envoie une demande au serveur du site web pour charger un nouveau contenu.
3. Accès au contenuLe serveur traite la demande et renvoie le nouveau contenu à votre navigateur.
4. Afficher le contenuVotre navigateur reçoit le contenu et l'affiche sur la page.
5. temps de mesureLe navigateur calcule le temps qui s'écoule entre le moment où vous cliquez et le moment où le contenu est entièrement affiché et le rapporte sous la forme d'un score INP.

Pourquoi l'INP est-il important ?

• Améliorer l'expérience des utilisateursUn score INP faible signifie que la page web est réactive et que l'utilisateur n'a pas besoin d'attendre pour voir les résultats, ce qui rend l'expérience utilisateur plus fluide.
• Aide à l'optimisation des moteurs de recherche (SEO)INP : L'INP est l'un des facteurs utilisés par Google pour évaluer l'expérience d'un site web et influer sur son classement dans les résultats de recherche. Un bon score INP peut aider votre site web à mieux se classer dans les résultats de recherche.
• Réduire le taux de rebondSi une page web est réactive, les utilisateurs sont plus susceptibles de rester sur la page pour voir plus de contenu plutôt que de la quitter parce qu'ils attendent.

Différence entre l'INP et d'autres mesures du réseau central

L'INP est différent d'autres mesures telles que le décalage cumulatif de la mise en page (CLS) et le tirage maximal du contenu (LCP). Le CLS mesure la fréquence et l'ampleur du mouvement du contenu sur une page web, tandis que le LCP se concentre sur la vitesse à laquelle le chargement de l'élément de contenu le plus volumineux de la page est achevé.

Comment mesurer l'INP ?

Les valeurs INP sont exprimées en millisecondes (ms). La valeur INP idéale doit être inférieure à 200 ms, ce qui correspond à un site web très réactif. Si la valeur INP est comprise entre 200 millisecondes et 500 millisecondes, cela indique que les performances peuvent être améliorées ; au-delà de 500 millisecondes, la réponse est considérée comme lente et doit être optimisée.

Qu'est-ce qui affecte la valeur INP ?

La valeur INP, c'est-à-dire la vitesse à laquelle un site web répond aux actions de l'utilisateur, peut être affectée par plusieurs facteurs :

• Taille et complexité des pagesLes pages plus grandes ou plus complexes peuvent prendre plus de temps pour répondre aux actions de l'utilisateur.
• Nombre de fichiers JavaScript et CSS chargésPlus le nombre de fichiers chargés est important, plus le site peut mettre de temps à répondre aux actions de l'utilisateur.

Comment mesurer la valeur INP de mon site web ?

utiliserGoogle PageSpeed InsightsOutil permettant de mesurer l'INP et d'autres paramètres de performance du site web. Cet outil examine votre site web et fournit des suggestions d'amélioration pour vous aider à l'optimiser selon les meilleures pratiques. Il vous indiquera également la vitesse de chargement de votre site sur les appareils mobiles et les ordinateurs de bureau.

Ce que disent les résultats de PageSpeed Insights

PageSpeed Insights fournit deux types de résultats :

• Données réelles des utilisateursDonnées d'utilisateurs Chrome réels, affichées en haut du rapport, pour vous aider à comprendre les performances de votre site dans le monde réel.
• Données de laboratoireCette partie des données est basée sur des essais dans des conditions contrôlées, fournissant des informations techniques détaillées et des recommandations d'optimisation.

Les rapports ci-dessous présentent les mêmes mesures, mais elles proviennent d'un environnement de laboratoire contrôlé fonctionnant sur Google Lighthouse. Ces données peuvent être utilisées pour tester de nouvelles fonctionnalités avant leur lancement.

Si les données INP du site ne sont pas disponibles, vous pouvez vérifier le temps de blocage total (TBT). Cette mesure nous aide à comprendre combien de temps la page ne répond pas aux actions de l'utilisateur pendant le chargement du site.

Dans la section "Résultats du diagnostic", vous trouverez également des suggestions pour améliorer les principales mesures web de votre site, ce qui peut vous aider à améliorer l'expérience de l'utilisateur et les performances de votre site.

Comment optimiser l'INP

1、Optimiser JavaScript

JavaScript est un élément clé de nombreux sites web et est responsable de l'ajout de fonctionnalités interactives. Toutefois, si le code JavaScript n'est pas exécuté efficacement, il peut ralentir la réactivité d'un site web, car il s'exécute sur le fil principal du navigateur, qui est également responsable du rendu de la page web.

Comment optimiser JavaScript pour accélérer la réactivité du site web ?

1. Réduire les fichiers JavaScriptEn réduisant la taille du fichier, il est possible d'accélérer le chargement et l'exécution de JavaScript.
2. Activer la compression GZipCette méthode est très répandue pour réduire la taille des fichiers d'un site web et accélérer le transfert de données.
3. Utiliser le cadre JavaScriptLes Frameworks : Les Frameworks tels que AngularJS ou jQuery peuvent vous aider à organiser et gérer le code JavaScript plus efficacement et à en améliorer l'exécution.
4. Utilisation de réseaux de diffusion de contenu (CDN)Les CDN peuvent servir des fichiers JavaScript à partir de serveurs proches de l'utilisateur, ce qui peut réduire considérablement les temps de chargement.

2、Utiliser Web Worker

Supposons que votre site web contienne un grand nombre de tâches de traitement d'images, de vidéos et de données, qui nécessitent beaucoup de calculs. Avec Web Worker, vous pouvez déplacer ces tâches lourdes vers un thread d'arrière-plan afin d'éviter que la page web ne traîne ou ne se fige et que l'expérience de l'utilisateur soit plus fluide.

Comment configurer Web Worker ?

Pour utiliser Web Worker, vous devez préparer deux fichiers JavaScript :

1. main.jsCe fichier est utilisé pour démarrer le Web Worker et gérer la communication avec lui.
2. worker.js(Web Worker Script) : ce fichier contient le code qui sera exécuté en arrière-plan.

suivremain.jsExemples de :

// main.js
if (window.Worker) {
  // Créer une nouvelle instance de travailleur
  const myWorker = new Worker('worker-script.js') ; // Envoyer un message au worker.
  // Envoi d'un message au travailleur
  myWorker.postMessage('Hello Worker!') ; // Écoute des messages du travailleur.
  // Écoute des messages du travailleur
  myWorker.onmessage = function(e) {
    myWorker.onmessage = function(e) { console.log('Message received from worker', e.data) ; } ; // Écoute des messages du travailleur.
  } ; } else { console.log('Message received from worker', e.data) ; }
} else {
  console.log('Votre navigateur ne prend pas en charge les Web Workers.') ; } ; }
}

L'autre estworker.jsqui contient des tâches pour les agents du réseau. Voici un exemple :

// worker.js
onmessage = function(e) {
  console.log('Message received from main script', e.data) ; // Effectuer un calcul lourd ou un traitement de données ici.
  // Effectuer un calcul lourd ou un traitement de données ici
  // Puis renvoyer un message au script principal
  postMessage('Hello Main Script!') ; }
}

Pour inclure ces scripts dans votre site web, consultez la documentation relative à votre technologie ou plateforme particulière et suivez la procédure standard.

Pour les utilisateurs de WordPress, utilisezwp_enqueue_scriptFunctions inclut le script Web Worker dans le fichier Functions.php du thème.

3. décomposition des tâches longues

Lorsqu'un utilisateur navigue sur un site de commerce électronique contenant de nombreuses données et images de produits, un site dont la tâche JavaScript est trop volumineuse et non optimisée peut consommer beaucoup de ressources et ralentir le site. Il peut en résulter des pages qui se chargent lentement et qui ne répondent même pas en temps voulu au clic ou au défilement de l'utilisateur.

Pour éviter cela, nous pouvons diviser ces tâches importantes en plusieurs tâches plus petites afin que le navigateur puisse être plus flexible et ne soit pas bloqué par une seule tâche importante.

Comment décomposer les tâches longues ?

1. Réglage du délai d'attente: Utilisation de l'interface JavaScriptsetTimeoutvous pouvez reporter la tâche à un moment ultérieur afin qu'elle n'occupe pas continuellement le fil d'exécution principal.
2. Demande de rappel au repos: UtilisationrequestIdleCallback qui permet à vos tâches de s'exécuter lorsque le navigateur est inactif sans interférer avec la fonctionnalité principale de la page web.

4. donner la priorité à la réactivité des intrants

S'assurer que les pages web répondent rapidement aux actions de l'utilisateur est essentiel pour offrir une bonne expérience à l'utilisateur. Voici quelques techniques qui peuvent aider les sites web à réagir plus rapidement aux entrées de l'utilisateur :

1. Différer le JavaScript non critiqueCertains codes JavaScript n'ont pas besoin d'être exécutés immédiatement lors du chargement de la page et peuvent être différés afin de traiter d'abord l'interaction avec l'utilisateur.
2. un étranglementContrôle de la fréquence des appels de fonction : Contrôle de la fréquence des appels de fonction. Par exemple, dans l'événement scroll, la fonction ne peut être exécutée qu'une fois toutes les quelques centaines de millisecondes pour éviter de ralentir la réponse de la page si elle est exécutée trop souvent.
3. secouerLorsque des événements (par exemple, le redimensionnement d'une fenêtre) sont déclenchés fréquemment, l'utilisation de techniques de désamorçage peut retarder l'exécution d'une fonction jusqu'à ce que l'événement se soit arrêté pendant un certain temps.
4. Utilisation d'écouteurs d'événements passifsPour les événements tels que les défilements et les clics, les auditeurs d'événements marqués comme passifs peuvent indiquer au navigateur de poursuivre d'autres tâches sans attendre la fin du gestionnaire d'événement, améliorant ainsi les performances de défilement et la réactivité de la page.

5. fournir un retour d'information immédiat

Pourquoi le retour d'information immédiat est-il important ?

Lorsqu'un site web traite une demande d'utilisateur sans aucun retour d'information, les utilisateurs peuvent se sentir incertains ou même soumettre des formulaires ou cliquer sur des boutons à plusieurs reprises. Le fait de fournir un retour d'information immédiat améliore non seulement l'expérience de l'utilisateur, mais lui donne également le sentiment que le site est réactif.

Voici quelques façons courantes de donner un retour d'information instantané :

1. Indicateur de chargeLes services d'aide à l'utilisation de l'Internet : afficher une icône de chargement rotative ou une barre de progression lorsque des données sont en train d'être chargées ou qu'une page saute pour indiquer à l'utilisateur que le processus est en cours.
2. Fenêtre contextuelle de confirmationLorsque l'utilisateur effectue une opération spécifique, telle que l'ajout d'un article au panier, une boîte de message s'affiche pour confirmer que l'opération a été effectuée avec succès.
3. Retour d'information sur la validation des formulairesValidation instantanée lorsque les utilisateurs saisissent des données, par exemple en vérifiant si une adresse électronique est conforme au format, et en affichant immédiatement un message d'alerte lorsque le format est incorrect, ce qui évite à l'utilisateur de ne connaître l'erreur qu'après avoir envoyé sa demande.

Avantages de l'INP pour les entreprises

existentEconomic TimesUne étude a montré que l'augmentation de l'INP réduit considérablement le taux de rebond d'un site web - de 50%. Cela signifie que les utilisateurs sont plus susceptibles de rester sur le site et de consulter davantage de contenu. Un faible taux de rebond est généralement associé à un engagement et à une satisfaction accrus des utilisateurs, ce qui est bénéfique pour tout site web commercial.

Résumé :

L'INP est un indicateur de performance important qui mesure la réactivité d'un site web aux actions de l'utilisateur. Un INP bien optimisé améliore non seulement l'expérience de l'utilisateur, mais aussi le classement dans les moteurs de recherche et le taux de rebond.

Pour optimiser l'INP, nous avons discuté de plusieurs stratégies, notamment l'optimisation de l'exécution de JavaScript, l'utilisation de Web Workers pour les tâches d'arrière-plan et le fractionnement des tâches longues pour éviter le blocage du fil principal. En outre, nous avons souligné l'importance d'un retour d'information immédiat, qui peut être utilisé pour donner aux utilisateurs l'impression que le site est actif et réactif grâce à des indicateurs de chargement, des fenêtres pop-up de confirmation et un retour d'information sur la validation des formulaires.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.