I. Pourquoi un site web doit être rapide ?▲
Cela vous arrive probablement tous les jours : se retrouver face à un site web et attendre. Attendre que la page commence à s'afficher, puis attendre le contenu qui vous intéresse ou encore attendre qu'il se passe quelque chose après avoir cliqué.
Les connexions ont beau s'améliorer, avec la démocratisation de la fibre ou bien encore de la 4G, on ne se sent pas moins frustré qu'avant.
Pourquoi ce constat ? Eh bien tout simplement parce que le web a tiré profit de l'amélioration de la connectivité pour s'enrichir, que ce soit dans les contenus ou dans les usages. Les sites sont de plus en plus complexes, de plus en plus lourds, et cela tend donc à se compenser.
D'autre part, bien que les débits s'améliorent grandement, une chose a assez peu évolué : la latence. Certes nous avons éliminé les délais de connexion de nos bons vieux modems 56 k, mais il reste une latence importante entre la machine d'un internaute et un serveur web.
Donc oui, nous sommes toujours réduits aujourd'hui à patienter derrière nos écrans. Et les répercussions économiques sont importantes.
- Taux de rebond : un site qui se charge en plus de 5 secondes a un taux de rebond deux fois plus élevé qu'un site qui se charge en 1 seconde(1). Autrement dit, le nombre d'internautes à interrompre leur navigation après avoir consulté une seule page est deux fois plus élevé.
- Taux de conversion : une seule seconde de chargement en trop peut coûter jusqu'à 7 % du taux de conversion (ratio d'internautes qui achètent sur le volume total de visites(2)).
- Taux d'abandon du panier : 20 % des utilisateurs abandonnent leur panier à cause du temps de chargement(3).
- Panier moyen : un site qui a divisé son temps de chargement par deux voit son panier moyen augmenter de 11 %. Les clients d'un site rapide ont donc tendance à effectuer des achats supplémentaires.
II. Comment mesurer la rapidité d'un site web ?▲
Trop longtemps nous nous sommes intéressés uniquement au temps de réponse du serveur, le fameux TTFB (Time To First Byte). Mais cette époque est révolue. Cette composante est très importante, mais se focaliser exclusivement sur cette dernière est bien trop restrictif. Sauf cas particulier ou erreur majeure, vous ne pourrez gagner que quelques dizaines de millisecondes de ce côté, alors que les mêmes efforts ciblés sur d'autres points pourraient vous offrir des résultats bien plus fructueux.
Rappelons à ce sujet la Golden Rule de Steve Souders, qui a travaillé sur ces sujets chez Yahoo puis chez Google, et est certainement l'une des personnalités les plus influentes de la performance web :
« 80 à 90 % du temps d'attente pour l'utilisateur final sont liés au front-end ».
Ce qui compte pour l'internaute, c'est son expérience d'utilisateur. Vous devez donc prendre en compte le temps d'attente perçu. Pour l'utilisateur, le délai lié à la réception du HTML n'est pas directement perceptible. Par contre, le temps d'attente avant l'affichage des premiers éléments à l'écran est essentiel (Start Render, etc.), tout comme le délai avant de pouvoir interagir avec la page et de pouvoir réaliser l'action qui va intéresser l'internaute (Time to Interact).
Ce sont les sujets auxquels vous devez vous intéresser. Mais comment savoir si un site est rapide ? Comment faire des mesures fiables et pertinentes ? Certainement pas sur votre machine de développement (qui est probablement puissante et connectée au haut débit) !
Vous devez vous intéresser à la cible du site Internet considéré et aux particularités de son public qui utilise des navigateurs web classiques, non pas des crawlers. Vos mesures doivent donc en faire de même. Dans la continuité, ce public a généralement des caractéristiques géographiques précises. Inutile de mesurer le temps de chargement d'un site franco-français avec une sonde située aux États-Unis !
Vous pouvez, pourquoi pas, utiliser des données de Real User Monitoring qui vont vous permettre de collecter les mesures directement sur un échantillon du trafic du site (c'est ce que fait Google Analytics par exemple). Attention cependant, ce public est volatile et changeant, il est souvent préférable de disposer d'un environnement plus stable et contrôlé pour mesurer l'impact de vos optimisations.
III. Accélérez vos sites web : exemples de bonnes pratiques de performance▲
Vous avez maintenant les cartes en main pour dresser un état des lieux. Mais quelles sont les améliorations que vous allez pouvoir mettre en place ?
III-A. Les images : trop lourdes et trop nombreuses▲
Le poids total d'une page web comprend en moyenne 60 % d'images. Cela représente aujourd'hui plus d'1 Mo pour une seule page ! Cependant de nombreuses solutions existent et sont trop rarement mises en place : optimisation (palette de couleurs, suppression des métadonnées, etc.), compression, lazy-loading (chargement à la volée des images lors du scroll de l'internaute), spriting (combiner les petites images en un seul fichier et assurer le « découpage » en CSS)… et tout d'abord s'assurer d'avoir choisi un format adapté !
III-B. La compression des données : un requis▲
Son support est maintenant presque universel, il est donc incontournable. En activant la compression (typiquement gzip) sur la communication HTTP, vous obtiendrez des gains très importants (de l'ordre de 70 %) sur le poids des ressources textuelles comme le HTML, le CSS ou encore le JavaScript. Sur Apache par exemple, vous pouvez utiliser mod_deflate dans ce sens.
III-C. Une politique de cache maîtrisée▲
En tirant profit des systèmes de mise en cache des navigateurs, vous améliorez l'expérience utilisateur en accélérant la navigation. Les en-têtes HTTP Cache-Control et Expires par exemple sont à votre service !
Il est essentiel de maîtriser cette politique de cache, car vous vous exposez sinon à des dysfonctionnements en cas de mise à jour de votre site web. La réponse « videz votre cache et cela va fonctionner », qu'on a trop souvent entendue, peut être évitée : le versioning des ressources vous permettra d'éviter ce problème (le versioning consiste à associer un identifiant unique à chaque version d'une ressource, pour ainsi offrir un mécanisme d'invalidation du cache).
III-D. JavaScript : pensez asynchrone ▲
Le JavaScript a la particularité de bloquer le chargement et le rendu d'une page web si l'on n'y prête pas attention. Vous devez penser à déporter le chargement de tout élément qui n'est pas absolument requis initialement. Plusieurs techniques sont envisageables à cet effet (mettre vos tags à la fin de votre HTML, utiliser les attributs async et/ou defer, etc.), et vous devez veiller à les appliquer, particulièrement lorsqu'il s'agit de contenus tiers comme les widgets sociaux.
III-E. Les polices de caractères : choix du format▲
L'utilisation de polices personnalisées est de plus en plus développée. Il existe quatre formats utilisés : EOT (Embedded OpenType), TTF (TrueType Font), WOFF (Web Open Font Format) et le nouveau WOFF2. Par souci de compatibilité, vous devez jongler entre ces différents formats. Ils sont très inégaux, et vous devez donc veiller à utiliser les plus performants (WOFF2 puis WOFF) lorsque c'est possible, grâce au mécanisme de fallback présent dans l'instruction CSS @font-face.Â
IV. Diagnostic et conseils d'optimisation avec DareBoost▲
Plusieurs outils sont disponibles sur le marché pour vous aider à optimiser votre site web. Nous allons ici vous parler du service en ligne www.dareboost.com, édité par une start-up française, qui va identifier les problèmes présents sur votre site web et vous apporter des conseils précis pour les résoudre.
On notera que le diagnostic de l'outil ne se limite pas à la performance web, puisque la solution vous apportera également de précieux conseils sur le référencement, l'accessibilité ou encore la sécurité.
Certaines recommandations sont propres à l'outil, mais l'on retrouve également des conseils issus de Google Page Speed ou de Yslow (créé par Steve Souders que nous citions plus tôt) par exemple. Les validateurs CSS et (X)HTML du W3C y sont également intégrés.
L'outil vous permet d'analyser gratuitement la page d'accueil de votre site, pour en faire très rapidement l'état des lieux et en déterminer les points faibles. Les mesures sont effectuées avec un navigateur web grand public, avec des contraintes de débit et de latence et avec plusieurs localisations possibles (il vous sera toutefois nécessaire de créer un compte - toujours gratuitement - pour accéder aux détails des conseils).
Nous vous proposons ci-dessous de découvrir la solution avec un rapport d'analyse de Developpez.com.
À la suite du résumé de ce rapport se trouve une vue catégorisée permettant d'accéder aux conseils en fonction de vos centres d'intérêt :
Comme nous l'évoquions, la valeur ajoutée de l'outil est de vous indiquer les corrections à mettre en œuvre pour éliminer les temps de chargement superflus de votre site web. Les conseils apportés sont, de plus, personnalisés en fonction des contenus propres au site Internet audité, et prennent en compte son environnement technologique.
Ci-dessous un exemple de conseil détaillé concernant le framework JavaScript jQuery utilisé sur Developpez.com :
La version gratuite de www.dareboost.com vous permettra - après inscription - d'analyser autant de pages d'accueil que vous le souhaitez, mais aussi d'assurer la surveillance quotidienne d'une page, en définissant des objectifs de qualité et de performance. Vous recevrez alors des alertes par e-mail en cas de problème, ainsi qu'un récapitulatif hebdomadaire des différentes évolutions.
V. Conclusion▲
Il ne vous reste donc plus qu'à analyser votre site pour identifier vos priorités d'action et bénéficier des conseils de l'outil pour les corriger efficacement !
Nous espérons par cet article vous avoir convaincu de l'importance de l'optimisation de la performance web, que vos motivations soient liées au SEO, aux enjeux économiques ou encore à l'expérience utilisateur. Bonne optimisation à tous !