Temps de chargement : comment booster les performances de votre site ?
La vitesse et les performances des pages Web sont très importantes pour l’expérience utilisateur et le référencement. Si le temps de chargement de votre site est trop long, vous perdrez non seulement des visiteurs, mais également des clients potentiels. Les moteurs de recherche tels que Google prennent en compte la vitesse d’un site Web dans ses classements. Par conséquent, lors de l’optimisation de la vitesse de votre site, vous devez tout prendre en compte. Chaque milliseconde compte. Voici quelques suggestions simples à implémenter afin d’améliorer la vitesse générale de votre site web.
Minimiser les requêtes http
Selon Yahoo, 80% du temps de chargement d’une page Web est consacré au téléchargement des différentes parties de la page, telles que les images, les feuilles de style et les scripts. Une requête HTTP est effectuée pour chacun de ces éléments. Ainsi, plus il y a de composants sur la page, plus le rendu de la page est long.
La première étape pour minimiser vos requêtes consiste à déterminer le nombre actuel de requêtes créés par votre site et à l’utiliser comme référence. Vous pouvez tout simplement utiliser la Search Console pour voir le nombre de requêtes HTTP effectuées par votre site.
Minimiser et combiner des fichiers impacte le temps de chargement
Maintenant que vous connaissez le nombre de requêtes de votre site, vous pouvez commencer à réduire ce nombre. Le meilleur endroit pour commencer est avec vos fichiers HTML, CSS et JavaScript. Ce sont des fichiers extrêmement importants, car ils déterminent l’apparence de votre site. Ils augmentent également le nombre de requêtes que votre site fait chaque fois qu’un utilisateur le visite.
Vous pouvez réduire ce nombre en minimisant et en combinant vos fichiers. Cela réduit la taille de chaque fichier, ainsi que le nombre total de fichiers. Ceci est particulièrement important si vous utilisez un constructeur de sites Web basé sur des modèles. Ceux-ci facilitent la création d’un site Web, mais ils créent parfois un code compliqué qui peut considérablement ralentir votre site.
Réduire un fichier implique de supprimer le formatage, les espaces et le code inutiles. Étant donné que chaque morceau de code inutile ajoute du poids à votre page, il est important d’éliminer les espaces, les sauts de ligne etc. Cela garantit que vos pages sont aussi légères que possible. De plus, si votre site exécute plusieurs fichiers CSS et JavaScript, vous pouvez les combiner en un seul. Il existe plusieurs façons de réduire et de combiner ces fichiers.
Par exemple, si votre site fonctionne sous le CMS WordPress, des plugins comme WP Rocket simplifient grandement le processus.
Utiliser des fichiers externes JavaScript et CSS
Lorsque l’utilisateur charge pour la première fois votre page Web, le navigateur met en cache des ressources externes telles que les fichiers CSS et JavaScript. Ainsi, au lieu de fichiers JavaScript et CSS intégrés, il est préférable de les placer dans des fichiers externes.
L’utilisation de CSS inline augmente également le temps de rendu d’une page Web ; le fait de tout définir dans votre fichier CSS principal permet au navigateur de faire moins de travail lors du rendu de la page, car il connaît déjà toutes les règles de style qu’il doit appliquer. De plus, l’utilisation de fichiers JavaScript et CSS externes facilite la maintenance du site car il vous suffit de gérer des fichiers globaux au lieu d’un code dispersé dans plusieurs pages Web.
Utiliser des systèmes de cache pour optimiser le temps de chargement
En mettant en place un système de mise en cache, votre site n’aura qu’à « créer » le contenu une seule fois au lieu de le créer à chaque visite de vos utilisateurs. Ne vous inquiétez pas, les systèmes de mise en cache actualisent régulièrement leurs caches en fonction de leur configuration. Ainsi, même les pages Web qui changent constamment (par exemple, un article de blog avec des commentaires) peuvent être mises en cache.
Les CMS populaires tels que WordPress et Drupal auront des fonctionnalités de mise en cache qui convertissent les pages générées de manière dynamique en fichiers HTML statiques afin de réduire les traitements inutiles sur le serveur.
Images surdimensionnées
Les images sont l’une des choses principales à prendre en compte car elles ont un impact tangible sur la taille et le poids de la page. En règle générale, les images de plus de 100 kilo-octets peuvent considérablement affecter le temps de chargement de la page, en particulier pour les utilisateurs mobiles. Cette limite doit être utilisée comme référence.
Le téléchargement d’images optimisées et conviviales pour le Web est la première étape pour obtenir un site Web extrêmement performant. Par conséquent, la meilleure pratique à suivre consiste à trouver le bon compromis entre la taille et la qualité de l’image en exploitant les éléments suivants :
Compression
Une bonne compression rendra l’image plus légère et plus conviviale pour le Web. Le téléchargement d’images haute résolution est biaisé dans la plupart des cas car une densité de pixels élevée (supérieure à 300 ppi) n’est tout simplement pas restituée sur un écran HD standard.
Mise à l’échelle
Essayez de garder une taille d’image aussi proche de celle dont vous avez besoin pour un écran d’ordinateur portable standard. Une mauvaise habitude est de télécharger une image beaucoup plus grande et de la redimensionner au besoin. Les règles CSS ne permettent pas de redimensionner ou de rogner l’image. Ce ne sont que des règles de rendu, ce qui signifie que les utilisateurs de votre site Web téléchargent la taille du fichier d’origine.
Format
Choisir le bon format signifie que vous aurez des images plus claires. À titre de recommandation générale, veuillez noter que:
- JPG est le meilleur format pour des photos, des captures d’écran.
- PNG convient aux images très détaillées, transparentes et aux logos
- GIF est le format standard pour les animations.
- SVG peut être utilisé pour les logos et les arrière-plans.
Nombre d’images
Plus vous avez d’images sur une page, plus leur taille doit être réduite. La raison est qu’elles seront ajoutées au contenu qu’un navigateur doit télécharger et afficher. Une étude a montré, qu’en moyenne, 70% des pages dépassaient 1 Mo, 36% plus de 2 Mo et 12% plus de 4 Mo, la plupart du temps en raison d’images volumineuses.
Il s’agit d’une taille énorme pour une seule page, sachant qu’il faut sept secondes pour charger 1,5 Mo avec une connexion 3G. Faites le calcul …
Utiliser un réseau de diffusion de contenu (CDN) pour accroître le temps de chargement
La vitesse de votre site est grandement affectée par l’emplacement des utilisateurs par rapport à votre serveur Web. Plus ils sont éloignés, plus les données font de la route. La mise en cache de votre contenu sur plusieurs emplacements géographiques stratégiquement placés permet de résoudre ce problème. Un CDN augmentera souvent vos coûts d’exploitation, mais vous gagnerez certainement en vitesse.
Si votre site présente d’importants problèmes de lenteur, il est peut-être temps d’envisager une refonte pour maximiser ses performances.
Il sera alors possible de repenser le design de votre site web de façon à optimiser votre taux de conversion, tout en communiquant votre branding.
