Connaissez-vous la durée maximale d’attente d’un internaute devant une page qui peine à se charger ? 3 secondes. Au-delà, l’utilisateur passe son chemin. Vous vous en doutez, un site web lent entraîne une augmentation du taux de rebond et impacte négativement votre trafic. Si les visiteurs quittent votre page rapidement, votre performance commerciale et le référencement naturel […]
Connaissez-vous la durée maximale d’attente d’un internaute devant une page qui peine à se charger ? 3 secondes. Au-delà, l’utilisateur passe son chemin. Vous vous en doutez, un site web lent entraîne une augmentation du taux de rebond et impacte négativement votre trafic. Si les visiteurs quittent votre page rapidement, votre performance commerciale et le référencement naturel de votre site en pâtiront. Dès lors, comment inverser la tendance et optimiser le temps de chargement de votre page web ? Dans cet article, nous vous proposons 5 mesures concrètes pour améliorer la vitesse de votre site et garder ainsi les internautes dans votre boutique.
Jetez un œil aux plugins et widgets de votre site
Lors de la création de votre site internet, vous avez peut-être été tenté d’ajouter de nombreuses fonctionnalités, d’autant plus si votre choix de CMS s’est porté sur WordPress. Cependant, la multiplication des plugins et des widgets n’est pas synonyme d’une meilleure performance sur le web, au contraire.
En effet, les options que vous téléchargez permettent pour la plupart de faciliter la navigation des internautes et d’améliorer leur expérience, souvent au détriment de la vitesse de chargement. Plus ils s’accumulent, plus la latence risque d’augmenter. Or, souvenez-vous que votre site doit s’afficher en moins de 3 secondes s’il ne veut pas égarer des visiteurs…
Une première étape pour optimiser la vitesse de chargement de votre page web est donc de réaliser un ménage de printemps de vos plugins et widgets pour ne garder que les éléments indispensables à la navigation.
Compressez vos images pour optimiser le temps de chargement de votre page web
La lenteur d’un site internet s’explique souvent par la lourdeur de ses contenus multimédias. Bien qu’indispensables pour véhiculer l’atmosphère et le positionnement de l’entreprise, les images jouent également un rôle dans la vitesse de chargement de votre site. L’idée n’est pas de supprimer l’ensemble de vos images, mais plutôt de les compresser sans réduire leur qualité.
Pour cela, nous vous proposons quelques pistes :
- choisissez une résolution de 72 à 76 dpi (dot per inch en anglais, soit point par pouce ou ppp) ;
- optez pour l’extension d’image JPEG que la plupart des navigateurs décryptent facilement, PNG pour vos logos et icônes ou WebP, le format proposé par Google (attention cependant, tous les navigateurs ne parviennent pas à le lire) ;
- si vous utilisez le logiciel Photoshop pour vos illustrations, pensez à enregistrer vos fichiers avec la fonction « enregistrer pour le web ». Cette fonctionnalité permet de diminuer la qualité de l’image de 40 %, une réduction qui ne nuit pas à son affichage sur un écran (ne compressez jamais au-delà de 60 à 70 %) ;
- compressez vos visuels dans l’onglet « Ajuster la taille » sur Mac, « Photo » sur PC ou grâce à une solution gratuite en ligne comme Kraken ou Imagify.
Réduisez le poids de vos vidéos pour accélérer leur affichage
Si les images alourdissent la vitesse de chargement de votre page web, il en va bien sûr de même pour vos vidéos. Pour ne pas ralentir votre page web, nous vous conseillons de choisir une résolution entre 720p et 1080p, puis d’agir sur un ou plusieurs critères suivants :
- ratio (16/9, 2/3, etc.) ;
- profondeur en bpp (bits par pixel) ;
- fréquence (fps, frame per seconds ou ips, images par seconde) ;
- extension (format mp4) ;
- débit.
Au lieu d’intégrer vos vidéos directement sur votre site internet, nous vous recommandons de les héberger sur YouTube, Vimeo ou Dailymotion. Par ailleurs, optimiser le poids de ces fichiers va permettre à votre interface de s’afficher plus efficacement sur les smartphones et prouver la dimension mobile responsive de votre site, un facteur important pour améliorer votre référencement.
Minimisez les requêtes HTTP en supprimant les éléments inutiles
Les requêtes HTTP (Hypertext Transfer Protocol) assurent la communication entre les navigateurs de vos visiteurs et le serveur qui héberge votre page web. Ainsi, au moment où votre serveur reçoit une requête, il transmet aux navigateurs les fichiers comportant le contenu de votre site.
Vous l’aurez compris : plus votre site internet possède de fichiers, plus le navigateur de l’internaute transfert des requêtes HTTP et met donc longtemps à charger. Pour résoudre cette problématique, vous devrez supprimer les éléments invisibles et inutiles en termes d’expérience utilisateur.
Pour connaître combien de requêtes demandent votre page web, rendez-vous sur votre page, effectuez un clic droit, puis sélectionnez « Inspecter » et choisissez l’onglet « Network ». La colonne « Name » vous renseigne sur les fichiers de la page web, « Size » précise la taille de chacun des éléments et « Time » indique le temps nécessaire pour charger le fichier. Dans le coin inférieur gauche, vous découvrirez le nombre total de requêtes réalisées.
Afin de minimiser le nombre de requêtes HTTP, vous pouvez recourir à un CDN (Content Delivery Network). Ce dispositif sert à mettre en cache certains contenus demandés par l’internaute sur un réseau mondial de serveurs. Dans ce cas-là, le contenu distribué sera envoyé au serveur le plus proche de votre visiteur, ce qui influencera la rapidité du chargement.
Hiérarchisez les chargements avec le lazy loading
Une stratégie que vous pouvez adopter pour optimiser le temps de chargement de votre page web est de hiérarchiser l’ordre de priorité de l’affichage. Ainsi, vous indiquez d’abord les éléments visuels qui doivent s’afficher dès l’ouverture de la page, puis ceux qui peuvent attendre une action de l’internaute. Cette pratique porte le nom de lazy loading (chargement paresseux).
À titre d’exemple, les ressources CSS et JS positionnées sous la ligne de flottaison peuvent ne s’afficher que lorsque l’utilisateur scrolle. De même, vous pouvez choisir des menus déroulants qui n’apparaissent qu’au clic ou des boutons de partage sur les réseaux sociaux qui ne s’affichent qu’au passage de certains endroits.
Grâce à ces 5 techniques, vous détenez déjà des clés essentielles pour optimiser le temps de chargement de votre page web. Pour aller plus loin, vous pouvez réaliser un test de vitesse de votre site internet, agir sur l’hébergement ou les optimisations serveur. Dans le cadre d’une problématique précise, n’hésitez pas à nous soumettre votre projet ou à nous poser vos questions, nous serons ravis de vous accompagner pour rendre votre site plus performant.