La vitesse de chargement des pages de votre site a un impact direct sur l’expérience utilisateur de vos visiteurs, et donc votre SEO.
En effet, améliorer la vitesse de vos pages a plusieurs avantages :
réduire le taux de rebond et donc l’insatisfaction de vos visiteurs : une page qui se charge trop lentement aura tendance à faire fuir les visiteurs impatients ;
augmenter le nombre de vos pages vues : un site rapide est bien plus agréable à visiter qu’un site lent ;
augmenter la fréquence de crawl de Google : plus vos pages sont légères, moins Google doit dépenser de ressources pour y naviguer ;
augmenter les conversions de votre site : plusieurs études de géants du web tels qu'Amazon ont montré qu’un site plus rapide améliore sensiblement le taux de conversion !
Optimisez vos images
Adaptez la taille de vos images à leur contenant
L’erreur la plus commune est de mettre des images trop grandes par rapport à leur contenant, et ensuite de les adapter grâce à du CSS.
En clair, il faut éviter de mettre une image de 2 500 px sur 3 800 px dans une <div> de 500 px sur 500 px, et d’imposer le redimensionnement en CSS. Plus une image est grande, plus elle est lourde et donc longue à télécharger pour le navigateur. Il est par conséquent indispensable de la redimensionner avant de la mettre sur votre site.
Vous pouvez également la recadrer pour enlever les parties superflues de l’image, et donc réduire encore plus sa taille et son poids.
Une fois que vous avez redimensionné vos images à la bonne taille, vous pouvez encore les optimiser en les compressant.
Compressez vos images
Vous pouvez compresser vos images à l’aide d’applications gratuites comme ImageOptim, PNGgauntlet, ou via des sites web comme https://compressor.io/. Pour cela, il suffit de sélectionner l’image à compresser, aux formats JPEG, PNG, GIF ou SVG. Le logiciel choisi va alors optimiser votre image pour vous. Selon vos besoins, vous pouvez réduire de 90 % la taille de vos fichiers.
Pour les utilisateurs de Mac, ImageOptim optimise les paramètres de compression, supprime les métadonnées indésirables et les profils de couleurs inutiles.
Selon vos besoins en compression, vous pouvez choisir de compresser vos images avec une perte de données (lossy) ou sans perte de données (lossless) :
avec la compression sans perte, chaque donnée reste intacte après la décompression du fichier ;
la compression avec perte de données réduit un fichier en éliminant de manière permanente ces données, et entraîne aussi une légère perte en qualité. Ce format est utilisé pour réduire au maximum le poids des fichiers.
Généralement, il est très difficile de voir la différence entre une compression avec ou sans perte.
Minifiez et compressez vos ressources
Minifiez vos fichiers CSS et JavaScript
Minifier un fichier signifie retirer les caractères inutiles (espaces, sauts de lignes, commentaires, séparateurs de bloc) de ce fichier, ce qui a pour incidence de diminuer drastiquement sa taille et donc son poids.
En effet, votre navigateur se fiche d’avoir un fichier propre et bien présenté, tant que celui-ci est fonctionnel, c’est-à-dire sans erreurs.
Vous pouvez, pour cela, utiliser des applications web telles que https://www.minifier.org/ ou http://compressmycode.com.
Si vous utilisez des frameworks assez connus pour coder votre site web, il existe forcément des librairies toutes faites pour effectuer cette tâche.
Compressez vos ressources
En compressant vos pages web et CSS avec Gzip, vous pouvez réduire considérablement le temps de chargement de votre site. C’est certainement la méthode de compression la plus efficace, qui permet de réduire le nombre de demandes HTTP et le temps de réponse, et ce jusqu’à 70 %.
En activant la compression Gzip, les fichiers de votre site web seront automatiquement compressés dans un fichier ZIP. Cela réduira leur taille et augmentera la vitesse de chargement de votre site. Une grande partie de la bande passante sera économisée, et le temps de chargement des pages sera par conséquent amélioré.
Exemple de paramétrage GZIP pour un serveur Apache 2
Il suffit d’ajouter le code suivant à votre fichier .htaccess si vous souhaitez compresser du texte, JavaScript, HTML, CSS ou XML :
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascriptIl faut également ajouter la compatibilité avec les anciens navigateurs :
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/htmlDébloquez le téléchargement de vos pages
Si vous ne paramétrez pas correctement l’appel à vos fichiers JavaScript, ils bloqueront l’affichage de la page jusqu’à ce qu’ils soient complètement chargés. Deux cas peuvent alors se présenter à vous :
cas n° 1, vous utilisez le JavaScript pour sublimer votre page ou pour modifier le HTML une fois celui-ci chargé, par exemple l’utilisation de jQuery. Dans ce cas, pas besoin de bloquer l’affichage de la page. Mieux vaut l’afficher au plus vite pour ne pas faire attendre vos visiteurs ! Dans ce cas, il vous suffit d’ajouter “async” ou “defer” dans vos balises script :
exécution asynchrone async
<script async src=""></script>. Si l’ordre d'exécution n’a pas d’importance et que les scripts peuvent être exécutés dès qu’ils sont disponibles, préférez la méthode asynchrone,exécution différée defer
<script defer src=""></script>. Si l’ordre des scripts est important, et qu’ils doivent être exécutés une fois le HTML complètement chargé, préférez la méthode différée ;
cas n° 2, C’est le JavaScript qui permet d’afficher votre contenu, comme dans le cas des framework JS. Nous traiterons ce cas dans la troisième partie du cours !
En bref
Accélérer le chargement de vos pages a une incidence forte sur vos visiteurs et votre SEO.
Évitez l’erreur de débutant : dimensionnez vos images à la bonne taille.
Compressez vos images pour les alléger encore plus.
Éliminez les ressources inutiles.
Minifiez et compressez votre css et JavaScript.
Maintenant que nous avons vu comment améliorer la rapidité de vos pages, voyons ensemble comment paramétrer un cache navigateur pour accélérer encore plus la vitesse de votre site !
