L’optimisation du temps de chargement
Je suppose que vous quitteriez cet article si vous n’aviez plus rien à lire pour les 3 prochaines secondes… wait ! Je me suis trompé, et heureusement. Sachez que sur un site web, plus de 50 % des utilisateurs quittent une page qui prend plus de 3 secondes à charger.
Ceci étant dit, un site web qui charge rapidement est un gage de qualité pour les moteurs de recherche, le temps de chargement est pris en compte par les algorithmes des moteurs depuis 2010. Ce qui m’amène à la problématique suivante, comment réduire le temps de chargement d’un site web ?
Tester la vitesse de son site web
Avant toute chose vous devez tester les performances de votre site. Pour cela, il existe plusieurs outils en ligne gratuit tels que :
L’analyse est votre point de départ, chaque site web est différent, vous devez identifier les problèmes, pouvant affecter le temps de chargement. Maintenant que vous savez comment analyser votre site internet, je vais vous présenter les différentes optimisations à faire pour réduire le temps de chargement.
1. Optimiser vos images
Optimiser ses images avant de les importer est un réflexe à avoir. La différence de poids entre une image optimisée et une image non optimisée pour le web est considérable.
Je vous recommande d’enregistrer vos images dans les formats classiques du web (JPEG, GIF et PNG). Faites attention à la taille de vos images, il est rare d’avoir des résolutions d’écran dépassant les 2560px. J’utilise les dimensions maximum suivantes : 1366x768px.
Vous devez également compresser vos images ! Pour les adeptes de Photoshop vous trouverez votre bonheur dans la fenêtre « Enregistrer pour le web ». Si vous ne disposez pas de Photoshop il existe plusieurs outils en ligne vous permettant de compresser vos images comme toolur que je trouve simple et rapide à utiliser.
Concernant le poids de vos images, essayez de ne pas dépasser :
- Pour les grandes images ( > 1920px de large ) : 1 Mo
- Pour les images de taille moyenne (< 1280px de large ) : 300 Ko
2. Utiliser la mise en cache
Le cache est un système de mémoire intermédiaire permettant d’afficher plus rapidement les pages web chargées récemment dans le navigateur. Lorsque vous visitez une page web, une version de la page visitée est enregistrée sous forme de fichiers temporaires sur l’ordinateur et sera présentée lors du prochain chargement de cette page, sans avoir à attendre la réponse du serveur.
Si je devais vous donner un exemple qui illustre le système de cache. Lorsque vous lancez le site de Facebook sans connexion internet, les derniers posts consultés apparaissent car ils sont en cache.
Pour les utilisateurs de CMS, vous trouverez des plugins de mise en cache performant comme WP Rocket pour WordPress. Je ne vais pas m’éterniser sur les système de cache, car le choix et l’installation va dépendre de votre environnement web. Je rédigerai prochainement un article qui traitera de cette question plus en détail.
3. Activer la compression GZIP
Compresser un site web revient grossièrement à l’archiver dans un dossier .zip. Sur le Web, on parle plus spécifiquement de compression GZIP.
GZIP est une application web permettant de compresser les différents fichiers de votre site web (HTML, CSS, JS… ) avant de les envoyer. Pour savoir si votre serveur utilise la compression GZIP, vous pouvez utiliser Sitechecker qui vous permettra de savoir en 15 secondes si votre site utilise la compression GZIP.
La méthode à choisir pour activer la compression GZIP va dépendre de l’environnement utilisé par votre serveur Web. Les deux liens suivants vous expliquent comment activer la compression GZIP sur un serveur Apache (lien 1) ou NGINX (lien 2), les deux géants du marché.
4. Optimiser vos fichiers CSS
Le CSS à tendance à prendre de plus en plus de place dans la création de site web moderne. L’accumulation d’animation et de détails sophistiqués peut ralentir votre site. Reprenez vos feuilles de style CSS et supprimez les déclarations inutiles.
Une fois que vos fichiers CSS sont propres, vous pouvez passer à la minification, autrement dit, la suppression des espaces inutiles dans vos fichiers. Je vous recommande d’utiliser CSS compressor qui vous fera gagner un temps considérable !
5. Gérer vos scripts
Les liens vers les scripts externes, sont généralement placés dans l’en-tête des documents. Placer les scripts dans l’en-tête de ses documents empêche l’apparition du contenu avant le chargement complet de la page. Il est donc recommandé de placer les scripts à la fin des documents, avant la balise ‘</body>’.
Vous pouvez également utiliser le chargement différé ou asynchrone pour vos scripts. Il suffit d’ajouter defer ou async à vos balises ‘<script>’ comme ceci :
L’attribut async convient mieux aux scripts prioritaires, qui doivent être chargés rapidement sans gêner l’accès au contenu. Le chargement des scripts secondaires peut être différé (defer) afin d’accélérer l’affichage de la page. Veillez néanmoins à tester chacun des scripts pour éviter tout dysfonctionnement.
Conclusion
Il aura fallu attendre 2010 avant que les moteurs de recherche intègrent des critères de performance pour positionner les sites dans les résultats. Aujourd’hui encore, de nombreux sont mal optimisés. En optimisant les performances de votre site, vous améliorez l’expérience utilisateur. C’est également un bon moyen de gagner des places dans les résultats de recherche.
J’espère que vous avez apprécié cet article, si c’est le cas vous pouvez le partager. Merci à tout ceux qui penseront à le faire et à bientôt pour un nouvel article.
SOURCES
Merci d’avoir lu cet article jusqu’à la fin, n’hésitez pas à le partager sur vos réseaux.
