L'importance du poids des pages
Encore une traduction, cette fois d'un article écrit par Chris Zacharias, Page weight matters. Avec l'accord de l'auteur, je l'ai donc traduit en français. Je ne suis toujours pas traductrice professionnelle, donc n'hésitez pas à me le signaler si j'ai fait une faute, une erreur de traduction ou autre.
Il y a trois ans, quand j’étais web developer chez YouTube, un des ingénieurs senior a lancé une diatribe sur le poids beaucoup trop élevé de la page de lecture des vidéos. La page avait atteint un poids de 1.2MB, avec des dizaines de requêtes. L’ingénieur tempêtait : “Si on peut écrire un clone de Quake en moins de 100KB, nous n’avons aucune excuse pour ça !”.
Vu que j’étais d’accord avec lui et que je cherchais un nouveau projet sur lequel travailler, j’ai décidé de m’atteler à la tâche et de faire passer le poids de la page de lecture de YouTube sous la barre fatidique des 100KB.
Dans la navette entre San Bruno et chez moi ce soir-là, j’ai codé un prototype. J’ai décidé de limiter les fonctionnalités à une simple en-tête, le lecteur vidéo, 5 vidéos liées, un bouton de partage, l’outil de signalement et 10 commentaires chargés en AJAX. J’ai nommé le projet “Feather” (NDT : “Plume”).
Même avec aussi peu de fonctionnalités, la page pesait 250KB. J’ai fouillé le code et je me suis rendu compte que nos outils d’optimisation (Closure compilation) n’étaient pas capable d’exclure du code qui n’était jamais utilisé dans la page (ce qu’il serait en fait injuste d’attendre de n’importe quel outil vu les circonstances). Le seul moyen de réduire davantage le code était d’optimiser le CSS, le JavaScript et les sprites d’images à la main. Après 3 jours douloureux, j’avais atteint un poids beaucoup plus raisonnable. Ceci dit, j’étais toujours au-dessus des 100KB.
Ayant tout juste fini le lecteur HTML5, j’ai décidé de l’utiliser à la place de celui en Flash, plus lourd. Bam ! 98KB et seulement 14 requêtes. J’ai ajouté quelques outils de monitoring basique et j’ai lancé un test en opt-in sur une partie de notre trafic.
Après une semaine de collecte de données, les chiffres sont revenus… et ils étaient déconcertants. Le temps de chargement moyen des pages sous Feather avait en fait AUGMENTÉ. J’avais fait diminuer le poids total de la page et le nombre de requêtes jusqu’à un dixième de ce qu’ils étaient au départ et, d’une manière ou d’une autre, les chiffres montraient que les vidéos étaient plus longues à charger sur Feather. Ça n’était pas possible.
En analysant les chiffres et en testant sur différents navigateurs, tout cela n’avait aucun sens. J’étais sur le point d’abandonner le projet, avec ma vision du monde complètement chamboulée, quand mes collègues ont découvert la réponse : la géographie.
Quand nous avons regroupé les données géographiquement et que nous avons comparé les chiffres au total région par région, il y avait une augmentation disproportionnée du trafic depuis des endroits comme l’Asie du Sud Est, l’Amérique du Sud, l’Afrique et même des régions reculées de la Sibérie. Une enquête plus approfondie a révélé que, dans ces régions, le temps de chargement moyen d’une page avec Feather était de plus de DEUX MINUTES ! Cela voulait dire que pour une page normale, au-dessus d’un megabyte, le temps de chargement était supérieur à VINGT MINUTES ! Tout ceci avant d’avoir la moindre chance de voir la première image de la vidéo.
Du coup, des populations entières ne pouvaient tout simplement pas utiliser YouTube, parce que c’était trop long de regarder quoique ce soit. Avec Feather, malgré les 2 minutes à attendre avant de pouvoir voir la première image, il était désormais possible de regarder une vidéo. Durant la semaine, la rumeur de l’existence de Feather s’était répandue dans ces zones et nos chiffres en avaient été complètement faussés. De nombreuses personnes qui étaient auparavant dans l’impossibilité d’utiliser Youtube en étaient désormais capables.
Avec Feather, j’ai appris une leçon précieuse sur l’état d’Internet dans le reste du monde. Beaucoup d’entre nous sont assez chanceux pour vivre dans des régions avec l’ADSL, mais il reste de larges portions du monde dans lesquelles ce n’est pas le cas. En gardant notre code côté client le plus léger possible, nous pouvons littéralement ouvrir nos produits à de nouveaux marchés.