Comment améliorer la vitesse de chargement d’une page ?

I. Qu'est-ce que la vitesse de chargement d'une page ?

Appelée également "Page Speed", la vitesse de chargement d'une page correspond au temps qu'il faut pour afficher l'intégralité du contenu d'une page spécifique, tout en prenant en compte le "Time To First Byte" (TTFB).

Le TTFB c'est le "le temps de chargement du premier octet", qui dépend directement du temps de réaction de votre serveur web et du réseau utilisé pour l'acheminement.

De ce fait, Google et les autres moteurs de recherche donnent de l'importance à ce critère de temps de chargement. D'autant plus que les moteurs de recherche sont directement affectés, car les robots "perdront" du temps quand ils viendront indexer votre site, si ce dernier est lent. Plus une page est rapide, mieux c'est ! D'ailleurs, cela impacte directement votre référencement puisque le classement (ranking) d'une page pourra varier selon la vitesse de chargement.

D'où l'importance d'optimiser la configuration de son site et de son serveur ! Mais alors, qu'est-ce qu'il faut faire ? Voyons quelques pistes ensemble...

II. Activer la compression

Implémentez GZip dans la configuration de votre serveur web pour compresser votre contenu avant de l'envoyer aux clients. La compression de fichiers doit être appliquées (si possible) aux fichiers CSS, JavaScript et HTML.

Dans certains cas, un fichier compressé verra son poids diminué de 80% ce qui est réellement intéressant pour améliorer le temps de chargement. Grâce à la compression GZip le poids général de la page pourra être diminué de manière conséquente.

Bien entendu, cela dépend notamment du nombre de fichiers CSS et JavaScript que vous utilisez, et de leur poids.

Voici un exemple de ce que ça peut donner (regardez la taille en Ko) :

III. Minification des fichiers

Une autre méthode pour alléger le poids des fichiers est la minification des fichiers CSS, JavaScript et HTML.

Minifier c'est optimiser le code en retirant les espaces, les commentaires, les sauts de lignes, les caractères inutiles, etc... Moins de caractères dans une page = moins de poids.

Le seul inconvénient de la minification c'est que ça rend le code difficilement lisible par l'humain.

Des outils en ligne permettent de minifier un fichier facilement (exemple : CSSMinifier)

Voici un exemple simple :

Plus d'infos sur le sujet : Minification

IV. Rassemblez les fichiers CSS et JavaScript

Concaténer les fichiers CSS ensemble et les fichiers JavaScript ensemble au maximum ! Bien que cela pose parfois des problèmes... Il faut essayer de faire des regroupements au maximum pour limiter le nombre de requêtes. Il vaut mieux charge un seul fichier CSS de 50 Ko que 5 fichiers CSS de 10 Ko chacun, car les 50 Ko pourront être transférés en une seule connexion.

C'est notamment un problème que l'on rencontre avec les CMS, notamment WordPress puisque chaque plug-in apporte son CSS voir même son JS ce qui fait deux fichiers à charger en plus potentiellement à chaque fois...

V. Optimisez les images

Évitez d'utiliser des images trop lourdes, notamment si vous affichez de nombreuses images dans une page. Le poids des images peut également alourdir votre page et prendre du temps à télécharger côté client. De ce fait, optimisez votre image tout en essayant de garder la meilleure qualité possible.

Lorsqu'une image a peu de couleurs différentes, préférez le PNG qui donnera un excellent rendu avec un faible poids. Par contre, lorsqu'il s'agit d'une image avec de nombreuses couleurs, préférez le JPEG tout en essayant de compresser l'image (Photofiltre permet cela) pour gagner quelques Kilo-octets.

Le "Lazy load" est également intéressant puisque ce mécanisme permet de différer le chargement des images au fur et à mesure qu'elles doivent apparaître dans la page. Par exemple, une image située en bas d'un article ne sera pas affichée dès le début, mais sera chargée lorsqu'on descendra vers le bas de l'article et qu'elle deviendra alors visible par l'utilisateur. Cela est intéressant pour permettre une lecture plus rapide tout en téléchargeant petit à petit les images. De plus, cela évite de charger des images inutilement si l'utilisateur ne regarde pas tout l'article...

Ah oui, au niveau des images, vous pouvez également regarder de plus près la notion de "CSS Sprite".

VI. Profitez du cache navigateur

Le navigateur met en cache certains éléments lorsque vous accédez à un site, cependant c'est vous qui devez donner les directives sur ce qu'il faut mettre en cache, et combien de temps faut le mettre en cache.

Avec Apache, cela s'effectue grâce au module mod_expires où l'on pourra ensuite définir des règles. Par exemple : le cache des fichiers CSS est valable 2 semaines.

VII. Éviter les redirections

Il faut éviter les redirections d'une page vers une autre pour limiter les requêtes HTTP. Par exemple, si le visiteur accède à "mon-domaine.fr" et que vous le redirigez vers "www.mon-domaine.fr" puis vers "www.mon-domaine.fr/accueil/", c’est très lourd en requête HTTP et une perte de temps considérable (évitable).

VIII. Utilisez un CDN (Content Delivery Network)

Un CDN est un réseau de serveurs qui sont utilisés pour se distribuer la charge pour délivrer le contenu au client. En fait, une copie de votre site est stockée sur plusieurs serveurs, situés à des endroits géographiques différents afin qu'un client accède à la version du site la plus proche de lui géographiquement. Le fait d'accéder à la version du site la plus proche permet d'améliorer la vitesse de chargement.

IX. Le temps de réponse du serveur

Optimisez le temps TTFB afin que votre serveur délivre les réponses plus rapidement et soit plus réactif. La configuration de votre serveur, la rapidité du routage, les logiciels utilisés (Apache, PHP, WordPress, etc..) ou encore l'hébergement (1&1, OVH, Online, etc.) choisi fait partie des critères à prendre en compte (et à étudier).

X. Quelques outils

Voici une liste non exhaustive de quelques outils intéressants pour mesurer la rapidité du chargement des pages, et généralement ils sont suffisamment bien élaborés pour vous dire les points à corriger.

- GTMetrix
- WebPageTest
- Pingdom
- YSlow (extension pour Firefox)
- Firebug (extension pour Firefox)
- PageSpeed (outil Google)