Cette étude de cas décrit un workflow étape par étape de débogage et d'amélioration de l'INP
dans React, utilisé par Trendyol à l'aide d'outils Google tels que PageSpeed
Insights (PSI), les outils pour les développeurs Chrome et l'API scheduler.yield.
La page de fiche produit est deux composants essentiels d'un site Web d'e-commerce. (PLP) et la page d'informations détaillées sur le produit (PDP). Le trafic de l'e-commerce provient souvent les pages de fiches produit, que ce soit par le biais de campagnes par e-mail, de réseaux sociaux publicitaires. Par conséquent, il est essentiel de s'assurer que l'expérience PLP soigneusement conçus pour réduire le temps nécessaire à l'achat. Définition des priorités la qualité de l'expérience utilisateur est essentielle pour réussir. Publications de recherche comme Des millisecondes, des millions, nous avons déjà l'impact des performances Web sur les utilisateurs la volonté de dépenser de l'argent et d'interagir avec des marques en ligne.
Trendyol est une plate-forme d'e-commerce comptant environ 30 millions de clients et 240 000 vendeurs, ce qui nous a poussés à devenir la première entreprise en Turquie dont la valeur est supérieure à 10 milliards de dollars, et l'une des principales plates-formes d'e-commerce au monde.
Atteindre son objectif d’offrir la meilleure expérience utilisateur possible à grande échelle tout en conservant la flexibilité du contenu et en travaillant avec une ancienne version L'équipe React, Trendyol s'est concentrée sur l'interaction to Next Paint (INP) comme métrique clé pour s'améliorer. Cette étude de cas décrit le parcours de Trendyol visant à améliorer INP sur sa PLP, ce qui a entraîné une réduction de 50% de l'INP et une augmentation de 1% de la recherche la métrique métier associée aux résultats.
Processus d'investigation de l'INP de Trendyol
INP mesure la réactivité d'un site Web aux entrées utilisateur. Un bon INP indique que le navigateur soit capable de répondre rapidement et de manière fiable à toutes les entrées utilisateur repeindre la page, ce qui est un élément clé d'une bonne expérience utilisateur.
L'objectif de Trendyol pour améliorer INP sur son PLP a commencé par une analyse approfondie l'expérience utilisateur avant toute amélioration. D'après un rapport PSI, l'expérience utilisateur réelle du PLP avait un INP de 963 millisecondes sur mobile, comme illustré dans la figure suivante.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Pour garantir une bonne réactivité, les propriétaires de sites doivent viser un INP inférieur ou égal à 200 millisecondes, ce qui signifie qu'à cette époque, l'INP de Trendyol se trouvait "médiocre" la plage d'adresses IP.
Heureusement, l'outil PSI fournit ces deux types de données pour les pages incluses dans le guide Utilisateurs de Chrome
rapport d'expérience utilisateur (CrUX) et des données de diagnostic détaillées de laboratoire. Le laboratoire
l'audit du temps d'exécution JavaScript de Lighthouse suggère que
Le script search-result-v2 a occupé le thread principal plus de temps que les autres
de scripts sur la page.
<ph type="x-smartling-placeholder">Pour identifier les goulots d'étranglement dans le monde réel, nous avons utilisé le panneau "Performances" dans Chrome les outils de développement pour résoudre les problèmes liés à l'expérience PLP et identifier la source de l'erreur problème. Émuler les performances sur mobile avec un processeur quatre fois plus lent dans les outils pour les développeurs Chrome a révélé une tâche de 700 à 900 millisecondes sur le thread principal. Si la est occupé par d'autres tâches pendant plus de 50 millisecondes, il peut n'est pas en mesure de répondre rapidement aux commentaires des utilisateurs, ce qui entraîne une mauvaise l'expérience utilisateur.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">La tâche la plus longue a été causée par un rappel de l'API Intersection Observer sur le dans un script de résultats de recherche dans un composant React. À ce stade, nous avons commencé découper cette longue tâche en petits fragments pour donner au navigateur opportunités de répondre à des tâches prioritaires, y compris les interactions des utilisateurs.
Il s'avère que l'utilisation de l'opération setState, qui déclenche React,
le rendu dans le rappel Intersection Observer a un coût élevé.
ce qui peut poser problème pour les appareils bas de gamme, car ils occupent le thread principal pour
Trop long.
Une méthode utilisée par les développeurs pour diviser les tâches en tâches plus petites
implique setTimeout. Nous avons utilisé cette technique pour reporter l'exécution
setState dans une tâche distincte. Bien que setTimeout autorise le report
JavaScript ne permet pas de contrôler la priorité. Cela a conduit
de participer à la phase d'évaluation de scheduler.yield afin de garantir
poursuite de l'exécution de notre script après avoir cédé au thread principal:
/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
if('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
entries.forEach(handleIntersection);
const maxNumberOfEntries = Math.max(...this.intersectingEntries);
if (Number.isFinite(maxNumberOfEntries)) {
await this.yieldToMain();
this.setState({ count: maxNumberOfEntries });
}
}, { threshold: 0.5 });
L'ajout de cette méthode de rendement au code PLP a permis d'améliorer l'INP, car le la tâche longue principale a été divisée en une série de tâches plus petites, ce qui permet les tâches prioritaires, comme les interactions utilisateur et les tâches d'affichage ultérieures, pour ont lieu plus tôt qu'ils ne l'auraient fait autrement.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Notez que Trendyol utilise le framework PuzzleJs pour implémenter une micro-interface à l'aide de React v16.9.0. Avec React 18, les mêmes performances mais pour diverses raisons, Trendyol n'est pas en mesure en temps réel.
Résultats commerciaux
Pour mesurer l'impact de l'amélioration de l'INP mise en œuvre, nous avons effectué un test A/B pour découvrir l'impact des changements sur les métriques commerciales. Dans l'ensemble, les modifications que nous avons apportées au PLP une amélioration significative, avec une réduction de 50% de l'INP ainsi qu'une réduction de 1% d'augmentation des taux de clics depuis la page des fiches vers la page d'informations détaillées sur le produit par session utilisateur. La figure suivante montre comment INP a amélioré le PLP au fil du temps:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Conclusion
L'optimisation de l'INP est un processus complexe et itératif, mais il peut être simplifié avec un flux de travail clair. Une approche simple du débogage et de l'amélioration l'INP de votre site web varie selon que vous collectez ou non vos propres données de champ. Si vous ne le sont pas, PSI et Lighthouse constituent un bon point de départ. Une fois que vous avez identifié pages présentant des problèmes, vous pouvez utiliser les outils de développement pour examiner plus en détail et tenter de reproduire les problèmes de performances.
Cédez de temps en temps au thread principal pour donner au navigateur plus
les occasions de faire un travail urgent rendra votre site Web plus réactif, ce qui garantira
que vos clients bénéficient d'une
meilleure expérience utilisateur. API de planification plus récentes
comme scheduler.yield() facilitent cette tâche.
Un grand merci à Jeremy Wagner, Barry Pollard et Houssein Djirdeh de Google et l'équipe d'ingénierie de Trendyol pour leur contribution à ce travail.