Avoir un site web adaptatif ne suffit pas. Pensez au temps de chargement !

Votre site web en repsonsive design (design adaptatif en fonction de la taille et résolution de l’écran) est beau à voir. Mais qu’en est-t-il des temps de chargement ?

Internet Mobile HTML 5 Pixabay

Depuis quelques années, le paysage du web a énormément changé. D’un côté, les entreprises ont compris l’importance que pouvait prendre une bonne image sur internet et investissent maintenant plus sur les sites web et les réseaux sociaux. De l’autre, les machines, ainsi que les accès à internet évoluent. De ce fait, les concepteurs de site web peuvent se permettre quelques fantaisies.

Par ailleurs, la notion de responsive design ou site web adaptatif est apparue. De quoi s’agit-t-il ? Lorsque vous concevez un site web, vous ne devez pas uniquement songer à votre écran. Alors que vous développez votre site web sur un écran de 22 pouces, votre visiteur pourra y accéder depuis un smartphone ou une tablette. Et il n’est plus nécessaire de répéter que le mobile prend actuellement une place très importante. Par exemple, si votre trafic provient principalement de Facebook (pauvre de vous), il y a de fortes chances pour que la majorité des visiteurs soient sur mobile.

Mais même si vous avez un excellent visuel sur les smartphones, un autre élément est à prendre en compte : le temps de chargement d’une page. S’il est trop lent, il peut faire perdre des visiteurs. Récemment, la firme Trilibis a publié une étude sur ce sujet. Elle a analysé 155 sites web dits « responsive » et a révélé que seulement 21 % de ceux-ci avaient un temps de chargement de moins de 4 secondes. De plus, 32 % de ces 155 sites web mettaient entre 8 et 48 secondes pour charger.

En investiguant le problème, ils ont découvert que parmi les facteurs qui causent ce temps de chargement lent, le poids des images était le principal. Ceci peut être justifié par le fait que les sites adaptatifs sont généralement conçus pour apporter une bonne expérience visuelle, au dépend de l’aspect pratique. Tribilis pointe notamment le fait que les smartphones ne bénéficient généralement pas des mêmes ressources et de la même connexion qu’un ordinateur (sur lequel le poids des pages n’est plus réellement un problème).

Par ailleurs, les analyses de Trilibis ont révélé que le temps de chargement d’une page n’est plus « acceptable » lorsque le poids de celle-ci excède 1MB. Et dans la plupart des cas, ce sont les images qui sont en cause.

(Source)


13 commentaires

  1. Compression des images, mise en cache du navigateur, les CSS sprites (coller les images côte à côte dans une image et indiquer la position au CSS pour que ça charge plus vite), et optimisation javascript (footer) / css sont vraiment les clefs pour accélérer le temps de chargement. Les plugins bouffent beaucoup de temps…

    On parle aussi de chargement en différé ou en parallèle du JS…

    Maintenant avec des plateformes comme WordPress, je dois dire que même si je comprends la théorie, en pratique je trouve ça difficile à mettre en place quand on n’est pas super doué en programmation…
    A part la compression des images (genre compression-photo.com), je n’ai pas pu optimiser plus que ça mon site, ayant de fortes lacunes en codage…

    Pour avoir un bon aperçu de la rapidité et des conseils: GTmetrix est vraiment bien, sinon le Pagespeed de google.

    Et si jamais dans l’audience, il y a quelqu’un qui gère WP et qui veut optimiser mon site, je suis preneur :p :p

  2. L’histoire du web est comme l’histoire du monde : on dirait qu’elle se répète ;o)

  3. luckygulli

    @JeRetiens : OK pour la compression, OK pour les sprites, OK pour les chargement différés et parallèles… Autant, je pense qu’ici, la mise en cache n’est pas un de leurs critères, ou alors très faible… Je sais pas quelle espace les téléphones se laissent pour ça, mais le soucis vient aussi des premières connexions… Parce que sur mon forum, le chargement est de moins de 5 secondes (Médiane)… Et pourtant, le premier chargement de la page (donc sans cache) rend le chargement catastrophique…
    Ça fait d’ailleurs plusieurs semaines que j’essaye de mieux utiliser les sprites, de passer par des serveurs plus rapide pour les images… Mais la mise en cache est déjà en place sur tellement de site, que c’est plus ça le soucis…

    Moi, personnellement, j’utilise phpBB (via forumactif), et je vais devoir me casser la tête pour mettre en sprite la barre de menu…

    Aussi à mon avis, les sites pensent à ce temps de chargement long, et mettent une sorte de sas… Pour faire patienter pendant le chargement…

  4. Je suis okay bien sûr sur le fond de l’article qui met l’accent sur les vitesses de chargement. Par contre, il faut à chaque fois mettre en relation le site avec ses utilisateurs cibles. Tout simplement parce qu’on ne peut pas généraliser l’utilisateur mobile, surtout depuis l’arrivée de la 4G… Parfois donc un téléphone aura un meilleur débit en download qu’un ordinateur de bureau…

  5. Si vous avez un serveur apache, je vous conseille d’utiliser le module pagespeed de Google. C’est tellement efficace ! La plupart des optimisations sont automatiques même si on peut aller plus loin dans les réglages.

  6. Pour compléter la liste de JeRetiens sur les services web qui mesurent le temps de chargement d’un site : Pingdom.

    Autrement, sympa la prochaine version de Presse Citron (non masquée sur le serveur, c’est normal ?).

  7. Un exemple de temps de chargement très long c’est bien presse-citron : cela fait un bon moment que lors du chargement de la page, il essaye de charger un truc (une pub) sur frogz.fr et cette page n’existe pas ou plus. Du coup j’ai un temps de chargement de 10 secondes avec une page totalement blanche et j’avoue que des fois je n’ai même pas la patience d’attendre et je zap.
    La grosse pollution des boutons j’aime, twitter, g+, pinterest ralentis bien le chargement aussi…

    • Eric

      @vinz : oui le widget pub Frogz ralentit parfois le site, j’ai déjà prévenu l’annonceur, je l’ai même retiré pendant quelques heures la semaine dernière, mais je crois que ces derniers jours ça va mieux. Pour les boutons de partage sociaux, il n’y a pas de ralentissement puisqu’ils se chargent en dernier, en asynchrone une fois la page affichée. Et je les ai supprimés depuis longtemps de la home, ils sont juste sur les articles.

  8. Il « suffit » d’utiliser des techniques « adaptatives ». C’est à dire de détecter l’environnement (connexion, résolution, taille écran…) et de ne renvoyer que les bonnes images au bon poids (selon que l’on veuille du retina HD ou non). Ex : http://adaptive-images.com/
    C’est ce que l’on appelle du RESS (Responsive Web Design + Server Side Components)

    Attention à l’utilisation de sprites sur mobile… ça utilise pas mal de mémoire et il y a même une taille limite de la « planche’.
    cf. ttps://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ReducingHTTPRequestswithSprites/ReducingHTTPRequestswithSprites.html

  9. Bonjour,
    Certains on déjà nommé les outils principaux pour faire des tests de performance et optimiser leurs sites, mais attention de ne pas tomber dans l’excès au détriment du confort utilisateur (chargement asynchrone à tout va, compression des images trop exagérée, etc…)
    D’ailleurs, @SNS ce n’est pas le Smartphone qui met en cache la page, mais le serveur qui génère une page statique (enfin il y a tjs un peu de cache navigateur évidemment, mais quand on parle d’optimiser son cache, on parle de celui du site, et non de celui de l’outil de consultation). Dans ton cas, si ta communauté est active sur ton forum, il y a de fortes chances que le cache de ton topic soit reconstruit à chaque fois qu’il y a un nouveau message…

    Enfin, je suis d’accord avec l’article, mais il faut noter également que malgré la taille physique des écrans de Smartphones, leur résolution est comparable à celle d’un ordinateur, c’est l’aspect ratio qui « zoom » pour rendre la lecture confortable. Cela implique donc que les images apparaîtraient pixelisées (car zoomée) si elle faisaient la taille émulé de l’affichage…On ne peut donc pas toujours avoir des images light si on veut qu’elle n’apparaissent pas pixelisées. Ça a été l’un des soucis au lancement des écran Retina d’ailleurs.

  10. Cette histoire de temps de chargement des pages qui doit pas dépasser 4/5 secs est une grosse connerie. Suivant le type de site c’est plus ou moins valable.
    Essayez de faire ça avec un site ecommerce ou par définition les images sont la pour faire vendre.
    Google dans son immense bonté à décider arbitrairement qu’un site n’ayant pas les bons chronos serait pénalisé par le moteur de recherche.
    On met donc au même niveau un blog traitant de poème (99% de texte) avec un site vendant de la porcelaine (99% d’image)

    Le problème est de trouver le juste milieu.
    J’ai des sites ecommerce qui se chargent relativement vite (dans les 5/6 secondes) sur mobile au détriment du contenu qui est forcément moins visuel.

Send this to friend

Lire les articles précédents :
Galaxy S5
Samsung Galaxy S5 : ce que vous devez savoir sur le Download Booster

Voici quelques informations qui sont bonnes à savoir au sujet du Download Booster du Samsung Galaxy S5.

Fermer