Pourquoi s’intéresser à la performance web ?
Booster la conversion
Les acteurs majeurs du web ont compris que la performance web, au-delà de répondre à une logique de satisfaction client, pouvait avoir un retentissement concret sur leurs résultats économiques.
En effet, de plus en plus d’études montrent l’impact positif que peut avoir l’optimisation d’un site sur son succès commercial. WPO Stats répertorie de nombreuses études allant dans ce sens.
Carpe improved Largest Contentful Paint by 52% and Cumulative Layout Shift by 41% and saw a 10% increase in traffic, a 5% increase in online store conversion rate, and a 15% increase in revenue. Lire l’article complet
Si vous avez entendu parlé de Webperf ces dernières années, c’est probablement grâce à ce nouvel écho apporté par ces entreprises soucieuses d’améliorer leur modèle économique.
Améliorer le référencement ?
En 2021, Google confirme que la vitesse d’affichage d’un site sera prise considération dans le classement des résultats de son moteur de recherche.
Il serait tentant de sauter sur l’occasion pour vous dire que la Webperf est critique pour le référencement de votre site... mais n’oublions pas que le cœur d’une bonne stratégie de référencement reste la qualité des contenus et des backlinks !
En effet, ce critère de vitesse de chargement n’a pas encore d’impact remarquable en SEO. La performance web doit être prise avant tout comme un moyen d’améliorer l’expérience de vos visiteurs.
Diminuer l’empreinte carbone
Webperf et éco-conception sont étroitement liés. En effet, les sites web rapides et légers consomment moins d’énergie, car ils nécessitent moins de ressources pour être chargés et exécutés sur les navigateurs des utilisateurs. En revanche, les sites web lents et surchargés en contenu sont plus gourmands en énergie, car ils nécessitent plus de temps et de ressources pour être chargés et exécutés sur les ordinateurs et les appareils mobiles.
Ainsi, en améliorant la performance de nos sites web, nous pouvons réduire leur impact environnemental en limitant leur consommation d’énergie. La plupart des techniques d’optimisations de performance web ont un impact positif sur l’éco-conception d’un site, et réciproquement les techniques de réduction d’empreinte carbone améliorent le plus souvent les webperfs.
Quelques bonnes pratiques
Optimiser les images
Les images représentent en moyenne 50% des données transférées lorsque l’on consulte une page web1.
Il ne s’agit plus simplement de savoir compresser une image dans Photoshop. L’optimisation des images pour le web est devenue tout un art !
Pour chaque image il faut :
- produire la même image dans différents formats (JPG ou PNG + WebP ou AVIF) ;
- ces mêmes images doivent être déclinées en plusieurs tailles, pour une visualisation optimisée sur ordinateur et sur tablette/mobile ;
- les compresser correctement.
Il n’est plus rare de devoir produire une dizaine de variations d’une même image pour un affichage performant sur un site.
Là c’est notre savoir-faire avec notre CMS SPIP qui vous libérera de toutes ces contraintes techniques. Vous téléversez une image dans le CMS, on s’occupe du reste !
Charger uniquement les données pertinentes
De nombreuses astuces peuvent être utilisées dans cette même logique.
- Différer le chargement des images qui ne doivent pas encore être affichées par le navigateur, grâce au « Lazy Loading »1.
- Ne pas charger les librairies JS ou CSS qui ne sont pas utilisées. Mettre son site à la diète est également un enjeu important en terme de sécurité !
- Limiter le nombre de polices (webfonts) utilisées sur le site, les preloader et les héberger sur le même serveur que celui-ci2.
Côté serveurs
Pendant des années, l’optimisation des performances web était cantonnée au travail réalisé sur les serveurs. Ce n’est plus le cas à l’heure actuelle, mais ces optimisations restent nécessaires !
Chez Alphamosa nous utilisons Linux (Debian pour être précis), Apache, et PHP. Ce stack technique est solide et performant, surtout depuis la version 7 de PHP... mais il n’est pas suffisant ! Il faut faire preuve de nombreuses compétences techniques pour configurer correctement un serveur web.
Et tellement d’autres techniques...
Impossible d’être exhaustif dans ce court article. Le Webperf est un sujet passionnant, en mouvement permanent et qui fait appel à des connaissances dans de nombreux métiers du web.
Nous ne saurions trop vous recommander cet excellent article de Patrick Stox How to Improve Page Speed from Start to Finish (Advanced Guide), ce guide est récent et aborde la plupart des bonnes pratiques que nous suivons.
Front-End Performance Checklist par Vitaly Friedman est un autre guide, également très complet.
En français cette fois-ci, l’article Performance web : l’intégrateur, ce héros par Jean-Pierre Vincent est une très bonne illustration du travail actuel à accomplir pour les développeurs frontend.
Et chez Alphamosa ?
Nous ne sommes pas peu fier du travail accompli en interne ces dernières années sur le sujet.
Nous avons fait du site alphamosa.fr l’exemple parfait de nos connaissances en webperf et atteindre un standard que devrait viser toute agence de communication digitale digne de ce nom.
Aller plus loin
Outils
Impossible de travailler sur les performances web sans de bons outils.
Chez Alphamosa, nous utilisons plusieurs outils pour valider notre travail :
- Web.dev référence incontournable, réalisé par Google.
- Dareboost solution française qui a le mérite de faire également un très bon rapport orienté « qualité web ».
- WebPagetest propose des rapports de performance très complets.
- webhint réponse de Microsoft à Lighthouse de Google.
- GTmetrix une solution simple et plus abordable que les précédentes pour commencer.
- DNSPerfs pour vérifier la rapidité de réponse de nos serveurs DNS.
Veille
Comme souvent dans les métiers du web, la Webperf demande de se tenir informer au jour le jour. Voici quelques-unes des sources d’information que nous aimons consulter régulièrement pour nous tenir à jour des dernières pratiques en vigueur :
- Blog Web.dev un blog tenu par les équipes de Google.
- We Love Speed une conférence annuelle en français.
- Perf.email une newletter tenue par Calibreapp.com
- Web Performance Calandar Un calendrier de l’avant qui permet, tous les ans en décembre, de faire un état des lieux en matière de Webperf.
La performance web est jonchée de pièges, pour la plupart techniques. Mais il existe également des liens importants avec les mesures de statistiques d’un site. Survivorship Bias in Web Performance explique l’un de ces liens, où l’amélioration des performances web entraîne une baisse de certaines mesures là où on s’attendrait à des progrès. Bien heureusement, ces baisses sont des trompe-l’œil, qu’il faut savoir débusquer et interpréter !
Discutons Webperf !
Besoin d’un audit et de conseils sur les performances de votre site ?
Ou tout simplement d’échanger avec une agence web qui prend les webperf au sérieux ?
[1] loading="lazy"
https://web.dev/lazy-loading-images/
[2] Should you self-host Google Fonts ?
https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/