Votre site est-il suffisamment rapide ? Le cas carrefour.fr [Partie 2]

dareboost
Nous vous proposons aujourd’hui la seconde partie d’un article en partenariat avec le service DareBoost.com, dédié au test de qualité et de performance des sites web.
 

carrefourLes images, maux du web… et de carrefour : 

En entrant dans les détails, on remarque que les images représentent 87% du poids total de la page. Soit plus de 4Mo (sur le top 1000 des sites les plus visités au monde, les images constituent environ 60% du poids – source httparchive.org). Il y a donc une prépondérance inhabituelle des contenus iconographiques sur la page de carrefour.fr. Mais comme vous allez le découvrir ci-dessous, de nombreuses optimisations sont possibles sur leurs images, et l’on va donc pouvoir obtenir des gains importants sur ces contenus qui représentent 87% du poids de la page !

Des images non optimisées pour le web :

Il s’agit de l’oubli le plus récurrent lorsque l’on s’intéresse aux performances d’un site web. Et un site de l’importance de Carrefour n’échappe malheureusement pas à la règle. Une image est rarement exportée par défaut pour une utilisation optimisé sur le web. Lorsque vous créez une image, des données informatives et textuelles l’accompagnent souvent (données EXIF, description, date de création…). Ces données sont inutiles dans un contexte web. D’autres optimisations sont possibles, sans aucune perte de qualité. Nous n’allons pas rentrer dans les détails techniques, mais ce sont des opérations largement automatisables ! Ainsi, carrefour.fr pourrait facilement économiser 350ko de données, sans aucun changement visible sur ses images. Si l’on reprend notre rapide estimation d’utilisation de la bande passante, on obtient un gain de 7% !

Des images mal dimensionnées :

Le site tombe dans un autre piège fréquent : le redimensionnement d’images. Plus de 30 images, provenant de http://catalogue.carrefour.fr/, sont délivrées avec une taille de 352×617 pixels. Mais elles ne sont affichées qu’au format 138×170 pixels, soit plus de 6 fois plus petite. En créant des miniatures aux dimensions adaptées, le gain serait substantiel ! Les petites images, des ressources destinées à être regroupées Sur les 181 requêtes effectuées pour charger la page, 145 concernent des images… et une vingtaine d’entre elles pourraient être évitées. Celles qui concernent de petites images (dont la taille ne dépasse pas 96×96 pixels), qui peuvent être regroupées dans des sprites CSS. En quelques mots : cette technique consiste à regrouper les images au sein d’un même fichier et à tirer profit du CSS pour assurer un rendu totalement équivalent à l’utilisation de plusieurs images. Réduire le nombre d’images utilisées sur une page web, c’est réduire le nombre de requêtes entre un internaute et le serveur web. Or ces requêtes sont pénalisantes pour le temps de chargement. Les navigateurs web sont capables de traiter en parralèle plusieurs requêtes, mais cette capacité est limitée. Quand les requêtes à traiter sont trop nombreuses, un navigateur web doit en effet attendre qu’une requête s’achève avant d’en déclencher une nouvelle. En limitant le nombre de requêtes, on accélère donc de façon conséquence le chargement d’une page, et c’est exactement le but de l’utilisation d’une sprite CSS. Cette technique serait très pertinente sur carrefour.fr

Des images dupliquées :

Carrefour.fr utilise parfois la même ressource, mais par le biais de 2 URLs différentes. Par exemple, on trouve ces 2 images sur la page d’accueil de Carrefour :

Or ces ressources sont exactement identiques… Mais le navigateur ne le sait pas, et télécharge donc deux fois l’image. Ce même problème est présent 5 fois sur la page. Carrefour.fr peut donc éviter 5 requêtes totalement inutiles et limiter la quantité de données téléchargées par l’internaute.

De nombreuses images = lazy-loading  :

Les images affichées sur la page d’accueil sont nombreuses et toutes téléchargées à l’arrivée de l’internaute, alors que la plupart ne sont pas visibles sur son écran. Rappelons que le contenu au dessus de la ligne de flottaison (c’est à dire visible sans faire défiler la page), doit être chargé en priorité. Si une page est en longueur, il est très intéressant de donner la priorité au contenu dans cette zone ou à proximité immédiate.   Le lazy-loading consiste à ne télécharger que les images susceptibles d’être visibles par l’internaute, et de charger au fur et à mesure les images qui deviendraient nécessaires lorsque le visiteur fait défiler la page.   Pour carrefour, le lazy-loading pourrait s’appliquer de la façon suivante (la ligne rouge représente la ligne de flottaison, et les zones grises les images à charger si l’utilisateur se dirige vers le bas de la page) :

le lazy-loading possible sur carrefour.fr

 Sur cette page le lazy-loading permet de diviser par 2 le nombre d’éléments à charger au chargement initial de carrefour.fr, et et donc réduire considérablement les 4Mo d’images actuellement requis. On notera de plus qu’il est peu probable que l’essentiel du trafic consulte l’intégralité de la page, et c’est donc l’occasion de limiter fortement la bande passante utilisée, puisque seul ce qui est nécessaire à un visiteur lui est envoyé !

La première partie ici
La troisième partie ici 🙂

4 commentaires

  1. Il y a un point sur lequel je ne suis pas tout à fait d’accord c’est sur l’image qui est disponible sur 2 sous-domaines différents. On est d’accord que cela pénalise la bande passante puisque l’image est téléchargée 2 fois mais ça ne pénalise absolument pas le nombre de requête puisque le navigateur est limité à un nombre de requête PAR domaine. C’est peut-être d’ailleurs un solution d’optimisation qui a été mal utilisée qui consiste à disposer ses images sur différents sous domaine afin de multiplier le nombre de requêtes simultanées possible.

    Mais pour le reste entièrement d’accord. Carrefour « optimisme » mais n’optimise pas 😛

  2. @Gabriel : oui effectivement Carrefour utilise la technique du Domain Sharding, qui permet de détourner la limitation sur le nombre de requêtes des navigateurs. L’erreur remontée reste cependant pénalisante car on garde une limitation sur chacun de ces sous domaines, et l’on pourrait donc éliminer une des 2 requêtes.

Répondre à Gabriel Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Robin Commerce

Article de : Robin Commerce

Del, Robin ou encore Abdel ... certains pensent que je souffre d'un trouble dissociatif de l'identité haha. Vif et agile, votre Capitaine a fait de moi son compagnon d'armes dans sa quête sur le web :)