Votre site se charge-t-il assez rapidement ?

Une étude récente montre que les internautes sont de plus en plus impatient et que la vitesse d’affichage des pages devient un vient critère de fidélisation pour les sites de ecommerce.

Speedmeter par Mr. Bsod
Speedmeter par Mr. Bsod

Les internautes sont de plus en plus impatients

Si l’on en croit une étude américaine récente, malgré le haut débit, les internautes sont de plus en plus impatients. Ainsi, près de la moitié des visiteurs d’un site n’attendent pas plus de 2 secondes pour qu’une page se charge, à fortiori la page d’accueil. Après ? Pshhhit (comme aurait dit un ancien président), ils dégagent ailleurs.

Les sites français sont trop longs

Voilà qui est inquiétant et devraient interroger les responsables des principaux sites ecommerce français, car, plus le trafic d’un site est fort, plus il est difficile de servir des pages à la vitesse éclair de 1 page en moins de 2s. Pour la bonne cause, je me suis livré à une mesure de vitesse d’affichage (avec l’outil WebsiteOptimization) des 10 premiers sites ecommerce français (je n’ai pas compté ebay ou tous les sites qui ne montraient pas des produits sur la page d’accueil) et voici les résultats :

  • priceminister.fr : 16,39 s
  • 3suisses.fr : 33,43 s
  • amazon.fr : 13,09s
  • laredoute.fr : 70,12 s
  • cdiscount.com : 17,56 s
  • kiabi.com : 21,05 s
  • pixmania.fr : 96,4 s
  • rueducommerce.fr : 41,99 s
  • carrefour.fr : page trop lourde
  • spartoo.fr : 21,44 s

Même si on divise ces temps par 3 (pour être à peu près dans la moyenne des vitesses de connexion en ADSL), sans surprise, pas une page ne se charge en moins de 2 seconde. Pas étonnant, avec la prolifération du haut-débit, celles-ci ont plus eu tendance à s’alourdir que le contraire et le poids est loin d’être, comme c’était il y a quelques années, une préoccupation des webmasters. Bien sûr, ces temps sont relatifs et, en réalité, lors du téléchargement d’une page, ses premiers éléments apparaissent sans doute en deça des 2 secondes fatifiques.

La vitesse comme élement fidélisant

Néanmoins, il est intéressant de noter, et l’étude le souligne, que la vitesse peut être un élément de fidélisation de vos clients. Plus le site est rapide et plus l’expérience d’utilisation mémorisée sera agréable et plus les utilisateurs auront tendance à revenir et, mieux encore, à louer les vertus de votre site auprès de leur entourage. C’est pas beau ça ? Petit rappel pour les plus jeunes, à l’aube des années 2000, c’est sur cet élément vitesse que Google avait fait la différence auprès de ses concurrents de l’époque et les avait définitivement distancé.

Les solutions pour optimiser les temps de chargement

  • Choisir un meilleur hébergement : c’est le critère numéro 1. Si vous êtes sur un serveur mutualisé, passez sur un dédié. Si vous êtes sur un dédié, choisissez une machine plus puissante. Si vous êtes déjà sur une machine puissante, prenez plus de bande passante, etc. Evidemment, tout cela dépend de la taille de votre trafic
  • Alléger le poids des images : avec le haut débit encore, la tendance est  lourde à générer des beaux jpeg ou des grands png. Pareil pour le design du site : plus le débit est haut, plus on retrouve des design chargé en petit gif, jpeg, jolis boutons et autres coins arrondis qui font le bonheur du designer, mais « pourrisse » la vitesse de téléchargement. Faites donc le ménage et demandez-vous si tous vos jolis graphismes en valent toujours la peine ou si ils sont là uniquement pour vous faire plaisir
  • Optimiser le code : c’est la partie la plus ardue et aussi la plus traître. Les feuilles css et les scripts javascripts finissent par surcharger votre page. Exemple : les librairies comme Scriptaculous ou MooTools permettent de faire de très jolies effet, mais ajoutent des 10zaines de kilo-octets à toutes vos pages quand ce n’est parfois nécessaire que sur une page. Pareil pour les css, évitez de charger toute votre css pour toutes les pages. Fractionnez-les et utilisez le code nécessaire que lorsqu’il est nécessaire. J’ai entendu dire récemment sur un gros site marchand qu’il ne pouvait plus rajouter de code javascript, car la quantité qui était envoyée au navigateur dépassait sa limite de capacité à traiter ce langage (je ne savais même pas qu’il y avait une limite).

Et vous, votre page, elle se charge en combien de temps ?

38 commentaires

  1. ah ben moi qui me faisait du souci pour mon site que je suis en train de faire parcequ’il mettait plus d’1sec 30 à se charger jsuis bien loin de ces mastodontes lol

  2. Que pensez des résultats proposés par http://site-perf.com ?
    Ils sont vraiment différents de ceux mentionnés par WebSiteOptimization. Pour un exemple concret mon site passe de 2,9s selon Site-perf à 29,53s selon WebSiteOptimization, soit un coef de 1 à 10 !!!
    La vérité est certainement entre les deux, mais où ?
    Et les 2 sec pour le client commencent quand : à partir du moment ou il a cliqué, à partir du chargement de la page blanche… La différence vient certainement aussi entre le temps de réponse (on voit qu’il commence à se passer quelque chose sur la page) et le temps de chargement complet de la page.
    Je crois en fait que le plus intéressant dans WebSiteOptimization ce n’est pas le résultat en nombre de seconde, mais bel et bien les recommandations d’optimization !

  3. @simonB : merci de tes remarques. En fait, les mesures de WebSiteOptimization donnent un temps de téléchargement total pour une connexion T1 (soit 1024Ko, si je ne m’abuse ?). Il faut donc diviser ces temps par 3 ou par 4. Mais là encore, WebSiteOptimization ne tient pas compte du délai d’affichage. Effectivement, une page lourde comme Laredoute.fr doit pouvoir s’afficher en quelques secondes seulement avec les premiers éléments téléchargés en moins de 2s.
    Je suis donc d’accord avec vous. Ce qui est intéressant dans WebsiteOptimization, ce sont les recommandations et je ne connaissais pas site-perf.com que je vais me hâter de bookmarker pour mes futurs tests.
    Merci pour le lien !
    PS :à propos des temps de téléchargement, remarquez qu’ils ne dépendent pas entièrement de votre serveur et de votre bande passante, mais également de celle des clients. Ainsi, on peut croire que le haut-débit est très répandu en France. C’est vrai, mais cela recouvre de nombreuses réalités. Si, dans les centre villes, certains peuvent atteindre des 20Mo de bande passante. En campagne, on peut être parfois plus proche du 512Ko. Alors, bien sûr, c’est plutôt à ces derniers utilisateurs qu’il faut penser.

  4. Et pour cette page : 17,21s selon WSO
    Bon, d’accord, ce n’est pas un site de e-commerce et de toute façon l’intérêt des articles justifie l’attente raisonnable (6s sur ma connexion ADSL)

  5. Les problemes de perf peuvent être de différentes natures (code trop long a executer, trop d’images, trop lourdes, bande passante, SQL…) et les solutions sont nombreuses en fonction du probleme. C’est un vrai casse tete (comprendre : super interessant ^^).

    Dans le cas de WebsiteOptimization je pense qu’il n’est pas tres interessant de l’utiliser en france, il semble que les serveurs se situent aux US.

  6. Merci Captain de faire le point sur ce thème.

    J’ai commencé les sites en 1995 et j’ai donc toujours privilégié le poids de mes pages en faisant de micro sacrifices sur le design.

    Avec l’utilisation du css et des javascript à outrance, il est de nouveau primordial de surveiller le poids des pages et des graphismes doivent être optimisé au plus juste. Ainsi des outils comme Smushit permettent d’améliorer le résultat.

    Le problème ce sont les client des agences qui n’y connaissent rien et qui veulent absolument plein de trucs même si on les prévient que cela devient limite pour le poids de la page.

    Donc, pitié, faites confiance à votre prestataire expérimenté qui essaye de vous faire comprendre qu’un site comme priceminister ne passera pas sur un hébergement à 30€ / an !!!!!

    Petite anecdote qui n’a rien à voire avec le sujet : Combien pensez-vous qu’un petit site d’un hôtel avec plein d’erreurs de développement (javascript qui appel le contenue sans l’afficher dans le source), doit payer par an pour être référencé premier sur une requête devant des centrales de réservations internationales ?

  7. Tout à fait d’accord avec Tanguy, et je suis content de voir que la prise de conscience (quant à la performance web) continue. Mon ressenti est encore qu’on fait passer le respect des délais avant la performance surtout dans les agences.
    Alors que cette recherche de performance dès le début permettrait une réduction des coûts et un meilleur retour sur investissement.
    Je me suis intéressé au sujet il y a pas très longtemps et j’ai réalisé cette petite application web, qui ne fait que noter (sur 20) 2 éléments de base pour assurer une meilleure performance: le cache et la compression
    http://cache.jemba-chrislain.fr

    Et le résultat est assez surprenant: Déjà 580 sites (ou plutôt pages testées) et seulement 195 ont la moyenne.
    Enfin bon j’espère que les choses changeront … un grand merci pour ce sujet

  8. Bonjour Capitaine,
    Je suis très surpris des résultats fournis par le site que tu mentionnes.
    Pour ma part, je suis partie prenante dans l’un des 10 sites que tu as testés.

    Comme le fait entendre SimonB, mon site passe à 1,85s avec Site-perf.com. Temps de réponse que j’ai pu controler avec YSlow (Plugin de FireFox) ou nos sondes de mesure de temps de réponse (qui sont des sondes qui passent par les FAI pour avoir un temps de réponse qui reflète réellement l’expérience utilisateur).

    Il faut savoir une chose, c’est que les navigateurs chargent les éléments d’une page en parallèle (multi-threading) et que site-perf.com prend en compte ce fonctionnement alors qu’il semble que WebsiteOptimization ne le fasse pas.

    Malgré mes remarques (plutôt techniques) ce billet permet de montrer que le temps de réponse d’un site est un élément essentiel dans l’expérience internaute. Donc, si j’ai un conseil à formuler, il faut prévoir, mesurer régulièrement, et agir en conséquence. Et comme le dit Cobolian si justement, c’est un vrai casse tête (difficile mais passionnant).

  9. @Memphis : oui, les résultats sont un peu surprenant et tu as raison, il s’agit, me semble-t-il, du temps total de téléchargement sur une T1 (donc, du haut-débit, mais pas très haut). Les chiffres sont à diviser en moyenne par 3 ou 4. Bon, sinon, il faudrait que je refasse le test avec Yslow. Ce sera peut-être plus probant.
    Cela dit, 3suisses.fr, chez moi, à vue d’oeil, mais au moins 2 ou 3 s, voire plus, à se télécharger entièrement.

  10. Attention, je réagit concernant votre vision d’un connexion en T1.

    Vous faites tous la remarque comme quoi une T1 est moins performante qu’une connexion ADSL. Je nuancerais cette vision, car, pour simplifier, une T1 et beaucoup plus stable sur ses débits. Donc, j’imagine, qu’ils ont choisi cette méthode de calculs pour leur exactitude. Parce qu’une connexion adsl, c’est vraiment aléatoire comme résultat ….

  11. Ping : Twitted by tsps
  12. On bosse depuis quelques temps dans ma boite sur l’optimisation de la vitesse d’affichage sur notre logiciel e-commerce, notamment sur des sites assez chargé.
    Je voudrai donner quelques infos (en vrac) sur les css et javascript à fractionner.

    En fractionnant, on multiplie les requêtes http, et donc les temps de latence entre chaque requête. Selon la configuration du serveur, cela n’est pas forcément rentable. Il faut peser le pour et le contre, et surtout tester.

    Autre élément, sur les framework javascript. Il faut bien-sûr toujours utiliser la version compressée et non pas celle de développement, pour 2 raisons : la taille du fichier est plus petite et la consommation en ressources dans le navigateur est moindre.

    On utilise rarement 100% du framework javascript. Il est donc quasiment toujours intéressant de le recompiler qu’avec les éléments nécessaires. ExtJS fait cela très bien.

    Un point important avec des applications riches, il y a certes le temps de téléchargement des données, mais il y a aussi le temps d’exécution sur les PC anciens. Les développeurs ont des PC a priori récents, mais il est bon de sortir une antiquité (ou d’en virtualiser une), pour tester avec peu de RAM.
    On a très souvent des surprises, et bien qu’il soit possible de mesurer ces vitesses en production grâce à ajax, cela peut être lourd.

  13. Merci pour cet article très intéressant. La problématique est clairement posée et les solutions pertinentes. Toutefois je rejoins les commentaires sur les valeurs numériques fournies par websiteoptimization.
    Celles-ci me semblent en effet anormalement élevées, tellement que j’ai testé sur les différentes connexions à ma disposition, de manière empirique d’abord – pour constater que les délais étaient bien surestimés – puis avec YSlow.

    Je vous livre donc mes résultats (sur connexion ADSL+) en reprenant ceux de websiteoptimization entre parenthèses :
    – priceminister.fr : 2s (16,39 s)
    – 3suisses.fr : 6s (33,43 s)
    – amazon.fr : 5s (13,09s)
    – laredoute.fr : 5s (70,12 s)
    – cdiscount.com : 4s (17,56 s)
    – kiabi.com : 2s (21,05 s)
    – pixmania.fr : 5s (96,4 s)
    – rueducommerce.fr : 2s (41,99 s)
    – carrefour.fr : 6s (page trop lourde)
    – spartoo.fr : 5s (21,44 s)

    J’ai arrondi à la seconde, il faudrait réaliser un vraie campagne de tests pour obtenir plus de précision significative, mais on constate que les résultats « en vrai » sont bien meilleurs.

    Je me demande également de quelle manière websiteoptimization considère les « pre-home » flash ou lightbox (ou les deux).
    En outre et pour finir, sur certains sites le temps de chargement complet inclut l’affichage d’images se trouvant en toute fin de page, affichage non indispensable à la navigation.

    Benjamin.

  14. @Benjamin : je voulais refaire moi aussi les mesures avec Yslow. Merci pour les résultats… qui ne donnent pas une réponse finale avec la problématique. Comme dit Maxime, il faudrait aussi tester tout ça avec une vieille bécane, pourquoi pas sur une connexion pas trop rapide…

  15. Ping : pligg.com
  16. Il ne faut pas oublier aussi la mise en cache de certains éléments. Les sites qui font parti de cette liste sont très visités et re-visités. Une fois en cache, les sites « parraissent » beaucoup plus rapide. Sur Yslow, il est possible de comparer les 2 (en cache ou pas).
    Ce qui est certain, c’est que ce sujet est clé pour faire du bon business.

  17. Hello Capitaine ! Article intéressant mais par contre tu n’as pas testé le site Fnac.com dans ton benchmark qui est pourtant dans les plus gros sites ecommerce.

  18. Bonjour Captain,

    Article très intéressant. J’ai testé sur le site institutionnel de ma société et j’obtiens 21,87 seconds en t1.
    Je me rends compte qu’une partie de l’optimisation est réalisable (modification de la feuille de style, réduction du poids des images ou des médias…) mais qu’une autre partie est plus problématique (nombre d’objets dans la page, nombre d’images).
    Au delà des résultats, il est nécessaire de penser à ces éléments dès la conception du site au risque d’avoir à repenser son intégration voir même l’ergonomie…

    Pour le javascript, google propose deux outils pour optimiser la taille des fichiers : closure tools et closure compiler.

    http://www.alsacreations.com/actu/lire/899-optimiser-les-javascripts-avec-google-closure-tools-et-closure-compiler.html

    Bonne journée

  19. le problème je pense viens aussi de la non connaissance, pour les gros sites pas trop d’excuses, ils doivent soit passer par une agence qui doit connaître son métier, ou avoir un service interne, même remarque
    Mais pour les petites gens (comme moi) qui n’y connaisse que ce qu’ils lisent pour évoluer, c’est dur de tout prendre en compte pour optimiser son site de la meilleure façon qu’il soit surtout en passant par un système tout fait comme wordpress

Laisser un commentaire

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.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.