« Reims-Votre navigateur »
en moins de 2 secondes

Par « Webperf » on désigne un ensemble de techniques permettant d’optimiser l’affichage d’une page web. L’objectif est de rendre la navigation sur un site la plus fluide possible.

C’est une préoccupation avant tout technique mais qui peut avoir une influence sur le référencement de votre site, la conversion de vos ventes, la satisfaction client... Bref, c’est une problématique importante dans toute stratégie web.

Pourquoi s’intéresser à la performance web ?

Fluidifier la navigation

Voilà un problème auquel nous sommes tous confrontés au jour le jour en tant qu’utilisateur d’internet :

  • la recette du gateau d’anniversaire prend 1 minute à s’afficher sur notre tablette,
  • le portail des impôts est surchargé au pire moment,
  • le site du restaurant ne se charge plus du tout sur notre téléphone portable, impossible de voir le menu du jour...

La sentence est immédiate, l’utilisateur blâmera le site et risque de s’en désintéresser définitivement pour consulter les sites concurrents.

Il est important de comprendre que ce n’est pas qu’une histoire de tuyaux, vous pouvez être équipé d’une connexion en fibre optique si le site que vous voulez consulter n’a pas été correctement optimisé son affichage restera lent.

Pour éviter la frustration des visiteurs il est important d’appliquer le maximum de bonnes pratiques techniques pour que votre site soit accessible quelque soit les contraintes techniques de vos utilisateurs (mauvais connexion sur téléphone portable, tablette d’ancienne génération peu performante...).

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 coeur d’une bonne stratégie de référencement reste la qualité des contenus et des backlinks ! En effet, ce critère ne devrait faire bouger les résultats que de manière marginale.

La performance web doit être prise comme un complément important dans votre stratégie SEO.

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 leur 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.

Si vous avez entendu parlé de Webperf ces dernières années c’est probablement grace à ce nouvel echo apporté par ces entreprises soucieuses d’améliorer leur modèle économique.

Quelques bonnes pratiques

Optimiser les images

9 fichiers images sont produites pour afficher cette seule image ! Le navigateur choisira la plus adaptée à afficher.
9 fichiers images sont produites pour afficher cette seule image ! Le navigateur choisira la plus adaptée à afficher.

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 :

  1. produire la même image dans différents formats (JPG ou PNG + WebP) ;
  2. ces mêmes images doivent être déclinées en plusieurs tailles, pour une visualisation sur ordinateur et sur tablette/mobile ;
  3. 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 préloder et les héberger sur le même serveur que celui-ci2.

Côté serveurs

Pendant des années l’optimisation des performances web étaient cantonnée au travail réalisé sur les serveurs. Ce n’est plus le cas à l’heure actuelle, mais ces optimisations restent nécessaires !

À 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.

Et à Alphamosa ?

Nous ne sommes pas peu fier du travail accompli en interne ces dernières années sur le sujet.

Nous avons tenté de faire du site alphamosa.fr l’exemple parfait de nos connaissances en webperf.

Aller plus loin

Outils

Impossible de travailler sur les performances web sans de bons outils.
À 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.
  • 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.

Discutons Webperf !

Besoin d’un audit et de conseils sur les performances de votre site ?

info@alphamosa.fr
Tél. 03 26 48 17 56

[1Poids médian d’une page en 202 : 2062.4 KB, poids média des images : 973.4 KB - https://httparchive.org/reports/page-weight