Le vocabulaire de la webperf commenté par des spécialistes

Le vocabulaire de la webperf commenté par des spécialistes La performance des pages web ou webperf repose sur un jargon et un ensemble de techniques pas toujours évidents à comprendre. Revue des principaux termes, agrémentée de conseils d'experts.

CDN : Content Delivery Network soit un "réseau de diffusion de contenu" rapproche le contenu d'un site de ses visiteurs en l'hébergeant au sein d'un réseau, souvent international, de serveurs  : le contenu, ainsi dupliqué et rapproché, est donc servi plus vite (souvent depuis des sous-domaines, d'où la confusion avec le Domain Sharding, voir ci-dessous).
 
Compression : rend les fichiers plus légers, afin qu’ils se téléchargent plus rapidement, en les compressant (avec Gzip notamment). Les contenus texte (HTML, CSS, JS) et les images sont éligibles. 
 
Concaténation : méthode qui consiste à enchainer et regrouper plusieurs fichiers de même type en un seul. Concaténer les fichiers JavaScript et CSS fait partie des bonnes pratiques bien connues de webperf, puisque cela permet de réduire le nombre de fichiers à télécharger.
 
Domain sharding. Comme les navigateurs limitent le nombre de requêtes simultanées par domaine, il peut être astucieux de servir des ressources (images, CSS, JS, fichiers statiques) depuis plusieurs sous-domaines : c'est précisément ce en quoi consiste le Domain Sharding. Il ne faut pas en abuser, notamment en raison du temps pris par les résolutions DNS, que cette technique multiplie. De plus, avec les évolutions technologiques, des navigateurs notamment, pas sûr que cette technique soit encore recommandable dans les années qui viennent. Elle est aussi souvent confondue avec les CDN, comme a pu le remarquer le blog d'un spécialiste de la webperf

Lazy loading : la technique du "chargement paresseux" (traduction littérale assez explicite) permet de ne pas charger toute la page, mais seulement ce qui est nécessaire ou visible par l'internaute. "Une technique particulièrement conseillée et utile pour les pages d'accueil très chargées", a expliqué au JDN l'expert Stéphane Rios, de Fasterize.

Prefetch : cette technique consiste à pré-charger un fichier, une page, ou des ressources placés dans le cache du navigateur. Il faut que les contenus ainsi pris en charge aient de grande chance d'être sollicités ensuite par le navigateur, sinon, le pré-chargement aura consommé de la bande passante pour rien. Les ressources pré-chargées sont limitées par les navigateurs. Le prefetch de DNS est aussi possible, comme le rappelle une page d'Alsacreation : c'est la résolution du nom du domaine en IP qui est alors fait en avance (une technique utile, par exemple, si le site va faire appel à un sous-domaine utilisé par un CDN par exemple).

Speed Index ou "indice de vitesse" mesure la bonne dynamique de l'affichage de la page au-dessus de la ligne de flottaison. Plus le score est bas, plus la page s'affiche à bon rythme, c'est-à-dire qu'elle affiche les éléments visibles très rapidement ou à la bonne cadence. Ainsi, si le quart de la page A est affichée dès la 2e seconde, alors qu'il faut attendre 20 secondes pour avoir le même rendu sur la page B, alors la page A aura un meilleur Speed Index – alors que les 2 pages A et B peuvent avoir le même temps de chargement et de Start Render (voir définitions ci-dessous). Le Speed Index a ses limites, mais c'est lui qui a été retenu pour classer les 20 sites d'e-commerce les plus visités en France chaque mois dans le JDN, ainsi que 20 autres ténors du web. Des explications illustrées plus complètes, avec la formule exacte utilisée pour calculer le score de nos classements peuvent être consultées sur le site de Fasterize.  

Spriting est "une excellente technique de réduction du nombre de requêtes de chargement", comme l'explique dans nos colonnes Ismaël Ahounou de Bees IT, qui définit ainsi la technique : "L’idée est de regrouper le maximum d’images en une seule pour ensuite utiliser les propriétés CSS afin d’en afficher qu’une partie, en fonction du besoin". 4 images peuvent ainsi être, par exemple, regroupées en un sprite.

Start Render correspond au moment où les premiers éléments s'affichent sur une page Web.

Temps de chargement, ou "loading time" : temps de chargement complet d’une page.

Time to Interact correspond au moment où l'utilisateur peut commencer à interagir avec le contenu affiché.