Comment optimiser le temps de chargement de votre site web ?

Combien de fois avez-vous fermé la fenêtre de votre navigateur en tombant sur un site qui met très longtemps à charger son contenu ? Si cela vous arrive, dites-vous que la même chose se passe pour l’internaute lambda qui visite vos pages. Cette situation est très dommageable surtout que votre site web est censé délivrer des informations sur votre entreprise et vous permettre de générer des mises en contact.

Quelques chiffres clés

53% des utilisateurs quittent une page lorsque le temps de chargement est supérieur à 3 secondes lors d’une navigation sur mobile ;
79% des consommateurs qui visitent un site peu performant n’y retournent pas
1 internaute sur 2 espère voir un site se charger en moins de 2 secondes;
La vitesse de chargement est utilisée comme critère de positionnement ;
Les sites qui se chargent en moins de 5 secondes génèrent 2 fois plus de revenusgrâce aux publicités que ceux qui sont au-delà.
Améliorer la rapidité du site permet d’augmenter le trafic organique jusqu’à 20%

Quels sont les éléments à améliorer ? Le poids des ressources (fichiers CSS, JS, images), l’organisation du contenu ou encore la performance du serveur ont un impact important sur le temps de chargement d’une page web (et plus particulièrement ce qui se situe au-dessus de la ligne de flottaison). Le listing ci-dessous vous donne quelques astuces qui vous permettront d’optimiser la vitesse de chargement de votre site internet principalement sur un serveur Apache qui est le serveur HTTP le plus populaire du web.

1 – Tester son site

Il existe différents outils en ligne gratuits et performants permettant d’auditer un site internet sur sa vitesse de chargement. Les plus intéressants à l’heure actuelle sont Google PageSpeed ou encore GTmetrix. Les outils listent les différents éléments qui sont à améliorer nécessairement, ceux qu’il serait bien d’améliorer ou encore les choses qui ont été correctement mises en place.

Google PageSpeed

Google PageSpeed est un outil en ligne qui donne une note sur 100 à 3 aspects : la vitesse sur mobile, l’expérience utilisateur sur mobile et la vitesse de chargement sur ordinateur. Chacun de ces éléments est divisé en 3 catégories : « A corriger », « A corriger éventuellement » ou « règles approuvées ». Pour chaque problème repéré, il est possible d’afficher les détails et des recommandations sont faites par l’outil afin de les résoudre. Avec une interface sobre et en français, l’outil se révèle très pratique et a l’avantage de suggérer des optimisations pour les supports mobiles.

GTmetrix

GTmetrix propose un résultat combiné entre les résultats obtenus à Google PageSpeed et ceux obtenus auprès de YSlow. Cet outil, en plus d’offrir les notes de YSlow et de PageSpeed propose également un historique des éléments chargés et le temps pris par chacun d’entre eux. Le poids total de la page, le temps de chargement ainsi que le nombre de requêtes envoyées au serveur sont également affichés sur l’outil, ce qui en fait un outil complet et efficace. En revanche, aucune version française n’est proposée sur l’outil à l’heure actuelle. Tout comme les outils précédents, cliquer sur les lignes permet d’afficher plus de détails sur le souci repéré.

2 – Autorisez la compression des ressources

La compression des fichiers au format gzip permet de réduire le temps de téléchargement des éléments d’affichage de votre site web. Pour cela, vous devez avoir le mod_deflate activé dans votre configuration serveur. Ce module est activé par défaut sur la plupart des serveurs mutualisés. Il vous suffit d'y faire appel via le code ci-dessous dans le .htaccess à la racine de votre site.

#Activation du mod_deflate

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php application/javascript text/javascript font/woff

#Pour les navigateurs dont la compatibilité n’est pas assurée

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

# Forcément on ne remet pas en cache des fichiers qui le sont déjà
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip

Note : Si vous avez un serveur qui tourne sous une version Apache inférieure à 1.3, seul le mod_gzip est disponible. La documentation officielle Apache vous donne plus d'indications sur le processus (2).

3 – Exploitez la mise en cache dans le navigateur

Pour les internautes réguliers de votre site il est inutile de recharger en intégralité tous les fichiers surtout si ceux-ci n’ont pas changé entre temps. Les types de fichiers les moins modifiés sont : JS, CSS, images, PDF, XLS, DOC etc.... L’activation du cache navigateur permet de ne faire appel qu’aux fichiers modifiés comme les HTML.

Dans le .htaccess, ajoutez le code suivant :

 ExpiresActive On
 ExpiresDefault "access plus 2 hours "
 ExpiresByType image/jpg "access plus 1 month "
 ExpiresByType image/jpeg "access plus 1 month "
 ExpiresByType image/png "access plus 1 month "
 ExpiresByType image/gif "access plus 1 month "
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 1 month"
 ExpiresByType image/icon "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 2 hours"
 ExpiresByType application/xhtml+xml "access plus 2 hours"
 ExpiresByType application/javascript A2592000
 ExpiresByType application/x-javascript "access plus 1 month "
 ExpiresByType application/x-shockwave-flash "access plus 1 month"

Note: Vous pouvez bien sûr ajuster les délai d'expiration des fichiers en fonction du contenu de votre site. Les variables de temps disponibles sont years - months - weeks - days - hours - minutes - seconds.

4 – Minifier CSS et JS

La minification des fichiers CSS et JS permet de réduire la taille de ces fichiers et de rendre leur téléchargement plus rapide. Si vous en avez la possibilité, fusionnez vos fichiers CSS et vos fichiers JS (sans faire de mélange des genres bien entendu). Vous réduirez ainsi le nombre de requêtes HTTP nécessaires pour les charger.

Quelques outils pour minifier vos fichiers :

CSS

CSSmin.js : https://tools.w3clubs.com/cssmin
MinifyCSS : https://www.minifycss.com/css-compressor

Packer : https://dean.edwards.name/packer/
JSMin : https://www.crockford.com/javascript/jsmin.zip

Bien entendu des éditeurs de texte comme Notepad++ et Sublime Text proposent des plugins de compression. Il en est de même pour les IDE comme Eclipse et Netbeans.

Note : En minifiant vos fichiers vous risquez de perdre la structure d'indentation, faites en des sauvegardes pour vos développement ultérieurs et mettez en ligne les versions minifiées.

5 – Compresser les images

Le principe est le même que pour les fichiers CSS et JS : le but est de réduire au maximum le temps de chargement des images qui peut être très long pour les images les plus lourdes.

Pour l’optimisation des images, suivez les recommandations suivantes :

Utilisez des images à la bonne taille plutôt que de les redimensionner par HTML;
Au format .jpg, vous pouvez compresser entre 80 et 90%;
Au format .png, vous pouvez compresser à 8 ou 9;
Vous pouvez utiliser le nouveau format WebP qui n’est pour l’instant compatible qu’avec les navigateurs Chrome et Opera.

Attention toutefois à vérifier qu’il n’y a pas trop de bruits autour des images compressées surtout pour les écrans à forte densité type Retina.

Vous pouvez obtenir les bons ratios de compression en utilisant la fonctionnalité « exporter pour le web » de Gimp et Photoshop et pour vos images existantes, les logiciels gratuits Photophiltre ou XNView vous proposent des fonctionnalités de compression de masse.

6 - Réduire le nombre de requêtes http

Nous l’avons mentionné plus haut, réduire le nombre de requêtes peut aider votre site à charger ses pages plus rapidement. Donc en plus de fusionner vos scripts JS et vos feuilles de styles, supprimez les ETag avec le code suivants dans votre .htaccess :

# Suppression des ETags
Header unset ETag
FileETag none

Ces techniques vous aideront donc à avoir un site internet optimisé pour un chargement plus rapide. Bien-sûr, cette liste n’est pas exhaustive, et il convient de réaliser en amont un audit SEO de votre site internet afin de réaliser les optimisations techniques adéquates. Votre site web est lent ? Vous voulez tout simplement obtenir un meilleur référencement naturel ? Confiez-nous votre projet, nos équipes expertes vous accompagnent et vous conseillent. Pour plus de détails, voici une intervention à ce sujet donnée par Marc, notre collaborateur spécialiste en SEO.

Catégories