Réduire de moitié la taille des pages avec srcset

Le gonflement du Web est beaucoup discuté de nos jours. Les pages Web avec un contenu assez simple – comme une page de résultats de recherche Google – sont considérablement plus grandes aujourd'hui qu'elles ne l'étaient il y a quelques décennies, même si le contenu lui-même n'a pas beaucoup changé. Nous, les développeurs Web, sommes au moins en partie à blâmer: la paresse ou tout simplement une mauvaise programmation font définitivement partie du problème (bien sûr, la paresse peut provenir d'un délai serré ou impossible, et un mauvais code peut provenir de programmeurs inexpérimentés – aucun jugement n'est en cours) ici).

Mais ici à Guava, nous pensons que les logiciels ne devraient pas être gonflés inutilement, même s'ils pourraient être légèrement plus faciles à développer et à expédier. Nous croyons en la fourniture d'un code de production de haute qualité, et une partie de cela ne prend pas la solution facile au détriment de la taille de la page.

Nous devons fréquemment commencer à travailler sur des logiciels de longue durée qui ont plus de quelques raccourcis de codage qui étaient probablement nécessaires à l'époque pour expédier quelque chose rapidement à la production, mais qui ont maintenant mal à l'optimisation. Parfois, les améliorations prennent trop de temps pour mériter notre peine, mais parfois elles sont extrêmement faciles à gagner.

Tel est le cas de la séparation des éléments d'image par la densité de pixels (DPI). Comme son nom l'indique, DPI (points par pouce) est la quantité de points (ou pixels, dans notre cas) qui tiennent dans un pouce carré d'espace d'écran. La définition exacte varie selon le contexte, donc pour des raisons de lisibilité, nous dirons qu'un faible DPI signifie un écran de bureau ou d'ordinateur portable moyen et des smartphones à petit budget, tandis qu'un DPI élevé signifie le smartphone moyen, une tablette ou des écrans d'ordinateur de résolution supérieure (par exemple Retina écrans et moniteurs 4k).

De nos jours, les clients de smartphones sont importants pour la plupart des commerces de détail en ligne, ce qui signifie que nous devons servir des images à haute résolution quand c'est nécessaire. La partie "en cas de besoin" est importante car la solution de facilité consiste à toujours servent des ressources PPP élevées, même si le périphérique client n'en a peut-être pas besoin. Le problème avec cela est que les images à haute résolution sont à peu près 4 fois plus grandes que leurs homologues à faible DPI, donc les appareils à faible DPI obtiendraient des images inutilement grandes pour rien du tout – ballonnement Web!

Servir différents actifs selon le DPI du client n'était pas une tâche triviale il y a quelques années, ce qui signifie que le Web est probablement rempli de pages qui servent toujours des actifs à DPI élevé par défaut à tous les navigateurs clients. Mais maintenant que HTML5 est largement adopté, nous pouvons faire bon usage de srcsetfaire juste cela. À chacun sa propre: srcset prend une liste d'images différentes et sert la plus appropriée à chaque client. Dans les sites riches en images tels que les magasins de détail, c'est un excellent outil pour optimiser la taille moyenne des pages et économiser beaucoup de bande passante, ce qui signifie économiser de l'argent. Les images plus petites prennent également moins de temps à charger, de sorte que les clients verront également les images des produits plus rapidement qu'auparavant.

Ce changement très simple nous a permis de réduire la taille des pages dans l'un de nos projets de plus de 50% dans certains de ses points de terminaison les plus consultés, et une réduction globale moyenne de 25% de la taille des pages pour les clients à faible DPI. Étant donné que certaines pages avaient une taille de 4 ou 5 Mo, la réduction de moitié de ces tailles a été une grande amélioration pour nos clients – d'autant plus que certaines d'entre elles pourraient accéder à notre site sur des réseaux mobiles de faible qualité, ce qui peut parfois être extrêmement lent. Compte tenu de la proportion de clients à faible DPI que nous avons en moyenne par jour, cette amélioration a permis à notre client d'économiser 7,5% de la bande passante.

Maintenant que nous avons un peu de recul, il semble évident que nous aurions dû utiliser cette fonctionnalité tout au long. Mais le plus souvent, des optimisations extrêmement simples telles que celle que nous avons décrite sont ignorées par des équipes moins expérimentées ou pires – jugées «non importantes» par la direction, car les clients peuvent actuellement épargner quelques mégaoctets par page (c'est peut-être le cas, mais ils je ne veux pas!).

Nous pensons que les pages Web gonflées blessent toutes les personnes impliquées: les développeurs Web, les clients et les entreprises. Nous nous efforçons d'atteindre ce que nous pensons être un code Web de bonne qualité: celui qui fournit des pages Web optimisées et minces à tous les clients.