Google se plaint de la lenteur de l'interaction avec Next Paint (INP) sur les sites Discourse

Salut, tout d’abord, j’aimerais dire que je ne suis pas du genre à courir après le SEO ou à me démener pour satisfaire les exigences préférences de Google quant à l’apparence et au fonctionnement de mon propre site. Mais il est bon de savoir que Google vient de m’envoyer un e-mail indiquant que mon site doit s’améliorer sur leur nouvelle métrique « Core Web Vital » qui va bientôt peser très lourd dans leur classement :

Voici le rapport sur Discourse Meta, qui est un peu moins bon que mon propre site pour l’INP (372 ms contre 208 ms) :

Étant donné que Discourse est essentiellement une application web Javascript, j’imagine qu’il ne sera pas facile d’améliorer ces métriques. Mais encore une fois, Google semble baser son classement sur la version sans Javascript que ses robots d’exploration voient, malgré qu’il prétende émuler un téléphone Moto G Power…

…donc je ne crois pas vraiment ni ne me soucie trop de ce que leurs algorithmes et classements déterminent. Mais c’est une information utile à connaître pour les développeurs et les administrateurs de sites.

6 « J'aime »

Salut @rahim123 - l’amélioration de l’INP est l’une des motivations pour passer de l’animation de navigation de page de Discourse d’un ‘spinner’ pleine page à un curseur. Nous n’avons déployé ce changement sur Meta que la semaine dernière, il est donc un peu tôt pour que le changement apparaisse dans les données d’enquête sur les Core Web Vitals de Google.

Mais soyez assuré que nous surveillons les données et que nous examinerons les modifications supplémentaires si nécessaire.

12 « J'aime »

Merci beaucoup pour votre réponse. Je suis heureux d’apprendre que vous êtes au courant de ce problème.

J’ai utilisé l’outil de test d’URL en direct de Google https://pagespeed.web.dev, donc cela ne devrait-il pas déjà être inclus dans le classement ? Et comme Google voit la version sans Javascript, je ne suis pas sûr de la façon dont il prend en compte le spinner par rapport au curseur ? L’INP n’est-il pas lié à la navigation d’une page à une autre au sein du même site Web ? Dans ce cas, je ne comprends pas vraiment comment il mesure cette métrique pour une URL unique. Désolé pour mon ignorance, je suis loin d’être un expert sur ces détails concernant l’architecture des pages et les derniers caprices de Google.

1 « J'aime »

Oui, « pagespeed insights » et le robot d’exploration de Google récupèrent la version HTML de base de Discourse. Donc, malheureusement, ces outils à la demande ne nous sont pas très utiles.

Pour le classement dans les moteurs de recherche, Google utilise des données réelles collectées auprès des utilisateurs de Chrome sur ordinateur et Android. Ils rendent ces données publiques sur Overview of CrUX  |  Chrome UX Report  |  Chrome for Developers. Malheureusement, il y a un délai de 1 à 2 mois entre la collecte et la publication, c’est pourquoi nous devons attendre un peu avant de pouvoir voir l’impact réel de ce nouveau curseur de chargement.

Pour voir les données de Google pour votre propre site (ou pour Meta), allez ici et entrez le domaine : https://developer.chrome.com/docs/crux/dashboard/. Une fois que vous avez chargé le rapport, il y a un onglet pour INP sur le côté gauche. Si ma mémoire est bonne, Google se concentre sur les données « mobiles » pour le classement dans les moteurs de recherche, vous devrez donc utiliser le filtre d’appareil pour y accéder.

Données mobiles pour Meta :

L’objectif est d’obtenir au moins 75 % de « bon » - cela signifiera que la valeur P75 de l’INP que Google utilise pour le classement dans les moteurs de recherche est inférieure à 200 ms.

9 « J'aime »

Wow, je n’avais jamais entendu parler de ça. Merci beaucoup pour l’explication !

3 « J'aime »

À titre d’information, j’utilise exclusivement le composant de thème discourse-loading-slider depuis la mise en ligne de mon site. Je suis toujours dans la zone « à améliorer »

En particulier, il semble que les pages principalement consultées par des comptes anonymes venant de Google obtiennent les moins bons résultats. Cela pourrait être spécifique à mon forum, mais j’ai pensé que cela valait la peine d’être partagé.

4 « J'aime »

David, cela semble une énorme amélioration perçue, bien que j’aime bien l’ancien spinner :wink: Peux-tu me rappeler quel est le changement technique de haut niveau dans l’approche qui facilite cette amélioration ? A-t-elle été documentée quelque part ?

L’amélioration de l’INP ?

Avec l’ancienne roue, la séquence était :

  1. Cliquer sur le lien
  2. Ember démonte tout le DOM et nettoie les composants de l’ancienne route
  3. La roue est rendue à l’écran
  4. Une fois la requête réseau résolue, la nouvelle route est rendue au DOM

Avec le curseur, nous sautons l’étape 2. Le curseur est rendu immédiatement, sans avoir à attendre le processus de démontage coûteux.

Je devrais clarifier ici : la principale motivation pour nous de changer la valeur par défaut est l’amélioration de l’expérience utilisateur. L’amélioration de la métrique INP est également appréciable, mais ce n’est pas la raison principale du changement.

5 « J'aime »

Oui, c’est la perception qui compte le plus et ne pas supprimer le contenu trop tôt est une belle touche. Excellent travail !

1 « J'aime »

Il est très important de noter que l’INP n’aura un impact sur le classement du site qu’en mars 2024. Les améliorations sur lesquelles nous travaillons aujourd’hui ont donc le temps d’être itérées avant que cela ne commence à affecter Google.

7 « J'aime »

J’aime beaucoup l’ancien aussi. Serait-il possible d’avoir un composant de thème (ou peut-être un réglage utilisateur) pour l’ancien spinner ?

3 « J'aime »

Il existe un paramètre système pour revenir en arrière : indicateur de chargement de page

C’est vrai, mais certaines personnes aiment le nouveau, et je préférerais ne pas toucher à leurs paramètres.

De plus, si ma mémoire est bonne, ce commutateur devrait bientôt être supprimé.

2 « J'aime »

Oh, je pensais qu’ils l’avaient ajouté récemment ?

C’est vrai, mais regardez ceci :

4 « J'aime »

Pour vos propres données de domaine comme meta.discourse.org, il y a toujours un rapport récent dans Google Search Console, caché dans « Expérience » –> « Core Web Vitals » –> « Mobile (Ouvrir le rapport) » et faites défiler jusqu’à « Problème INP : plus long que 200 ms (mobile) ».

Edit : Ceci est davantage à l'échelle de faible probabilité/impact élevé. INP ne prend en compte que le p75.

L’INP pourrait être influencé par les procédures de post-?cooking? (= amélioration de fonctionnalités via JS au chargement) du cœur de Matomo ou des plugins qui effectuent des tâches ‘lourdes’ en JS ayant un long ‘render blocking time’.

Surtout lorsque l’utilisateur passe à un autre fil, il y a environ 10 à 20 messages “cuits” en même temps.

Ici, il est toujours bon de diviser les tâches pour les messages individuels en setTimeout() séparés pour permettre au navigateur de faire du rendu entre les tâches individuelles et de ne pas attendre la fin de l’ensemble du processus.

Par exemple, quelque chose comme ceci :

var initializeSliderSlickItem = function (item) {
  /* effectuez l'initialisation réelle ici */
  var $this = $(item);
  […];
};

$('.slider-slick').each(function () {
  var item = this;
  setTimeout(initializeSliderSlickItem, 0, item);
});

Êtes-vous sûr de cela ? Lorsque vous passez d’un sujet à un autre, la prochaine peinture sera le chargeur en haut de la page, qui démarre immédiatement.

1 « J'aime »
Edit : Ceci relève davantage de l'échelle faible probabilité/impact élevé. INP ne prend en compte que le p75.

… et ensuite la cuisson commence. Si l’utilisateur clique ensuite sur quelque chose pendant qu’une tâche de cuisson Discourse est en cours, Google mesure l’INP comme le temps jusqu’à la prochaine peinture. La prochaine peinture peut apparaître au plus tôt à la fin de la tâche de cuisson en cours.

Voir web.dev: INP : Qu’est-ce qu’une interaction

“La vie d’une interaction. Un délai d’entrée se produit jusqu’à ce que les gestionnaires d’événements commencent à s’exécuter, ce qui peut être causé par des facteurs tels que de longues tâches sur le thread principal [par exemple, la « cuisson »]. Les gestionnaires d’événements de l’interaction s’exécutent ensuite, et un délai se produit avant que la prochaine image ne soit présentée.”


Google prend en compte le temps de blocage de peinture le plus long pour l’INP s’il y a plusieurs événements bloquants “tout au long du cycle de vie de la page”. Cycle de vie comme :

  1. Le thread URL “A” s’ouvre
  2. Le spinner s’affiche
  3. Cuisson des posts dans le thread “A”
  4. Clic 1 : l’utilisateur clique sur le lien vers le thread “B”
  5. Le spinner s’affiche
  6. Chargement du thread “B”
  7. Cuisson des posts dans le thread “B”
  8. Clic 2 : l’utilisateur clique sur le lien vers le thread “C” pendant que le thread “B” est encore en cours de cuisson
  9. L’action de cuisson en cours sur le thread “B” se termine ( ← compte dans l’INP pour le Clic 2 )
  10. Le spinner s’affiche
  11. Chargement du thread “C”
  12. Cuisson des posts dans le thread “C”

Aussi web.dev: INP : Qu’est-ce qu’une interaction

“L’INP est calculé lorsque l’utilisateur quitte la page, ce qui donne une valeur unique représentative de la réactivité globale de la page tout au long de son cycle de vie.”

Heureusement, l’utilisation du p75 de la métrique signifie que personne n’a vraiment à s’inquiéter du scénario que vous avez dépeint, et il n’est clairement pas représentatif des interactions normales avec Discourse.

2 « J'aime »