Mesurer et améliorer le temps de chargement moyen d’une page web

rédigé par Jean-Baptiste, le juin 25, 2013

Un blog c’est comme une attraction dans un parc à thèmes, plus la file d’attente à l’entrée est longue, moins on a envie d’y rentrer.  Si votre page d’accueil de blog ou un de vos articles met plus de 3 secondes à se charger, vous risquez de perdre une partie importante de vos visiteurs qui ne supporteront pas de ne pas avoir un accès immédiat à l’information qu’ils sont venus chercher.

Vous devez toujours être obnubilé par le chargement rapide de vos pages. Celui-ci passe principalement par un hébergement rapide, l’utilisation d’images légères et compressées (<30 ko), une mise en cache efficace, une limitation des appels aux widgets hébergés sur des domaines externes, des fichiers CSS et javascript optimisés.

  1. Pourquoi c’est important d’avoir un site qui se charge rapidement ?
  2. Quel est le temps de chargement moyen d’une page web ?
  3. Comment mesurer le temps de chargement d’une page
  4. Comment améliorer le temps de chargement d’une page

Pourquoi c’est important d’avoir un site qui se charge rapidement ?

 

Dans le passé, on s’est tous dit qu’avec la montée en puissance des débits des connexions internet,  on ne serait plus limité par des contraintes de poids sur nos pages web

En même temps, nous avons multiplié les appels à des scripts externes (Adsense, Analytics, Facebook, Twitter,…), les pages sont devenues dynamiques (HTML -> PHP/MySQL), et le mobile est arrivé apportant une flotte de nouvelles connexions plus lentes et donc plus exigeantes en terme de performance web !

 

 

En 2 ans, le poids des pages a presque doublé (1,4 Mb la page) alors  que vraisemblablement la vitesse de connexions moyennes à internet a dû baisser notamment avec l’arrivée des smartphones (connexions mobiles souvent inférieures à 4 Mbits/s) et la faible percée des connexions très haut débit.

Je veux que vous gardiez ces 3 idées en tête :

  • Un site qui est trop lent à charger ne sera jamais consulté
  • Google positionne mieux les sites rapides dans ses résultats (+ 50 % du trafic d’un blog vient de google, donc ça vaut le coup de les satisfaire)
  • Plus un site est rapide à chargé, plus on aura envie de naviguer dedans

 

Quel est le temps de chargement moyen d’une page web ?

 

En fait, ce n’est pas à la moyenne que vous devez vous intéresser, mais plutôt à la médiane, c’est à dire le curseur entre les 50 % de sites les plus rapides (là où on veut être) et les 50 % de sites les moins rapides (là où on ne veut pas être).

 

Google a mesuré cela chez les utilisateurs de Google Analytics qui ont activé le partage d’information.  C’est 3 secondes pour une connexion depuis un ordinateur de bureau, 5 secondes depuis une connexion mobile.

Donc il faut arriver à faire moins de 3 secondes pour être dans les 50 % les plus rapides !

 

Comment mesurer le temps de chargement d’une page

 

Toutes sortes d’outils font cela très bien, j’en ai rajouté 3 dans ma liste d’outils WebPerf :

 

Quelques rapports générés sur cette page :

 

Comment améliorer le temps de chargement d’une page

 

L’outil PageSpeed de Google de Google va vous donner pas mal de pistes d’optimisations personnalisées pour votre site. Autrement je vous recommande également d’aller jeter un œil au site Browser Diet et / ou d’acheter le memento de la WebPerf  de Armel Fauveau et Lionel Pointet.

Pour ma part, j’ai réussi à passer d’un blog qui mettait plus de 4 secondes à se charger la première fois à un blog  qui met maintenant moins de 2 secondes (1ère connexion : sans tenir des comptes des images mises en cache).

 

Voici ma recette magique en vidéo :

 

 

Les principaux outils présentés dans la vidéo :

 

Quelques bonnes pratiques en vrac à appliquer en plus :

 

  • Éliminez tous les fichiers .js inutiles
  • Faites en sorte que votre feuille de style principale (.css) soit chargée le plus tôt possible dans la page
  • Chargez les .js en dernier (juste avant </body>)
  • Minifier les .js et .css
  • Ajoutez le tag Google Analytics asynchrone
  • Faites des sprites CSS quand cela est possible (j’en ai 2 sur mes pages : boutons réseaux sociaux et date dans un cercle sur la page d’accueil)
  • Optimisez votre fichier .htaccess  en suivant ces conseils : http://www.seomix.fr/guide-htaccess-performances-et-temps-de-chargement/

 

Les choses à ne pas faire :

 

  • Avoir une image de fond de plus 200 ko qui se charge sur toutes vos pages
  • Multipliez les scripts externes sans chargement asynchrone
  • Redimensionnez l’image dans les propriétés HTML (ça nuit aux perfs)

 

Partagez vos bilans de tests avant et après dans les commentaires

 

Votre blog était-il lent ? Avez-vous réussi à l’accélérer ? Comment ? qu’est-ce qui le ralentissait ? Est-il lent ? Comment je peux vous aider ? Dites-nous tout, ça intéressera forcément tous les internautes de passage sur cette page et à plusieurs pourra trouver des solutions et partager nos bonnes pratiques.

Suivez-moi

Jean-Baptiste

Responsable marketing digital chez Orange le jour. Blogueur, Auteur, Entrepreneur la nuit,j'ai plus de 10 ans d'expérience sur Internet en gestion de projets, création d'audience, monétisation.
Suivez-moi


Vous voulez gagner de l'argent avec votre blog ?
Lisez tout de suite BlogBuster dispo sur Amazon, Kobo, Fnac, iTunes pour 3,99 €

blogbuster ebook

Nous vous recommandons :


Categories and Tags:  Design

Commentaires (4)

 

  1. jeanluc dit :

    Bonjour, je te félicite pour ton livre que j’ai acheté il y a 2 mois. J’ai pris en compte la partie sur les photos et ne pas dépasser les 30kb. Seulement en repectant cela et des petites dimensions les photos sont de mauvaise qualité. j’ai essayé avec gimp, lightroom, jpegmini, et bien d’autre mais pour des photo exemple a 800×500 je bloque à 90kb et tres pixeliser. comment je peux arriver a maintenir une belle qualité avec un poid legé de photo car je suis un peu perdu. merci

  2. Jean-Baptiste dit :

    Bonjour Jean-Luc,

    Ma recommandation de ne pas charger des images de + 30 ko est une règle générale de bon sens qu’il faut essayer de tenir si tu multiplies le nombre d’images sur ta page…

    Imagines si tu as en as 10 ça fait 300 Ko à charger, si tu en as 10 à 90 ko = 900 ko => Presque 1 Mo !! Si tu n’as que 3 images à charger, tu peux « t’autoriser » 3 images de 100 ko.

    Il est bien évident qu’à ce poids là (30 ko par image), les images sont plutôt dans des résolution < 400px x 300px. Il est en effet impossible d'avoir des images 800x500 à moins de 100 ko avec une qualité acceptable. Si tu tiens à charger des images > 100 ko en nombre important (ex 10), plusieurs solutions s’offrent à toi pour ne pas dégrader le temps de chargement de ta page :

    1- Utilises le plugin BJ Lazy Load, il ne chargera dans la page que les images visibles, les autres se chargeant progressivement au scroll dans la page

    2/ Tu peux aussi créer une galerie de miniatures avec lien cliquable, la miniature sera < 400x300 px (donc < 30ko), et le lien cliquable > 800×500 px (donc > 100 ko), même effet que précédemment, on ne charge la grosse image qu’au clic (Utilise le plugin WP Light Box 2 pour créer un effet d’ouverture sympa).

    Je t’ai fait une combinaison de ces 2 optimisations sur cette page :
    http://blogbuster.fr/galerie-photo-test

    Merci pour l’achat de mon livre, as-tu fini de le lire, qu’en as-tu pensé ? N’hésite pas à le dire sur ma page Amazon et à en parler autour de toi aussi, ça m’aide beaucoup pour la promotion ;)

    http://www.amazon.fr/gp/product/B00MDY6096/

  3. jeanluc dit :

    Merci pour ce complement d’information, j’y vois plus clair. Concretement je ne post qu’une photo par page donc je vais monter a 40-50kb pour une photo unique sur un billet ou une page. Concernant ton livre il est clair et concret et m’a permit de consolider mes bases en tant que débutant. Je prendrais le temps de partager. merci pour ton aide et réponse rapide. a+

  4. Yann RES dit :

    Super sympa cet article, actuellement j’utilise GTmetrix pour tester mes sites.

Laisser un commentaire

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



Deviens toi aussi un YouTubeur


Rechercher


Recevoir Blogbuster par email

    Ajoutez votre email :





Ecrivez votre livre



Derniers Commentaires

  • Avatar UtilisateurLeandro { nice! } – Fév 20, 7:05
  • Avatar UtilisateurNaomi fait de la Radio { Slt je fais des vidéos sur YouTube . Sur le gaming et autre !! J'aimerais bien faire des tutos sur des jeux ou autre si... } – Fév 17, 6:46
  • Avatar UtilisateurNaomi fait de la Radio { Slt je fais des vidéos sur YouTube } – Fév 17, 6:41
  • Avatar UtilisateurYannick { Génial l'article ! Ça devrait bien m'aider pour optimiser mon site ! Merci Blogbuster } – Fév 15, 9:04
  • Avatar UtilisateurOdi { avec qoui puis je prendre le son si je fais des tutos sur pc ie des tutos de graphisme. } – Fév 14, 10:28
  • Avatar UtilisateurYann RES { Bonjour, j'imagine qu'aujourd'hui les niches à sucés cité plus haut sont devenue des niches saturées, ou je me trompe ? } – Fév 03, 4:17

Catégories


Derniers articles et tutos


Derniers plugins ajoutés


Trouver un plugin


Mentions légales - Contact