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 sur “De l’aberrante dérive du poids des pages d’accueil

  1. Ah, c’est amusant cette histoire d’optimisation des images. Si je regarde le poids de ta page d’accueil avec WebDeveloper, ce sont les images qui pèsent le plus. Tu as 1360 ko pour 29 images. La plupart sont au format jpg, par contre la plus lourde est au format… png. Pour moi, optimiser ce n’est pas seulement faire le plus léger mais choisir avant tout le bon format. Une petite capture d’écran d’une page web ne s’enregistre pas en jpg ! C’est moche, ça bave, c’est pas propre, mais… c’est plus léger. Si la taille fichier est vraiment une contrainte et si on a le soucis de la qualité de ses illustrations, on sabre dans les dimensions (largeur, hauteur). Mais c’est dommage d’en arriver là juste parce que Google l’a intégré dans son algorithme alors qu’une grosse majorité télécharge les infos de manière assez fluide.

  2. Impressionnant en effet.

    Toutefois, ces poids sont à relativiser, si les x mo sont téléchargés la première fois qu’on se rend sur le site, ce n’est plus le cas les fois suivantes grâce à la mise en cache dans le navigateur et/ou l’utilisation d’Ajax qui évite le rechargement complet de la page.
    Il est par exemple intéressant de noter que Google charge les images qui seront affichés sur la page de résultat d’une recherche dès la page d’accueil alors qu’elles ne sont pas affichés, ça permet paradoxalement de gagner du temps sur le chargement des pages suivante.

    Autre nuance à apporter également, sur la majeur partie de ces sites, le contenu n’est pas envoyé tel quel et subit différentes optimisations comme leur compression (gzip) avant d’être envoyé (ce qui, pour des fichiers de type html/js/css réduit considérablement le poids) et un « Sauvegarder Sous » ne permet pas de s’en rendre compte.

    Pour ce qui est du confort de l’utilisateur, si le site est relativement bien fait, les contenu les plus lourds ne se téléchargent qu’une fois que le contenu à proprement dit.

    Pour ce qui est de la lourdeur critiqué des plug-ins, ce n’est pas tellement leur poids qui est réellement critiqué mais le fait qu’ils se chargent qu’une fois que la page est chargée (ce qui fait qu’on a l’impression d’attendre plus longtemps) et qu’ils prennent trop souvent beaucoup de ressources comme le processeur ou la RAM ce qui a une fâcheuse tendance à ralentir le fonctionnement d’une machine

  3. @apwn je doute réellement que ça a une influence sur le référencement de ces sites. En effet, pour un crawler, il est difficile de de détecter les javascripts ou images qui sont ajoutés dynamiquement à la page (comprendre à l’exécution du javascript) ce qui permet à ces sites de paraitre léger pour les robots.

    Déjà que voir Google favoriser ceux qui ont les moyens de se payer un expert et/ou des serveurs rapides quand on parle de neutralité du net m’a choqué, quand on voit que ça ne permet pas forcement d’atteindre le but escompté (un web plus rapide), je doute du bien fondé de l’idée de Google.

  4. @ katsoura > Ha non pas d’accord, les images en PNG pèsent 2 à 3 fois plus lourd pour un résultat quasi-équivalent à l’oeil. Je suis très curieux de lire un argumentaire qui justifie le PNG au détriment du JPEG.

    @ Christophe Jean > Certes, il y a le cache, mais il me semble que cette excuse est ressortie à toutes les sauces (un bon prétexte pour ne pas se creuser la tête à optimiser).

  5. Article intéressant, nous avions deja remarqué cela.
    j’ai l’impression que les gros sites ont du mal avec leur home, c’est un problème vraiment crucial…

    PS:ton lien pixmania est une 404

  6. Je suis d’accord avec d’autres pour dire que toute cette belle « communication » de Google autour du poids des pages est une belle fumisterie! Plus Google communique sur un sujet, moins celui-ci est important. Un poids des pages plus bas permet à Google d’économiser des ressources et donc de l’argent, mais de là à l’intégrer à l’algorithme, si c’est le cas ça ne doit pas dépasser 0.5% de l’ensemble des critères, et encore.

    Le poids des pages, c’est comme Google Webmaster Tools: tout juste bon à faire bander certains webmasters, mais au final c’est de la rigolade..

  7. Pour les sites de e-commerces, je pense que le ratio

    perte de clients potentiels à cause d’une connexion trop faible / attractivité marketing liée au flash, javascript et nombreuses images

    leur est profitable.

  8. Un article interessant mais qui finalement est fonde sur des donnees pas tout a fait correctes.

    La technique utilisee pour « peser » la page n est pas correcte.
    En effet, comme souleve plus haut, l utilisation du mod_deflate permet d obtenir des poids plus petits a l envoie; la decompression de l objet se faisant au niveau du client.
    De ce fait, tous les chiffres annonces sur ce post sont potentiellement incorrectes et devraient etre recalcules avec un outil qui permet de constater les poids reels des pages
    recuperees.

    Ensuite, je souhaiterais repondre a Maxx concernant sa remarque sur la qualite des developpements.
    Je trouve plutot gonfle de dire que tous les inge/dev web sont des tanches.
    Si tu as travaille avec des losers, prends t en a ta hierarchie qui ne sait pas trouver les competences la ou elles sont.
    Je travaille personnellement pour une boite d hebergement opensource dans le departement R&D et je peux te garantir que les inge/dev web ne sont pas a blamer, certains sont plus que competent ; de meme si l on se penche du cote des admins c est le meme constat, certains sont plus que competents, d autres sont carrement incompetents.
    Y a des losers partout, inutile de generaliser a cause de mauvaises experiences.
    Je te souhaite de travailler un jour avec un inge/dev qui t apprendra ton travail ;)
    Pour conclure sur ce point, un bon admin proposera a un dev de mettre en place des solutions pour optimiser au mieu son temps de reponse/chargement comme par exemple mod_deflate, varnish, lighttpd, nginx, … suivant les cas.

    Enfin et pour conclure, pourquoi vous les blogger ne linkez pas vers les articles originaux ?
    Franchement c est pas pratique et vous partez dans le n importe quoi apres.

    Le lien vers l article original sur le blog de google webmaster :
    http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

    Le lien vers la premiere explication du score pour le loading time sur le blog d adwords (pour info) :
    http://adwords.blogspot.com/2008/03/landing-page-load-time-will-soon-be.html

    cya —

  9. @ Frédéric : pour le PNG au lieu du jpg, il n’y a qu’une seule raison : la gestion de la transparence, en conservant la qualité de l’image (contrairement au gif).

    Je rejoins les dires de RenardDuDezert sur la nécessité de bien paramétrer son serveur, pour effectuer moins de requêtes (expire-header, etags, cache-control) et compresser le transfert via Gzip.

    Et je conseille aussi l’utilisation de minify pour les css et les js, ainsi que des sprites au maximum pour les images de « déco ».

    Pour ceux intéressés par le fichier htaccess, j’ai fait un article complet dessus : Temps de chargement et Htaccess

  10. @Frédéric CAVAZZA > Je vais répondre à la place de katsoura mais contrairement au jpg, le png a la capacité d’être un format sans perte et est capable de s’optimiser par rapport au nombre de couleurs de la page etc…
    Mais sinon, il n’y a pas de bonne ou de mauvaises solutions, il faut voir selon ses besoins.

    Sinon, pour la partie qui me concerne, en effet, le cache ne doit pas servir de prétexte pour tout se permettre mais je voulais juste mettre en avant que ça n’a pas systématiquement une influence sur la qualité de navigation de l’utilisateur.

  11. Salut Fred,

    Tu as répondu @ Kaaviar > Non j’ai fait un simple “Enregistrer sous…” dans Safari.

    Cette technique n’est malheureusement pas super efficace car tous les fichiers images des CSS ne sont pas téléchargés et quelque fois le javascript charge également des éléments externes. Mais comme cette méthode a été appliquée sur l’ensemble des sites testés cela permet une bonne comparaison.

    Un autre lien intéressant : http://www.websiteoptimization.com/speed/tweak/average-web-page/ qui montre le poids des pages qui a triplé de 2003 à 2008.

    Pour ce qui concerne le développement je rejoins le point de vue de dz (2 commentaires plus haut) avec google webmaster qui encourage les professionnels à développer plus light à l’aide de très bons outils (plugin Firefox/Chrome).

  12. Le temps de chargement d’une page n’a jamais été proportionnel à la taille des composants qui la composent… D’ou un article faux concernant la partie prise en compte de Google…

    Beaucoup de sites, y compris Google et Yahoo font du post loading sur leur home page pour accélerer le chargement des pages suivantes.

    Ce qui est utile pour Google c’est le temps de premier affichage (domready je crois) et pas le chargement complet.

    Ensuite Google ne dit pas si il tient compte du temps de chargement du fichier HTML seul ou de l’ensemble de la page. Je penche plutot pour la première solution dans un premier temps.

  13. Est ce que c’est vraiment le bon débat? Beaucoup de pages lourdes sont positionnées et vice versa. Ça reste selon moi qu’un critère parmi tous. Très bon article en tout cas. Sinon en effet t’as une 404 sur ton lien pixmania
    Bonne journee

  14. Indépendamment de la méthodologie qui n’est pas bonne, le poids des pages n’est heureusement plus un problème aujourd’hui alors qu’il y a 10 ans c’était un critère très fort. Le haut débit est passé par là, et on ne se soucie plus du poids des pages, étant donné qu’elles se chargent toutes très rapidement : débits plus élevé, réseaux plus denses, serveurs et ordinateurs plus puissants.

    L’optimisation a un coût en matière de développement, il est donc normal de ne plus (vraiment) s’en soucier aujourd’hui à l’heure d’Ajax, Flash et autres technos côté client. Ce qui a eu l’énorme avantage de libérer la créativité et proposer de véritables contenus multimédia comme on disait dans les années 90 ;-)

    Aujourd’hui les terminaux mobiles mériteraient des sites optimisés, ce qui est loin d’être le cas, mais tout viendra en temps et en heure. Je me rappelle avoir travaillé en 2000 sur un site Wap quand presque personne ne surfait sur mobile en GSM.

    C’est la loi des cycles informatiques : mes jeux-vidéos tournaient sur une simple disquette 880 Ko sur mon Amiga, mais Dieu merci aujourd’hui ils font plusieurs Go.

  15. Ah lalala sans tomber dans les généralités, je suis face au comportement typiquement geek qui m’agace…
    Sous pretexte que le cache sauvegarde les scripts, images, CSS, et que la connexion devient plus performante, on se permet beaucoup de choses. j’ai l’impression que l’optimisation des pages est le dernier souci comme pour l’écologie. Je précise que personne, ici, n’a pensé au motif écologique. Eh oui, n’avez-vous pas pensé que plus le poids des pages est lourd, plus on charge les ordinateurs des particuliers (s’ils n’ont pas automatisé le nettoyage du cache) et les serveurs, plus on use les performances des machines, plus on dépense de l’énergie et de l’argent, plus l’impact sur l’environnement est élevé. Les serveurs se multiplient, les ordinateurs s’usent plus vite ? A quand la sobriété technologique (130 Ko pour une page d’accueil par ex) sans revenir à l’âge de pierre ? Eh oh arretez de vous prendre la tête sur comment mieux mesurer le poids des pages, optimisons les pages pour le bien de tous !
    Soyons écologeek !

    Annabel

Laisser un commentaire