De l’aberrante dérive du poids des pages d’accueil

Savez-vous combien pèse la page d’accueil de Yahoo ? Cette question n’est pas anodine car cette valeur a été pendant longtemps une unité de référence pour la vitesse de chargement des pages d’un site web. En presque 10 ans passés en agence, je ne compte plus le nombre de cahiers des charges et brief où il étai stipulé que le poids des pages du futur site du client ne devait EN AUCUN CAS dépasser la limite de 30 Ko (le poids théorique de la page d’accueil de Yahoo! dans l’inconscient collectif).

Puis il a été question de 60 Ko…

Puis ça a été l’avènement de l’ADSL, les années YouTube et maintenant plus personne ne se soucie du poids des pages. Il faut dire que les foyers français sont équipés en haut-débit à plus de 95% (ADSL + câble + fibre, si mes sources sont exactes), donc plus la peine de se soucier du temps de chargement.

Oui mais voilà : Il fut un temps où la page d’accueil de Yahoo! pesait 30 Ko, mais cette époque est loin derrière nous et je constate une inflation alarmante (euphémisme) dans le poids des pages d’accueil qui dépassent fréquemment le Mo. Ce fameux « poids » correspond à l’espace disque occupé par l’ensemble des fichiers qui composent une page d’accueil (HTML, javascript, css, flash, images…).

Je me suis amusé à comparer les pages d’accueil de certaines boutiques en ligne française, et le résultat n’est pas brillant :

Non vous ne rêvez pas, pour avoir le privilège d’admirer la page d’accueil de Cdiscount il vous faudra télécharger près de 220 fichiers pour un total avoisinant les 3 Mo. Hallucinant ? Oui, surtout dans un marché aussi concurrentiel. PriceMinister s’en sort très bien avec une page bien plus légère que les autres dû à une utilisation très limitée des images (contrairement à Cdiscount).

Concernant les sites d’information, c’est encore pire :

Même si les mega-bannières et autres publicités au format vidéo plombent la page, n’est-il pas aberrant de ne pas trouver un site d’information sous la barre des 2 Mo ? Et ce n’est pas forcément mieux de l’autre côté de l’Atlantique :

Concernant les grands portails, la moyenne est moins élevée :

De façon surprenante, les grands portails sont plutôt raisonnables dans leur utilisation de la bande passante. Mention spéciale à Facebook qui dépasse la barre des 2 Mo avec une ribambelle de fichiers javascript. Vous noterez au passage que les deux moteurs de recherche pèsent rigoureusement la même poids (je ne sais pas trop quoi en penser…).

Bref, cette rapide étude concurrentielle nous révèle une vérité bien dérangeante : Les pages d’accueil de sites de news sont plus lourdes que certains plug-ins dont le temps de téléchargement est soit-disant rédhibitoire. Même si nos liaisons ADSL sont très performantes, les tuyaux ont des limites et le nombre de fichiers à télécharger nous éloigne toujours plus de la limite symbolique des 2 secondes pour charger une page d’accueil (le temps d’attente est directement lié à l’expérience utilisateur).

Tout ceci est très dérangeant, surtout à partir du moment où Google annonce qu’il va prendre en compte le temps de chargement des pages dans son algorithme. Oups, c’est justement ceux qui ont le plus besoin d’un bon référencement (commerce en linge, news…) qui vont se faire dégrader. Je ne peux que me réjouir de cette annonce car cette escalade dans le poids des pages d’accueil n’augure rien de bon et surtout rend les éditeurs fainéants.

Pourtant il existe de nombreuses façons d’optimiser le poids des pages en limitant le nombre d’images, en optimisant les fichiers HTML et javascript… J’imagine que l’arrivée à maturation des terminaux de consultation alternatifs (smartphones, touchbooks…) va inciter les éditeurs à se remettre en question.

61 commentaires pour “De l’aberrante dérive du poids des pages d’accueil”

  1. Posté par Pinkfrenetik a dit : le

    Price Minister… Ça serait 512 Ko plut^pot que 512 Mo non ? :p

  2. Posté par Gpenverne a dit : le

    Il est vrai que ça grimpe vite, mine de rien … Ma homepage fait 2.16mo (sûrement à cause de la régie pub-vidéo), ce dont je ne me rendais même pas compte.

    Merci pour cet article !

  3. Posté par Kaaviar a dit : le

    Par manque de temps je ne peux pas tester mais as-tu pu vérifier que la taille de la page en chargement n’était pas liée au débit ?

    Il y a quelques années j’avais trouvé un script JS permettant de faire ce distingo.

  4. Posté par Maxx a dit : le

    Il faut vraiment l' »espérer » très fort…
    Personnellement, quand je vois l’incompétence flagrante de nombreux ingénieurs/développeurs d’interfaces web (quelque soit le langage derrière, PHP, JSP, ASP pour les + courants) en termes de conception « propre », je doute qu’on arrive rapidement à des notions d’optimisation du poids. Peu de monde en a réellement conscience.

  5. Posté par l'Ours a dit : le

    C’est doublement se mettre une balle dans le pied quand on voit le parc grandissant de terminaux légers.

  6. Posté par gpenverne a dit : le

     » la taille de la page en chargement n’était pas liée au débit  » >> Pour ma part, j’ai juste fait « enregistrer sous » sous firefox, il enregistre automatiquement les css, js, frames et flash (swf). Je ne sais pas si c’est la meilleure technique, ceci dit.

  7. Posté par ¥€$ a dit : le

    Zuneo 18 Ko

  8. Posté par Anthor a dit : le

    On m’a rit au nez en agence web, quand j’ai osé parlé du poids de la page !

    Je pense qu’on peux aussi ajouter que même si en France, nous avons de bons débits, c’est loin d’être le cas partout.

    J’imagine bien aux États-Unis le temps qu’il faut pour charger la page du LA Times :s

  9. Posté par Frédéric CAVAZZA a dit : le

    @ Pinkfrenetik > Oui c’est bien 570 Ko pour PriceMinister (corrigé dans l’article).

    @ Kaaviar > Non j’ai fait un simple « Enregistrer sous… » dans Safari.

    @ Maxx > Oui je prédit une remontée de la côte des « experts Front Office » qui seraient justement chargés d’optimiser les templates.

  10. Posté par Hugues a dit : le

    firebug permet d’avoir le poids de la page avec tous les éléments ainsi que le temps de téléchargement.

    396 KB pour la home Meetic, 1,3 Mb une fois loggué…
    Par contre, pour LeMonde, si j’ai bien plus de 250 fichiers, le poids n’est que de 1.1 Mb

  11. Posté par Caraibes35 a dit : le

    Gp enverne, ta régie balance des pubs flash en béton, j’ai pesé 606ko de swf (tiens je croyais que les vidéos étaient streamées et pas chargées, j’ai du gourer…)

    Pour le contrôle du front, je vous conseille FF avec Firebug et page-speed. Quand à la vitesse moyenne du site il faut suivre dans Google webmastertools (nb quelques pages lourdent suffisent à plomber la moyenne du site)

  12. Posté par Blawesom a dit : le

    J’ai fait des tests avec Opera et IE8, je n’ai même pas des résultats identiques, que ce soit sous « archive Web » ou « pages complètes » (avec images).
    De plus, je pense qu’on ne prends pas en compte le volume qu’occupe le flash selon les sites (non téléchargés lors de l’enregistrement, si je ne m’abuse…)

  13. Posté par Tony a dit : le

    En ce moment l’optimisation du poids des pages reviens à la mode. La tendance est visible sur les blogs de développeurs web ou les sites similaires.
    Il me semble que Amazon avait détecter qu’une augmentation du temps de chargement de 0,1 seconde réduisait les ventes de 1% (et vice-versa).

    @Anthor: sauf sur les gros projets, je pense que les agences web se fiche du poids des pages.
    Sur le site vitrine d’une entreprise alpha, est-ce que le possesseur de l’entreprise souhaite vraiment dépenser 10% de budget supplémentaire pour gagner 10% de temps de chargement en moins (chiffre totalement aléatoire juste pour illustrer mes propos). Surtout que ce client n’a probablement pas conscience de l’impact de ce facteur.
    Je pense qu’il va encore falloir un petit peu avant que la réduction du poids des pages se généralise aux petits projets web, mais ça va venir.
    Par contre, je regrette la réaction de l’agence web, s’il s’agissait d’un gros projet.

  14. Posté par Renardudezert a dit : le

    Je vais ajouter mon petit grain de sel a cet article.

    En faisant « Enregistrer sous … » on passe a coté d’un élément essentiel du web : Le serveur web (prenons par exemple Apache pour ne citer que lui). En effet, le serveur permet lorsqu’il est bien configurer d’activer certains modules qui sont assez « utiles », cf le mod_deflate d’apache (qui active la compression gzip). Je ne vais pas entrer dans le detail ici, car ce n’est pas le sujet de l’article.

    Pour tester le poids effectif d’un site web, vous pouvez vous faire une idée grâce a GTMetrix, et la on voit une énorme différence entre les chiffres de cet article et le poids réel des pages (pour info, Facebook, Yahoo et MSN font quand même parti du Top1000 des sites testés sous GTmetrix).

    J’ai donc :
    Facebook : 42 KB (On est loin, très loin des 2Mo annoncés)
    Yahoo : 366KB
    MSN : 571KB (et la j’admets que le chargement de la page en 8.15, c’est très loooonng pour un portail)

    @Maxx : encore une belle généralité sur les développeurs. Soit, j’ai vu et je continue de voir un certain nombre d’énormités au niveau code (surtout au niveau des requêtes SQL), mais c’est un peu tout le temps le même discours. Je pense qu’il ne faut pas oublier un élément important qui entre en jeu dans le temps de chargement des pages, c’est l’optimisation des images (et je sais que beaucoup pensent que les images sont optimisées, alors qu’en réalité …).

    Sinon il est vrai que plus on a de ressources et plus on les utilise, souvent au détriment des performances pures.

  15. Posté par Auto-Entrepreneur Lyon a dit : le

    Bonjour,

    toujours intéressant de voir les pratiques des sites de grosses « marques ».

    Pour cdiscount je confirme avec Firebug que la page fait bien 2.1Mo.

    Quand je vois que ma page fait 300K et que j’essaie d’améliorer via les sprites etc… Ils ont encore du boulot je pense chez les e-commercants niveau ergonomie.

  16. Posté par jonathanulco a dit : le

    Au sujet du développement et plus particulièrement du temps de développement en agence, le fait est qu’on a pas trop le temps d’optimiser les requêtes serveurs. On marche par rush pour un site lambda faut qu’en deux jours il soit pondu. Pour des techniques comme les « sprites » qui sont plus long à mettre en place parfois on cherche pas à prendre le temps de les faire. Allez expliquer au client que ça va prendre une journée de plus de faire son site pour l’optimisation du poids, le « web c’est facile »

  17. Posté par Brett a dit : le

    SearchEngineLand vient justement de communiquer sur les principales données du Google Web Report :
    « …
    Highlights:
    * The average web page takes up 320 KB on the wire.
    * Only two-thirds of the compressible material on a page is actually compressed.
    * In 80% of pages, 10 or more resources are loaded from a single host.
    * The most popular sites could eliminate more than 8 HTTP requests per page if they combined all scripts on the same host into one and all stylesheets on the same host into one.
    … »
    http://searchengineland.com/google-web-report-average-page-size-320-kb-46316
    http://code.google.com/speed/articles/web-metrics.html

  18. Posté par apwn a dit : le

    Je me demande si ces sites vont changer leur stratégie depuis qu’on a appris que Google prendrait en compte le temps de chargement dans l’affichage de ses résultats.

    Ainsi un site A identique à un site B mais moins lourd serait privilégiée en termes de référencement. Après il faut voir qu’elle poids cette donnée a concrètement dans le référencement.

    Réflexion intéressante cependant

  19. Posté par Bertrand a dit : le

    J’ai toujours essayé de privilégier des pages relativement légère en poids dans leur structure afin de permettre une meilleure qualité au niveau des images notamment. Cependant j’ai actuellement des pages d’articles qui font dans les 1,7 Mo dont pas moins de 700 pour les modules sociaux de Facebook : Like Box et Bouton j’aime. Je peux faire du sprite, rassembler les feuilles de styles, compresser… Le plus gros gain serait d’enlever ces outils.

  20. Posté par ¥€$ a dit : le

    Alt + cmd + I dans Safari ou Chrome (ou Ctrl + Shift + I) pour ouvrir l’outil de développement et voir le poids d’une page http://i.imgur.com/bo5Fh.png