Chez Glean, la vitesse est notre fonctionnalité préférée. Contrairement à certaines entreprises, nous ne sommes pas contraints par la moindre motivation à retenir l’attention des gens le plus longtemps possible juste pour leur montrer des publicités. Nous sommes libres d’optimiser pour aider les personnes et les équipes à trouver ce dont elles ont besoin et à repartir le plus vite possible, afin qu’elles puissent accomplir de grandes choses.
L’un des moyens les plus rapides de trouver des informations avec Glean, c’est via sa page Nouvel onglet. Elle est personnalisée et configurée par chaque utilisateur : la mise en page, l’arrière-plan, les sites favoris et les documents suggérés. Même avec tout ce contenu dynamique, tout le monde s’attend à ce qu’un nouvel onglet s’ouvre instantanément, sans le moindre délai perceptible. Cela a posé un défi amusant à notre équipe d’ingénierie — un défi qui a nécessité une solution inédite.
Jetez un œil au résultat dans cette vidéo. Cet article technique explique comment nous avons fait.
Étape 1 – Service Worker
Lorsqu’un navigateur web charge une page, il doit d’abord récupérer toutes ses ressources. Historiquement, cela nécessitait plusieurs secondes d’attente sur le réseau. Les Service Workers ont complètement changé la donne. Nous avons donc commencé par mettre en place Workbox, un excellent framework open source qui facilite la création d’un Service Worker capable de charger intégralement votre page depuis le cache, même hors ligne.
Étape 2 – Redux-Persist
Maintenant que le chargement de notre code et de nos ressources était rapide, le problème suivant était qu’il fallait encore un aller-retour vers le serveur pour récupérer les préférences. Pour éviter cela, nous avons tout mis en cache localement dans IndexedDB à l’aide de redux-persist.
Cela semblait fonctionner au début, mais a provoqué toutes sortes de problèmes de performance dans l’application, surtout sur des machines déjà sous charge. Heureusement, deux des membres fondateurs de l’équipe Chrome Speed de Google travaillent désormais chez Glean : nous connaissions donc l’outil de diagnostic à utiliser — Chrome Tracing. Il a révélé que, par défaut, Chrome attend de vider toutes les écritures IndexedDB sur le disque via un fsync. Certains navigateurs comme Firefox ne le font pas, mais Chrome nous a au moins fourni un moyen de l’éviter : la durabilité relâchée. Nous avons donc écrit notre propre backend redux-persist et avons également contribué à une correction dans Workbox. Désormais, les opérations du système de fichiers ne s’accumulent plus de façon pathologique.
Étape 3 – Mise en cache du rendu
Même si notre mise en cache était complète et efficace, ce n’était toujours pas assez rapide. Le navigateur passait encore plusieurs centaines de millisecondes à compiler notre JavaScript et à initialiser React pour ce premier rendu. Nous avons donc dû sortir des sentiers battus en nous inspirant du rendu côté serveur. Il s’agit d’une technique qui consiste à rendre un DOM sur le serveur et à envoyer son HTML au navigateur afin qu’il puisse l’afficher immédiatement, avec uniquement l’analyse CSS/HTML et le layout pendant le chargement de React.
L’idée clé, c’est que cela pouvait aussi fonctionner pour une page construite dynamiquement côté client. Une fois chargée, nous prenons un instantané du HTML du DOM et le conservons dans le Service Worker afin qu’au chargement suivant, une page HTML pré-rendue soit déjà présente dans le cache et puisse s’afficher sans aucun JavaScript. Les détails sont ésotériques. Ils ont nécessité quelques précautions afin d’éviter des écueils comme l’effacement des champs de recherche, une hydratation incorrecte et des problèmes d’obsolescence.
Mais le résultat final parle de lui-même. D’après ce que nous pouvons dire, il s’agit d’une technique inédite. S’il y a de l’intérêt, nous serions ravis d’open sourcer un plugin Workbox généralisé.
Et ensuite ?
Nous espérons que vous le savez ! Envie de résoudre avec nous des défis amusants comme celui-ci et de pousser la plateforme web dans ses retranchements ? Consultez notre page carrières.
