Analyser et améliorer la vitesse d'affichage des pages

Décembre 2016



Sur internet la vitesse d'affichage des pages est cruciale pour un site web. Une page un peu trop longue à charger peut vous faire perdre des visiteurs, et agacer ceux qui restent.

De plus, Google a même annoncé que la vitesse de chargement des pages est désormais prise en compte dans le classement Google: Si vos pages sont lentes, vous descendrez dans les résultats de recherche !

Il existe des outils capables d'analyser vos pages et vous guider pour les améliorer.
Yahoo a publié YSlow, et Google PageSpeed pour vous aider dans cette tâche. Ce sont des plugins à installer dans Firefox, mais un site web pemet d'analyser les pages sans installer ces outils.

Rendez-vous sur http://gtmetrix.com/ et entrez l'adresse de la page à analyser.

Les onglets "YSlow" et "PageSpeed" vous indiqueront les points à travailler en priorité pour améliorer vos pages.



Chaque point technique à surveiller est noté de A à F:
  • A pour excellent (aucun besoin d'amélioraton)
  • F pour mauvais, doit vraiment être corrigé.


Cliquez sur chaque ligne pour voir les détails du problème.

La colonne "Priority" vous permet de savoir quel point à traiter en priorité. Les points marqués "High" sont à traiter en priorié: Ce sont eux qui vous donneront les meilleures améliorations de performances.

Notez que certains points peuvent ne pas être applicable à votre site. Typiquement, pour un site perso la recommandation d'utiliser des CDN n'est pas applicable.

Exemple


L'optimisation la plus souvent recommandée (et aussi la plus simple à mettre en place) est bien souvent celle du cache. C'est aussi celle qui donne immédiatement de bonnes améliorations de performances.

En spécifiant une date d'expiration suffisamment éloignée le futur pour votre contenu (image, pages...), cela permettra au contenu de votre site d'être gardé dans le cache du navigateur.
Cela permettra non seulement aux pages de s'afficher plus vite quand l'internaute revient sur votre site, mais cela allège également la charge du serveur.

Si votre serveur web est Apache2 et que htaccess est activé, placez simplement un fichier texte .htaccess à la racine du site:

# Mise en cache pour 1 mois    
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">    
Header set Cache-Control "max-age=2592000"    
</FilesMatch>    

# Mise en cache pour une semaine    
<FilesMatch "\.(js|css|pdf|txt)$">    
Header set Cache-Control "max-age=604800"    
</FilesMatch>    

# Mise en cache pour 1 journée    
<FilesMatch "\.(html|htm|php)$">    
Header set Cache-Control "max-age=86400"    
</FilesMatch>


Ainsi le contenu qui change peu (images, icônes...) sera conservé en cache une longue période, évitant son rechargement. Le contenu qui bouge plus (html) sera rechargé plus souvent.

Ce n'est qu'un exemple: vous pouvez bien sur l'adapter à votre site.


(Note de sebsauvage: Merci à Korben pour le lien.)

A voir également :

Ce document intitulé «  Analyser et améliorer la vitesse d'affichage des pages  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.