Nous y revoilà, les soldes ont démarré ! Comme à chaque fois, l’un des premiers défis pour les équipes techniques est la gestion des pics de charge.

Voici donc 4 conseils de notre CTO expert en webperf pour passer plus sereinement cette affluence saisonnière :

1. Configurer le cache des ressources statiques

David : “Le cache des ressources statiques est souvent mal géré. Pourtant en utilisant un CDN (ou même Fasterize), il est possible de forcer le cache (NDRL sur les ressources cachables) pour une durée pré-définie. En fonctionnant ainsi, ce n’est plus le serveur qui sert et supporte la charge des requêtes de ces ressources mais les éventuels caches (Varnish, CDN, Fasterize, …) mis en place. De plus, les navigateurs avec ces ressources en cache ne resolliciterons pas systématiquement le serveur à chaque chargement de page.

2. Gérer les ressources dynamiques

David : “Les ressources dynamiques sont une affaire de compromis.

1er cas : vous avez des pages qui deviennent non cachables à cause d’une partie personnalisée minime (le nombre d’éléments dans le panier ou bien le nom de l’utilisateur connecté).
Dans ce cas-ci, il est possible de mettre en cache la page sans prendre en compte les éléments dynamiques de celle-ci. Les éléments dynamiques pourront être chargés dans un second temps grâce un script JS.
La page s’affichera donc en deux temps mais les éléments principaux de la page (les éléments cachables) seront visibles beaucoup plus tôt. En plus de gagner en vitesse, cette méthode allège le travail des serveurs (qui ne généreront plus qu’une petite partie de la page à tous les utilisateurs).

Ce cache avancé fait partie des fonctionnalités du moteur Fasterize.
Pour en savoir plus sur le Smart Cache >>

2nd cas : vous servez des versions identiques de vos pages à tous les nouveaux utilisateurs et une version dynamique à vos “returning visitors”.
Il existe une technique que nous appelons, chez Fasterize, “Cookieless cache” (cache pour les utilisateurs sans cookie). Elle permet d’identifier les nouveaux utilisateurs afin de leur servir une version en cache. Les returning visitors continuent, eux, à reçevoir la version personnalisée issue du serveur du site.

La mise en cache, même pour des périodes très courtes (de une à plusieurs minutes) est primordiale dans la gestion des pics de charge. Il ne faut vraiment pas la négliger.

Pour en savoir plus sur les caches de Fasterize >>

3. Réduire le nombre de requêtes

David : “Pour réduire le nombre de requêtes, il existe plusieurs bonnes pratiques :

  • la concaténation : regroupement de fichiers CSS et JavaScript. De 10 fichiers JavaScript on passe à 2, ce qui réduit considérablement le nombre de requêtes vers le serveur.
  • le lazyloading d’image : les images situées au-dessus de la ligne de flottaison sont chargées en premier. Les autres images se chargent lorsque l’utilisateur scrolle. On évite ainsi de charger des images si l’utilisateur ne scrolle pas. On économise ainsi un certain nombre de requêtes inutiles.
  • l’inlining des images : les petites images sont directement integrées dans le code HTML de la page.
  • le spriting des images : applique le même principe que la concaténation aux images. Ainsi plusieurs images n’en feront plus qu’une seule aux yeux du serveur. Cette pratique ne convient qu’aux images de layout (logo, bouton, etc …)

Attention toutefois à utiliser ces techniques avec modération. En effet, la concatenation ou encore le spriting d’images, s’elles sont mal utilisées, peuvent être contre-performantes en diminuant l’impact du cache navigateur.

4. Réduire le poids des requêtes

David : “Pour éviter de saturer la bande passante, il est nécessaire de réduire le poids des requêtes. Pour cela on peut :

  • minifier les fichiers JS/CSS/HTML : il s’agit de supprimer tous les caractères inutiles des pages HTML, des ressources CSS et JavaScript.
  • optimiser les images JPEG et PNG au maximum afin d’en réduire le poids.
  • GZIPer les ressources textes JS/CSS/HTML et les polices : quelques lignes de configuration sur les serveurs suffisent à servir ces ressources de façon compressée.

En plus d’accélérer le temps de chargement de la page, cette réduction du poids des requêtes permet d’économiser de la bande passante. Cela peut s’avérer très intéressant puisque la plupart des hébergeurs et CDN facturent leurs services en fonction de la bande passante utilisée.

En optimisant la partie Front-End d’un site par l’application de ces 4 bonnes pratiques, le serveur est moins sollicité et le site accueillera bien plus facilement les pics de charge.

Pour en savoir plus sur le Front-End Optimization :

VOUS AIMEREZ PEUT-ÊTRE AUSSI...

Classement : la webperf des 40 ténors de l’e-comme... Vous l'attendiez avec impatience, voici le classement webperf de cet été ! Au programme : des montées fulgurantes mais aussi des chutes doul...
Comment organiser ses équipes pour booster la webp... article img { margin:15px !important; } .grey-box { background: #dfe1e1; padding: 20px; margin-bottom: 20px; } Des utilisateurs aux...
Waterfall : comment le décrypter et en tirer des r... Le waterfall est une représentation du chargement des éléments de votre page web par le navigateur au cours du temps. Ce graphique est une mine...