Le rendement est un marathon : Des tactiques gagnantes pour rehausser le rendement d’une page web
Développement · 13 sept. 2018
Dans notre article de la semaine dernière, nous avons discuté de ce dont les entreprises et les équipes ont besoin pour sans cesse améliorer le rendement dans l’ensemble d’un site. Aujourd’hui, nous examinerons nos tactiques, les résultats obtenus à ce jour et les prochaines étapes de la quête de notre équipe vers l’optimisation des pages web et l’amélioration de l’expérience client.
Étape 1 : La recherche
Nous avons commencé avec Google Lighthouse, un outil qui s’est avéré essentiel tout au long de notre parcours et qui nous aide à repérer les occasions d’améliorer le rendement.Google met à notre disposition un vaste éventail de contenus, des blogues et des articles qui expliquent le travail requis pour régler des problèmes précis.
Véritable tremplin, Lighthouse nous a fourni une foule d’information et des occasions à prioriser. Nous avons travaillé avec une autre équipe de TELUS Digital qui avait déjà effectué des essais et qui a su prioriser ses recommandations et nos propres idées. Cette équipe a aussi modifié nos paramètres dans Lighthouse pour adapter l’outil à nos besoins précis.
À l’externe, du contenu de qualité sur le rendement est sans cesse créé en ligne. Nous continuons de lire des cas d’utilisation, des articles de blogue et d’autres documents, en plus de visionner des vidéos pratiques.
Liste d’articles et de vidéos utiles :
Twitter est aussi devenu un endroit où le rendement est discuté en temps réel. Des conversations exhaustives et détaillées sur le rendement continuent d’y être menées, et nous les consultons fréquemment pour mettre les choses en contexte et trouver des liens vers des ressources et d’autres articles.
Développeurs à suivre :
@addyosmani,@paul_irish,@igrigorik,@DasSurma,@malchata,@dan_abramov. De plus, tous les développeurs et les responsables de la maintenance des logiciels libres auxquels votre équipe fait appel publient probablement de l’information utile sur Twitter.
Étape 2 : Le travail
Comme nous l’avons mentionné dans la première partie, nous abordons l’optimisation du rendement dans l’optique de l’innovation progressive. Cela comprend une série de phases où nous divisons les diverses approches et les priorisons en fonction des suggestions de Lighthouse susceptibles d’avoir l’incidence la plus importante sur la cote de rendement.
Mais avant d’implanter les mesures d’amélioration du rendement, nous avons dû bien jeter les bases :
Nous avons mis à niveau la bibliothèque React de la version 15 à la version 16 pour profiter des gains de rendement offerts parReact Fiber.
Nous avons fait passer Node.js de la version 6 à la version 8.
Nous avons fait passer Webpack de la version 2 à la version 4, ce qui a simplifié la division du code.
Ces changements nous ont permis de commencer à travailler sur l’optimisation du rendement.
Phase 1 : Effectuer le « chargement fainéant » (lazy load) de toutes les images.
Le composant qui a permis ce refactorage a été développé par TELUS Digital à l’interne, et nous avons dû le mettre à niveau pour veiller à ce que toutes lesimages soient chargées correctement.
Gain de rendement : de 5 à 8 points
Phase 2 : Polices web
Cette occasion était pratiquement dissimulée dans le rapport Lighthouse, à la toute fin du document et en format réduit. Nous avons constaté que les polices web avaient une incidence massive sur le rendement à l’échelle de telus.com. Nous avons implanté une fonction CSS intitulée « font-display: swap » qui remplace une police par une police du système jusqu’à ce que la police web ait été téléchargée.
Gain de rendement : Plus d’une seconde gagnée pour le First Meaningful Paint (environ 5 points)
Phase 3 : Launch d’Adobe
L’équipe des analyses a mis à niveau les scripts Adobe DTM vers le système Launch d’Adobe, ce qui nous a permis de charger des scripts d’analyse de manière asynchrone afin de prévenir tout blocage lors du rendement et d’accélérer le First Meaningful Pain.
Gain de rendement : Amélioration du First Meaningful Paint d’une seconde (environ 5 points).
Phase 4 : Division du code basée sur les composants
Cette phase est celle qui a requis le plus de temps sur le plan de la recherche et de l’expérimentation. La division du code vise à réduire autant que possible la quantité de code JavaScript chargé à chaque page. JavaScript est la ressource qui a la plus grande incidence sur le rendement. Presque tous les articles et toutes les vidéos que nous avons consultés le confirment.
Nous voulions d’abord déterminer la quantité de code JavaScript contenue dans chaque page, et examiner la façon dont le code était divisé. L’outilWebpack Bundle Analyzer a été particulièrement utile pour cette recherche. Il a révélé toutes les erreurs que nous avions commises dans la distinction du code des fournisseurs (bibliothèques de code en source libre) et de notre ensemble principal (le code que nous avions créé). Quelques ajustements dans la configuration de Webpack ont suffi pour régler ce problème, mais nous avons tout de même eu à diviser notre ensemble principal en plus petites parties. C’est à cette étape que nous avons adopté une stratégie de division du code basée sur les composants.
Nous disposons d’une bibliothèque complète de combinaisons des composants React qui varie d’une page à l’autre. Actuellement, il y a environ 55 composants dans notre bibliothèque et ce nombre continue de grandir en raison de nouvelles exigences, ce qui élargit davantage notre ensemble JavaScript principal. AvecWebpack 4, lesimportations dynamiques et les bibliothèquesReact Loadable, nous avons pu diviser le code en nous basant sur les composants. Dorénavant, seul le code JavaScript requis est chargé à chaque page.
Résultats : Le volume du code JavaScript contenu dans chaque page est passé de 458 Ko à environ 220 Ko (avant la division du code).
Gain de rendement : Réduction du Time to Interactive (temps requis pour qu’une page devienne interactive) de 2 à 3 secondes (environ 5 points).
Phase 5 : Style CSS Inline (en ligne)
La dernière phase de l’amélioration du rendement consistait à faire passer le CSS divisé par composant au style « Inline ». De cette façon, nous avons pu améliorer lechemin critique du rendu en éliminant les demandes superflues du serveur pour les fichiers CSS.
Gain de rendement : Le First Meaningful Pain est passé à 1,2 seconde en moyenne (environ 8 à 10 points)!
Nous avons aussi aidé l’équipe chargée de la construction de sites (qui gère plus de 500 pages web à TELUS) à implanter les échanges de polices et de styles CSS Inline. Cela a eu une énorme incidence sur la cote de rendement moyenne. En moyenne, chaque page web de l’équipe a connu des gains de 10 points dans le rapport Lighthouse.
Les résultats
Voici où nous avons commencé :
Voici où nous en sommes aujourd’hui :
Prochaines étapes
Pages individuelles
Toutes ces phases ne marquent pas la fin de nos efforts d’amélioration du rendement; nous pouvons encore faire mieux. Comme nous l’avons déjà dit, il s’agit d’un parcours de recherche, d’essai et d’optimisation continu pour toute l’équipe TELUS Digital.
Notre prochaine initiative consiste à repérer les pages dont le rendement est inférieur aux autres et à déterminer ce qui pourrait être amélioré. Le code n’est pas toujours le seul facteur de la rapidité d’une page. Parfois, il faut aussi analyser la qualité et le volume du contenu.
Suivez-nous surTwitter,Instagram etLinkedIn pour vous tenir au courant des dernières nouvelles de TELUS Digital.
À propos des auteurs :
Anatolii Gorovyi est développeur principal Full Stack JavaScript à TELUS Digital. Il est passionné par le développement d’avant-plan, il apprend sans cesse et a un profond désir d’améliorer l’expérience de tous les utilisateurs.
Rob Walker est un stratège de contenu principal à TELUS Digital. Il passe beaucoup de temps à étudier le fonctionnement d’Internet pour produire de meilleures expériences.
Bilal Khan est directeur principal de produits à TELUS Digital. Il adore contribuer à la réussite de ses coéquipiers, résoudre des problèmes et offrir une valeur ajoutée à nos clients.
