Publié le 22 janvier 2025
QuintoAndar a considérablement amélioré ses performances Web en réduisant son Interaction to Next Paint (INP) de 80%, ce qui a entraîné une augmentation de 36% des conversions d'une année sur l'autre. Conscients de l'importance des sites rapides et responsifs pour l'engagement des utilisateurs, nous avons mis en place un code jaune pour donner la priorité aux performances dans toutes les équipes.
Grâce à des outils tels que la surveillance réelle des utilisateurs (RUM) et des techniques comme async/await pour l'optimisation des tâches longues et les transitions React, QuintoAndar a réussi à réduire les temps d'interaction et à améliorer l'expérience utilisateur. Ces modifications, qui incluent la suppression des pixels tiers et l'optimisation du rendu, ont permis d'améliorer les métriques de performances. Ainsi, 78% des pages atteignent désormais le seuil "bon" de 200 millisecondes ou moins de l'INP, contre 42% au départ. Seules 6,9% des pages offrent une expérience médiocre, contre 32% au départ.
Problème
QuintoAndar est la plus grande plate-forme immobilière du Brésil, avec des annonces également actives dans plusieurs pays d'Amérique latine. La recherche est le plus grand canal en ligne du secteur de l'immobilier. Par conséquent, l'acquisition de trafic organique est essentielle pour son activité. De plus, offrir une excellente expérience utilisateur est essentiel pour fidéliser les utilisateurs et les aider à trouver la maison de leurs rêves.
Au début de l'année 2024, QuintoAndar a réalisé qu'il disposait probablement de la meilleure plate-forme du marché, mais qu'il pouvait améliorer l'expérience utilisateur et ainsi augmenter ses taux de conversion. Cela est devenu évident avec l'introduction de l'Interaction to Next Paint (INP) en tant que signal Web essentiel. De fait, QuintoAndar avait le pire INP par rapport à nos concurrents.
Consciente de l'impact négatif d'un INP élevé sur l'expérience utilisateur, l'équipe chargée du référencement et des performances Web de QuintoAndar a décidé de prendre des mesures. Avec un plan d'action bien défini, il a commencé à travailler sur une série d'améliorations techniques et de contenu visant non seulement à réduire l'INP, mais aussi à améliorer l'engagement des utilisateurs et les taux de clics.
Découvrez comment QuintoAndar a réussi à réduire son INP de 80%, ce qui a entraîné une augmentation significative des conversions et une amélioration de l'expérience utilisateur. Dans cette étude de cas, les stratégies mises en œuvre, les défis rencontrés et les résultats obtenus seront explorés.
Code jaune: Prioriser les performances Web
Conscient que les performances Web sont essentielles non seulement pour l'expérience utilisateur, mais aussi pour la réussite globale de l'entreprise, et sachant qu'un site rapide et réactif améliore l'engagement et la fidélisation des utilisateurs, QuintoAndar a compris que pour obtenir ces résultats, un effort continu et coordonné était nécessaire à tous les niveaux de l'organisation. QuintoAndar a donc déclenché un code jaune.
Le concept de "code jaune" est né chez Google pour répondre au besoin d'accélérer les choses. Il permet à un responsable désigné de recruter n'importe qui dans l'entreprise pour l'aider, quel que soit son projet en cours.
Chez QuintoAndar, le code jaune a servi de système d'alerte interne conçu pour donner la priorité aux améliorations des performances Web au sein de l'entreprise. Lorsque le code jaune a été déclaré, les différentes équipes de l'entreprise ont immédiatement pris des mesures coordonnées pour résoudre les problèmes liés aux performances.
Comment QuintoAndar a identifié les principales opportunités et appliqué des optimisations
Les retards de plus de 200 millisecondes sont perceptibles par les utilisateurs, et tout retard important au-delà de ce délai nuit à l'expérience utilisateur. C'est pourquoi la métrique INP est si importante: elle évalue la réactivité globale d'une page aux interactions des utilisateurs en observant la latence de toutes les interactions (clic, appui et commandes au clavier) survenant au cours du cycle de vie de la page.
Toutefois, améliorer cette métrique nécessite un examen approfondi des détails. Pour QuintoAndar, la première étape a consisté à identifier les étapes et les éléments de l'expérience utilisateur responsables des interactions lentes. Pour ce faire, vous pouvez utiliser des techniques de surveillance des utilisateurs réels (RUM), qui permettent de suivre en détail les interactions lentes. Cela inclut la répartition de l'INP en sous-parties telles que le délai d'entrée, le temps de traitement et le délai de présentation, ainsi que l'analyse des frames d'animation longs (LoAF).
Ce processus a permis d'identifier, par exemple, que certains éléments de l'expérience de recherche de logements entraînaient une durée d'interaction de 4 secondes au 75e centile (affectant 25% des utilisateurs). En optimisant les tâches longues, nous avons obtenu des améliorations significatives pour de nombreuses interactions lentes affectant l'INP. Pour ce faire, nous avons utilisé async/await pour créer des points de rendement dans le code JavaScript de QuintoAndar:
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
De cette manière, l'utilisateur peut recevoir plus rapidement un retour visuel utile. Dans le cas de QuintoAndar, un spinner a été affiché, le thread principal a été cédé à d'autres tâches potentiellement de priorité plus élevée, puis le reste du travail à effectuer initialement a pu reprendre après avoir cédé:
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
Une autre technique largement utilisée, qui est essentielle pour les développeurs d'applications avec React, est l'utilisation de transitions. Étant donné que React est désormais compatible avec les transitions, QuintoAndar peut utiliser le hook useTransition pour mettre à jour l'état de l'application sans bloquer l'interface utilisateur.
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const onInputChange = event => {
setValue(event.target.value) // high-priority
startTransition(() => {
// Time-consuming task—for example, filter and update the list...
});
}
return (
<div className="App">
<input
value={value}
onChange={onInputChange}
placeholder='Start typing...'
/>
</div>
);
}
export default App;
En plus des techniques mentionnées, QuintoAndar a implémenté d'autres améliorations, telles que l'utilisation de la mémorisation, du débouncing, des contrôleurs d'abandon et de la suspension, ce qui a permis d'améliorer l'INP.
Par exemple, dans l'exemple de code précédent, le débouncing pourrait être appliqué, ce qui est une technique qui retarde l'exécution d'une fonction jusqu'à ce qu'une certaine période d'inactivité soit écoulée. Cela permet d'éviter les mises à jour inutiles lorsque l'utilisateur tape rapidement.
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
De plus, l'utilisation du temps de blocage total (TBT) comme proxy pour l'INP a permis à QuintoAndar d'estimer l'impact des grands changements structurels apportés, par exemple:
- Suppression des pixels tiers du client.
- Suppression du CSS-in-JS.
- Optimisations de rendu.
Ces initiatives sont importantes, car elles s'attaquent directement au retard d'entrée, c'est-à-dire au temps écoulé entre le début de l'interaction par l'utilisateur et le début de l'exécution des gestionnaires d'événements enregistrés pour celle-ci. Les délais d'entrée augmentent souvent lorsque d'autres tâches sont en cours d'exécution lorsque l'utilisateur commence à interagir avec la page. Pour QuintoAndar, le délai d'entrée était l'un des principaux contributeurs à l'INP, en raison du grand nombre de tâches exécutées sur le thread principal lors du chargement initial de la page.
Gouvernance des performances Web pour éviter les régressions
Prioriser et résoudre les problèmes de performances ne suffit pas si les régressions ne peuvent pas être évitées. Lorsque QuintoAndar a connu des régressions par le passé, il a compris l'importance de créer un mécanisme de gouvernance robuste pour éviter que ses efforts d'amélioration des performances ne régressent.
La première étape a consisté à établir des mécanismes d'alerte pour chaque métrique, segmentée par type d'application ou expérience, ou les deux. Grâce aux données de métriques collectées auprès d'utilisateurs réels, QuintoAndar peut surveiller les performances et envoyer ces données à une base de données de séries temporelles, où des outils peuvent être utilisés pour générer des tableaux de bord et des alarmes segmentées.
En plus des alarmes fixes, QuintoAndar a également implémenté des alarmes avec des seuils variables qui détectent les résultats inhabituels pour avertir son équipe de développement lorsque les conditions deviennent incontrôlables, même avant d'atteindre le seuil fixe. QuintoAndar a également mis en place un comité bimensuel pour ajuster les seuils de ces alertes.
Pour gérer les incidents, un processus a été créé et suivi de manière stricte à l'aide de runbooks, qui décrivent la procédure à suivre pour chaque type de problème pouvant survenir. Ces runbooks peuvent être suivis par n'importe quel ingénieur.
Enfin, pour éviter que des problèmes d'INP ne soient mis en production, QuintoAndar a implémenté un système de version canari qui déploie une nouvelle version par étapes auprès des utilisateurs (par exemple, de 1 % à 10%, puis de 65 % à 100%). À chaque étape de rééquilibrage, la version canari est vérifiée pour voir si elle entraîne des performances inférieures pour l'utilisateur. Si tel est le cas, un rollback automatique se produit, ce qui empêche les fonctionnalités non optimisées d'être entièrement déployées en production.
Pour rappel, voici les principales mesures prises:
- Alertes bien définies (fixes et variables) avec des comités bimensuels pour affiner les seuils.
- Procédures d'incident avec des runbooks détaillés.
- Versions Canary avec validation des performances pour limiter l'impact des régressions de performances potentielles.
Résultats
La bonne hiérarchisation des performances au sein de l'entreprise, une équipe dédiée aux performances et l'utilisation de techniques d'optimisation ont réduit de 80% l'INP, comme le montrent nos données RUM. Le graphique ci-dessous montre l'INP spécifiquement pour les mobiles, où une baisse rapide initiale est visible. Cette amélioration a été obtenue grâce à la correction des interactions particulièrement problématiques. Il met également en évidence une baisse constante maintenue tout au long de l'année, ce qui démontre l'importance du processus de gouvernance pour éviter les régressions.
Ces améliorations se sont également reflétées dans le tableau de bord CrUX, où QuintoAndar affiche désormais un INP inférieur à 200 millisecondes au 75e percentile, avec 78% de ses pages en dessous de ce seuil et seulement 6,9% de pages offrant une mauvaise expérience, un chiffre qui diminue régulièrement mois après mois.
Ce résultat était crucial pour avoir un impact direct sur l'activité de QuintoAndar. QuintoAndar a constaté une augmentation de 36% du volume de conversions sur un an (nouveaux prospects, qui, dans le cas de QuintoAndar, sont les personnes qui ont planifié une visite d'un bien immobilier). Ce résultat est fortement, mais pas uniquement, lié à l'amélioration de l'engagement qu'ils ont obtenue en offrant une meilleure expérience utilisateur.
Conclusion
Améliorer les performances Web est un défi. Parfois, cela peut même sembler accablant. Au début, QuintoAndar n'avait pas toutes les réponses. Toutefois, en décomposant le problème, en se concentrant sur les problèmes les plus importants et en favorisant la collaboration entre les équipes, ils ont réalisé de réels progrès. Il n'est pas nécessaire de tout corriger en même temps. Même de petites modifications incrémentielles peuvent entraîner des améliorations significatives. En prenant la première étape, que ce soit pour identifier vos plus gros goulots d'étranglement, tester des optimisations ou sensibiliser votre équipe, vous serez sur la bonne voie pour améliorer les performances et l'expérience utilisateur.