temps de chargement d'un site web

4 étapes pour améliorer le temps de chargement d’un site web

Les propriétaires de sites Web peuvent dépenser beaucoup d’argent et de temps pour s’assurer que leurs sites Web sont parfaits avec un CTA efficace, une conception informative et une navigation intuitive. Cependant, ils ignorent souvent l’effet que cela a sur la vitesse de la page (la vitesse de chargement) de leur site. Indépendamment de la plate-forme ou du navigateur, tous les utilisateurs aiment un site Web qui leur est immédiatement disponible – car les utilisateurs sont devenus plus impatients. Et même avec Google, une page rapide est souvent récompensée par un meilleur classement dans les SERPs. Suffisamment de raisons pour jeter un œil à la vitesse de page de votre propre site !

Avant de commencer à optimiser, il est conseillé de connaître le statu quo du site. Plusieurs outils sont à votre disposition pour cela – Google Insights , par exemple, est adapté à cela . L’outil est gratuit et vous permet de mesurer en détail les performances de votre site web. Après avoir entré l’URL de votre site Web, vous recevrez non seulement des informations sur votre vitesse de chargement, mais également des informations sur la façon dont vous pouvez l’améliorer. Certes, l’outil est un peu déroutant – mais cela vaut la peine de s’y habituer.

L’outil que vous souhaitez finalement utiliser dépend bien sûr de vous. Important : Utilisez le même outil avant et après votre optimisation pour voir la « vraie » différence dans vos efforts. Dans ce qui suit, je voudrais vous montrer en 4 étapes comment vous pouvez améliorer le temps de chargement de votre site Web. Comme il s’agit de conseils concrets issus de la pratique, quelques connaissances préalables sont nécessaires.

Étape 1 : optimiser les fichiers statiques

La première étape concerne l’optimisation des fichiers statiques – le plus souvent sous forme de feuilles de style (fichiers CSS) et de scripts (fichiers JS).

CSS « haut », JS « bas »

Votre site Web ne sera pas entièrement affiché tant que tous les fichiers CSS et JavaScript n’auront pas été chargés. La position idéale pour les fichiers CSS se trouve dans la zone <head> du site Web ; JavaScript est le bienvenu « vers le bas », c’est-à-dire dans le pied de page. La logique derrière cela : En général, les feuilles de style sont plus petites que les scripts.

Une fois les feuilles de style chargées dans la balise <head> avant que le navigateur n’affiche le texte de la page, tous les éléments affichés sur la page auront un style correct.

La fonctionnalité des scripts entre généralement en jeu dès que le contenu de la page est chargé, de sorte que les scripts sont généralement intégrés au pied de page du site Web.

Minification du code source

La minification ou la réduction du code source est le processus de suppression des parties d’un fichier qui ne sont pas nécessaires à une exécution correcte. Lorsqu’un site Web est appelé, ces parties inutiles du code source sont lues ligne par ligne. Un espace inutile ici et quelques commentaires là n’auront certainement pas un impact sérieux et négatif sur la vitesse de votre page – mais : la somme fait la différence !

Certaines pages se composent de centaines de lignes de code source. S’il y a du code inutile dans une ligne sur deux, cela aura un effet beaucoup plus négatif sur le temps de chargement. Pour les feuilles de style ou les scripts, les facteurs suivants doivent donc être vérifiés pour l’exécution puis supprimés si nécessaire :

  • Espace blanc pour l’indentation (espaces inutiles)
  • Commentaires dans le code source
  • noms longs de fonction et de variable
  • code inutilisé

La compression Gzip

La compression GZIP est une technique de compression des ressources via des requêtes HTTP. Pour le dire simplement : GZIP peut être utilisé pour compresser un site Web entier. Cela réduit les fichiers à charger et améliore ainsi également le temps de chargement. Avantage de cette mesure : tous les navigateurs modernes prennent en charge GZIP et négocient automatiquement la compression GZIP pour toutes les requêtes HTTP.

Il faut moins de temps à un navigateur ou à un robot de moteur de recherche pour afficher votre site Web et le site se charge plus rapidement.

Étape 2 : optimiser les images

Les images sont essentielles pour un site Web – c’est la seule façon de le rendre clair et attrayant. Ceux-ci doivent être suffisamment compressés pour réduire la taille sans perte drastique de qualité d’image.

Optimiser les images uniquement pour la vitesse des pages pourrait facilement remplir les pages d’un livre blanc , mais voici quelques conseils de base :

  • Compressez vos images avant de charger l’image sur votre site. Les outils d’édition d’images tels que Gimp ou Adobe Photoshop conviennent à cela.
  • Utilisez le bon type d’image. Les deux types d’images les plus courants sur le Web sont les JPG et les PNG. Ils sont souvent utilisés de manière interchangeable – mais ils ne le sont pas. Les images JPG sont destinées aux photos et autres images complexes contenant beaucoup d’informations sur les couleurs. Les images PNG sont parfaites pour les graphiques avec peu d’informations sur les couleurs, comme les captures d’écran de l’interface utilisateur.

Un exemple : Pour votre site e-commerce, vous avez une image produit avec une résolution de 4000x3000px. Pour la page de présentation de votre produit sur votre site Web, vous n’avez besoin que d’une petite image avec une résolution de 200x300px. Compressez donc l’image d’origine car, vous l’avez deviné, des images plus petites = un temps de chargement plus rapide.

Étape 3 : optimiser les requêtes http

Pour minimiser la charge des requêtes HTTP, vous devez combiner des ressources similaires d’une part et minimiser les redirections d’autre part.

Fusionner des fichiers CSS

CSS est utilisé pour définir la taille de la police, les couleurs et d’autres éléments de conception. Cependant, si chaque style individuel est stocké avec sa propre commande CSS dans le code HTML, une nouvelle requête est effectuée pour chacun de ces éléments, ce qui peut avoir un impact négatif sur la vitesse de la page. Le navigateur envoie une requête HTTP au serveur web pour chacun de ces fichiers qui sont liés dans votre HTML et qui doivent être chargés lors de l’appel de votre page. Le serveur envoie ensuite une demande pour ces fichiers requis au navigateur. Conséquence logique : plus il y a de fichiers dans votre document HTML, plus les requêtes sont générées et le temps de chargement ralentit d’autant.

Alors que faire? Par exemple, vous pouvez combiner toutes les feuilles de style (fichiers .css) et tous les fichiers JavaScript personnalisés dans un seul fichier.

Minimiser le nombre de redirections

Une redirection est une instruction qui relie une page de site Web à une autre. Par exemple, si l’utilisateur clique sur un lien, il ne se retrouve pas sur l’URL sur laquelle il a effectivement cliqué, mais est renvoyé vers une autre URL via une redirection. Les redirections peuvent être très utiles, par exemple pour éviter le contenu en double ou pour rediriger les URL qui ne sont plus nécessaires vers une nouvelle URL, comme c’est souvent le cas lors d’une relance de site Web .

Cependant, chaque redirection augmente les temps de chargement de votre site Web. Par conséquent, si ce n’est pas absolument nécessaire, vous devez éviter les redirections.

Important : Surtout, n’utilisez pas une redirection 301 pour pointer vers une autre redirection 301. Parce que la redirection 301 force le navigateur web à accéder à une nouvelle URL – avec cette nouvelle URL, le navigateur doit encore attendre que la requête HTTP soit reçue devient . De plus, le bot Google ne suit que trois redirections, donc une chaîne de redirections est également désavantageuse pour l’exploration – et donc éventuellement aussi pour le classement.

Il serait conseillé de documenter la structure URL de la page, y compris toutes les redirections 301. Si vous remarquez une chaîne ici (redirection vers redirection vers redirection), vous devez trouver le premier site ou redirection de cette chaîne, puis le diriger directement vers l’URL souhaitée.

Étape 4 : mise en cache

Il est difficile de trouver un guide d’optimisation de la vitesse d’un site Web sans une section sur ce qu’on appelle la mise en cache. Cela enregistre une ressource dans un cache afin qu’elle puisse être restaurée rapidement si nécessaire.

Lorsque la mise en cache du navigateur est activée, les éléments d’une page Web sont stockés dans le navigateur de l’utilisateur afin que lors de la prochaine visite, le navigateur puisse les charger immédiatement sans avoir à envoyer une autre requête HTTP au serveur pour l’un des éléments mis en cache.

Une fois la première page chargée et ses éléments stockés dans le cache de l’utilisateur, il ne reste plus qu’à télécharger de nouveaux éléments sur les pages suivantes. Cela peut réduire considérablement le nombre de fichiers qui doivent être téléchargés au cours d’une session de navigation typique.

Utiliser un CDN

Un réseau de diffusion de contenu (CDN) est un serveur décentralisé à différents endroits sur lequel sont stockées des parties de votre site Web.

Il est donc possible de charger des éléments du site via un CDN sans alourdir votre propre serveur. Ceci s’applique à toutes les parties du site Web qui doivent être chargées sur demande. Comme décrit au point précédent, il peut s’agir de fichiers CSS, mais aussi de scripts et d’images. Chacun de ces éléments doit être chargé via une requête HTTP. En utilisant un CDN, vous pouvez enregistrer certaines de ces requêtes HTTP sur votre propre serveur. Avantage supplémentaire : les CDN travaillent au niveau régional. Qu’est-ce que cela signifie exactement ? Si votre client doit charger des parties du site Web en Allemagne, celles-ci seront également chargées directement sur un site en Allemagne. De cette façon, vous pouvez améliorer la vitesse de chargement grâce à des chemins de transmission plus courts.

Un CDN bon marché est, par exemple, Amazon CloudFront ou Google App Engine. Cependant, il convient de vérifier au cas par cas si un réseau de diffusion de contenu gratuit offre des vitesses et des services acceptables.

Conclusion

Si votre site Web est lent, il est susceptible d’obtenir moins de trafic, les rebonds se produiront plus rapidement et plus souvent, et de nombreux visiteurs ne reviendront pas sur le site.

Souvent, vous pouvez obtenir un impact positif et durable et augmenter la vitesse de la page du site Web en tenant compte des points de cet article de blog :

  • Réduire/tronquer les requêtes HTTP
  • Utilisez simplement une feuille de style CSS
  • Optimisez vos images
  • Utiliser la compression GZIP
  • Réduire les redirections 301
  • Utilisation de la mise en cache côté serveur
  • Utiliser un CDN

Que vous souhaitiez améliorer le temps de chargement de votre site Web afin d’obtenir un meilleur classement, d’améliorer l’expérience utilisateur ou d’obtenir de meilleures conversions : il existe de nombreuses bonnes raisons de revoir de temps en temps votre propre optimisation de la vitesse des pages pour appeler l’ordre du jour.