Depuis mon adolescence, je m’intéresse à la fois au développement durable et au design. Lorsque j’ai cofondé Wholegrain Digital avec Vineeta il y a plus de dix ans, il était naturel que je souhaite que l’entreprise incarne mes intérêts et mes valeurs. Au fil des ans, nous avons constitué une équipe soucieuse de la qualité du design et de la durabilité, ce qui nous a amenés à être un peu obsédés par l’efficacité. À tel point que nous qualifions notre processus de conception et de développement d’efficacité par la conception. En substance, notre objectif est de créer des solutions qui font le plus avec le moins.
L’efficacité par la conception consiste à trouver comment atteindre les objectifs du client avec le moins de données possible.
Les meilleurs résultats sont obtenus lorsque l’efficacité est une priorité dès le début d’un projet, et non une réflexion après coup. L’une des meilleures façons d’atteindre des niveaux élevés d’efficacité est de convenir d’un budget de poids de page et de l’utiliser comme mesure de la réussite du projet.
C’est Tim Frick, de Mightybytes, à Chicago, qui nous a appris l’existence des budgets de poids de page, et cette méthode nous a permis de passer à la vitesse supérieure. Lorsque nous intégrons la budgétisation du poids des pages dans nos projets, nous créons des sites Web qui sont nettement plus rapides, offrent une meilleure expérience utilisateur, sont plus performants dans les moteurs de recherche et sont plus durables.
Cet article traite de la création de vos propres budgets de poids des pages, de la façon dont vous pouvez les utiliser dans des projets réels pour offrir une meilleure expérience utilisateur et de la façon dont ils peuvent vous permettre de faire votre part face à l’urgence climatique.
Qu’est-ce qu’un budget de poids de page ?
Un budget de poids de page est littéralement un budget du poids d’une page web. Pas en grammes bien sûr, mais en kilo-octets ou méga-octets de fichiers. Plus précisément, il s’agit de la taille des fichiers transférés sur l’internet lorsqu’une page web est chargée.
Lorsque le budget a été fixé, l’objectif de l'équipe est de livrer chaque page clé du site web en ne dépassant pas le budget convenu, idéalement moins. Il s’agit d’un point de référence clair sur lequel tous les membres de l'équipe doivent se concentrer lors de la planification, de la conception et du développement.
C’est comme un budget de projet, mais pour vos pages.
Comment établir un budget de poids de page
L’objectif d’un budget de poids de page est d’inciter l'équipe de projet à rendre le site Web aussi efficace que possible, mais le budget doit être réaliste.
Lorsque nous avons commencé à utiliser les budgets de poids de page, notre développeur, Jérôme, m’a demandé quel devrait être le budget dans un monde idéal, ce à quoi j’ai répondu “zéro kilo-octet”. En réalité, nous ne pouvons pas être aussi idéalistes ; nous ne pouvons pas fournir des sites web sans transférer de données. Nous devons donc être réalistes quant à ce qui est faisable.
Notre processus de budgétisation du poids des pages vise à être à la fois réaliste et ambitieux, en suivant ces trois étapes simples :
- Benchmark! Comparez l’ancienne version du même site Web et les principaux concurrents pour déterminer ce qui est typique dans le secteur. Essayez d'être au moins 20 % plus efficace que les meilleurs de l’industrie.
- La pire connexion! Identifiez la pire connexion probable de vos utilisateurs cibles et leurs attentes en matière de temps de chargement. Calculez le budget à partir de là. Un outil tel que http://www.performancebudget.io/ peut être utilisé pour estimer cela.
- Decision! Utilisez votre expérience et votre instinct pour établir un budget à partir de ces deux chiffres. Il peut s’agir d’une fourchette, le point 1 étant la norme minimale et le point 2 l’objectif maximal.
Le processus ci-dessus n’est pas compliqué en soi et n’importe qui dans l'équipe peut suivre ces étapes et proposer un budget. Le plus important est que quelqu’un s’approprie le budget du début à la fin, et étant donné que le chef de projet est responsable de la réussite globale du projet, y compris de son budget financier, il est logique qu’il prenne également la direction du budget du poids des pages.
Il doit tenir compte des besoins pratiques du client, des utilisateurs cibles du site Web et de toutes les contraintes techniques connues qui sont définies dans le cahier des charges du projet. Par exemple, si vous savez que le site doit intégrer un système de chat en direct Intercom, vous devez fixer le budget en conséquence.
Je sais, vous voulez voir un exemple
J’ai pensé qu’il serait utile d’illustrer cela par un exemple réel de projet où nous avons utilisé ce processus.
Le site web du Manifesto du Web durable est conçu pour être un exemple vivant de conception Web écologique. Par conséquent, lorsque nous l’avons créé, nous avons dû nous efforcer d’atteindre des niveaux élevés d’efficacité tout en veillant à ce qu’il soit fantastique. Voici comment nous avons procédé pour établir le budget de poids des pages.
Point de référence : Il n’existait pas d’ancienne version de ce site Web ni de concurrents directs. Nous avons donc examiné le site Web du manifeste le plus connu dans notre secteur, à savoir le Manifesto Agile. La taille de cette page est de 70,4 kb. Une amélioration de 20% serait donc de 56kb. La pire connexion : La pire vitesse de connexion probable pour les visiteurs du Manifeste du Web durable est probablement la 2G, car elle est encore étonnamment courante, même au Royaume-Uni, dans les endroits comme les trains. Comme nous voulons vendre les avantages d’un web plus vert en termes de performances, l’idéal serait que le site se charge en 3 secondes sur une connexion 2G. D’après Performance Budget cela nous donne un budget cible de 13.1kb Décision : D’après ce qui précède, il semble raisonnable que le site Web ait une taille de page comprise entre 56 kb et 13 kb. Le site le plus efficace développé par notre équipe de Wholegrain Digital est Website Carbon avec une taille de page de 28kb. Nous savons donc que c’est possible et nous avons fixé le budget à 28 kb et l’objectif élargi à 13 kb. La page d’accueil finale du Manifeste du Web durable a atteint 30,6 kb. Oui, nous n’avons pas respecté le budget de quelques kilo-octets, mais le fait de disposer d’un budget nous a permis de livrer un produit incroyablement efficace. Il peut être plus difficile de travailler avec un si petit budget sur des projets clients, mais l’utilisation d’un budget de poids de page pousse l'équipe à fournir des niveaux élevés d’efficacité. Un autre exemple est celui de la société B Corp Red-Inc, dont le site web devait être le plus efficace que nous ayons jamais créé pour un client. Il a été livré en 278 Ko, soit une fraction de la taille des sites concurrents de Red-Inc, ce qui l’a rendu beaucoup plus rapide.
Quels en sont les avantages ?
Comme toute chose dans la vie, fixer un objectif tangible permet de se concentrer. En fixant un budget de poids de page, vous avez toutes les chances de produire un site Web beaucoup plus efficace, même si vous n’atteignez pas votre objectif.
Depuis que nous avons introduit la budgétisation du poids des pages dans notre processus, nous avons constaté les avantages suivants :
- Réduction considérable de la taille moyenne des pages
- Amélioration de l’expérience utilisateur
- Amélioration de l’accessibilité
- Réduction des émissions de carbone
Pas mal ! Je suis sûr que vous vous demandez maintenant : “Est-ce vraiment si facile ?”
Est-ce vraiment si facile ?
Oui et non.
Fixer un budget pour le poids des pages est vraiment très facile. Le véritable défi est de faire en sorte que les principales parties prenantes y adhèrent. C’est facile sur nos propres sites Web, mais beaucoup plus difficile avec les sites Web des clients. La meilleure approche pour faire adhérer les clients à un budget de poids de page est de leur montrer ce que cela signifie en termes de choses qui les intéressent, qu’il s’agisse du temps de chargement pour les utilisateurs mobiles, de l’impact environnemental ou du coût de visite du site pour un utilisateur d’un pays en développement.
Les sites Web efficaces profitent à tous les utilisateurs, mais il est utile de montrer au client comment il en tirera profit pour son propre public cible.
Le défi suivant consiste à se mettre d’accord sur le budget à prévoir. Comme il peut être difficile pour les clients de visualiser les implications d’un budget très serré, ils ont tendance à être prudents et ne veulent pas se limiter en fixant un budget trop bas. C’est tout à fait normal et c’est pourquoi nous suggérons de fixer une fourchette budgétaire avec une limite supérieure réaliste et un objectif plus ambitieux. Cela permet à chacun de s’efforcer de faire mieux sans avoir le sentiment de s'être trop engagé dans une approche puritaine qui pourrait l’empêcher d’atteindre d’autres objectifs.
Nous avons donc fixé un budget qui convient à tous. Le prochain défi est de s’y tenir.
Il ne sert à rien de fixer le budget si vous ne le revoyez pas avant le lancement du site Web. Elle doit être intégrée à chaque étape du projet et dirigée par le chef de projet, dont la mission est de veiller à ce que le projet atteigne tous les objectifs convenus. Cela signifie qu’il faut poser des questions difficiles, comme, “Cette photo d’archives d’une réunion de conseil d’administration apporte-t-elle vraiment une valeur ajoutée ?” et estimer constamment les progrès par rapport au budget en vérifiant les tailles approximatives des fichiers d’images, des polices, des bibliothèques de codes, etc.
Par-dessus tout, il s’agit de se demander constamment si nous pourrions obtenir une expérience tout aussi bonne avec des fichiers encore plus petits ? Et si oui, comment ? Il s’agit également de dire à l'équipe la réalité lorsqu’une décision entraînera le non-respect du budget. Chaque membre de l'équipe de projet doit être conscient des décisions qu’il prend et de la raison pour laquelle il s’est engagé à respecter le budget en premier lieu.
Tableaux de référence pratiques
Il est utile de disposer de quelques exemples de taille de fichier auxquels se référer lors de la conception d’un site Web en fonction d’un budget de poids de page. Voici quelques exemples utiles.
Polices
Les polices sont sans doute le facteur le plus discret qui contribue au poids d’une page Web. La plupart des gens ne pensent pas à la taille des fichiers de police sur le Web, mais ils peuvent avoir un impact énorme si nous ne faisons pas attention. Le tableau ci-dessous donne quelques exemples, soulignant comment les polices système peuvent être utilisées sans aucun impact sur le poids de la page, et comment les polices personnalisées peuvent avoir plusieurs gros fichiers couvrant différents poids tels que normal, gras et italique. Le tableau montre également que la taille des fichiers de police est fortement influencée par le format de fichier utilisé et par le fait que vous utilisez le jeu de caractères complet ou seulement un sous-ensemble de la police avec les caractères requis (par exemple, les caractères anglais uniquement).
| Polices | Police Système/strong> | TTF | WOFF2 | Sous-ensemble WOFF2 |
| Arial | 0kb | |||
| Times New Roman | 0kb | |||
| Inter UI Regular | 253kb | 88kb | 10kb | |
| Inter UI Bold | 256kb | 95kb | 10kb | |
| Inter UI Italic | 259kb | 95kb | 10kb | |
| Roboto Regular | 172kb | 66kb | 9kb | |
| Roboto Bold | 171kb | 67kb | 9kb | |
| Roboto Italic | 174kb | 72kb | 11kb |
Code front-end
La taille du code front-end varie beaucoup d’un projet à l’autre, car il est en grande partie unique à chaque site Web. Cependant, des scripts standard sont souvent utilisés et peuvent être pris en compte dans le budget. Les scripts de suivi, en particulier, peuvent ajouter un poids significatif à une page et doivent être sélectionnés avec soin. Quelques exemples courants sont présentés ci-dessous.
| Script | Poids Front end |
| JQuery | 33.4kb |
| Google Analytics | 42.3kb |
| Google Tag Manager | 39.4kb |
| Matomo Analytics | 39.3kb |
| HotJar | 92kb |
Images
Sur la plupart des sites Web, les images représentent la majorité du poids de la page. Un grand nombre de variables influent sur le poids des images sur une page, notamment le nombre d’images, leurs dimensions, leur complexité et le niveau de compression appliqué au fichier image. Le tableau ci-dessous donne quelques exemples de taille de fichier pour une image de complexité moyenne enregistrée dans différents formats et tailles.
Ces informations sont utiles pour estimer la taille des pages et montrent qu’en général, WebP est le format d’image le plus efficace, suivi de JPG. Toutefois, il existe des exceptions à cette règle, en fonction des propriétés uniques de l’image elle-même. La meilleure façon de connaître la taille d’une image est de l’enregistrer à la taille et au niveau de compression requis, et de tester différents formats de fichiers pour voir lequel est le plus efficace. En outre, si l’image est un simple graphique vectoriel, un fichier SVG peut être plus petit que l’un des formats d’image ci-dessous.
| Images | PNG | PNG Retina (2X) | JPG | JPG Retina (2X) | WEBP | WEBP Retina (2X) |
| 64 x 64 | 3.3kb | 9.0kb | 3.3kb | 9.7kb | 900b | 2.3kb |
| 128 x 128 | 8.5kb | 25.6kb | 9.7kb | 29.5kb | 2.4kb | 6.1kb |
| Thumbnail 382 x 255 | 38.0kb | 128.0kb | 44.1kb | 78.7kb | 9.1kb | 24.1kb |
| Medium Image 640 x 480 | 106.8kb | 350.6kb | 60.0kb | 145.9kb | 20.8kb | 56.7kb |
| Banner 1200 x 500 | 172.8kb | 564.1kb | 136.7kb | 235.7kb | 28.3kb | 75.0kb |
| Full screen 1440 x 900 | 354.5kb | 1.1mb | 148.9kb | 303.5kb | 54.3kb | 133.0kb |
Vidéo
La vidéo est moins souvent utilisée sur les sites Web que les images, mais lorsqu’elle est utilisée, elle peut faire paraître insignifiante la taille des autres fichiers de la page. Elle est également beaucoup plus difficile à calculer car il existe de nombreuses variations possibles de format de fichier, de fréquence d’images, de résolution et de durée. Le tableau ci-dessous ne donne donc qu’une indication approximative de la taille des fichiers vidéo.
| Durée de vidéo | HDV 1080 | h264 720 | MPEG-2 |
| 1 minute | 157MB | 371MB | 943MB |
| 5 minutes | 786MB | 1.8GB | 4.7GB |
| 20 minutes | 3.1GB | 7.4GB | 18.8GB |
| 60 minutes | 9.4GB | 22.3GB | 47.1GB |
Validez votre budget
Les éléments ci-dessus sont utiles pour comprendre les implications des décisions prises pendant la conception et le développement, mais vous ne pouvez jamais être entièrement sûr que vous avez respecté le budget avant que le projet ne soit terminé. À ce stade, il est important de valider le budget de poids des pages en mesurant le poids final de la page à l’aide des outils de développement de Chrome ou d’une application telle que GT Metrix. Ces outils vous aideront également à identifier les opportunités manquées et vous permettront d’apporter de nouvelles améliorations au site Web.
Par-dessus tout, que vous respectiez ou non le budget, il est important que toute l'équipe apprenne l’impact des décisions prises en cours de route, afin de pouvoir faire des choix plus éclairés à l’avenir.
Votre liste de contrôle pratique pour définir et utiliser les budgets de poids de page
Les budgets de poids des pages sont un outil simple et très efficace pour créer des sites Web qui sont non seulement plus efficaces en termes de données, mais aussi plus rapides, plus agréables à utiliser, plus faciles d’accès et plus durables. Comment ne pas aimer ?
Nous avons constaté qu’en introduisant simplement le concept de budget de poids de page dans les discussions de notre équipe, nous fournissons un travail plus efficace, même sur des projets qui, pour une raison ou une autre, n’ont pas de budget officiel. C’est devenu une façon de penser et de travailler qui guide désormais nos décisions, que nous en soyons conscients ou non.
Voici un récapitulatif pratique des étapes à suivre :
- Présentez à l'équipe la budgétisation par poids de page au début du projet.
- S’approprier le budget en tant que chef de projet
- Convenez officiellement par écrit du budget (ou de la fourchette budgétaire) avec toutes les parties prenantes clés avant de commencer la conception.
- Révisez constamment le budget et l'évolution de l’estimation tout au long du processus de conception et de développement.
- Examinez la taille finale des pages clés par rapport au budget et tirez-en des enseignements.
Vous avez besoin d’un site Web incroyablement efficace et rapide, ou vous voulez simplement discuter de vos intérêts communs ? Prenez contact ici.