Vitesse de chargement : pourquoi et comment l’améliorer ?

La performance d’un site a toujours été un critère essentiel pour augmenter son trafic et améliorer l’expérience utilisateur. Toutefois, elle est devenue encore plus importante depuis que la vitesse de chargement est prise en compte pour le positionnement dans les moteurs de recherche. Genious Interactive vous explique pourquoi vous devez améliorer votre vitesse de chargement et comment y parvenir.
 

Pourquoi améliorer la vitesse de chargement de votre site ?

Améliorer la rétention des visiteurs

La vitesse de chargement d’un site est la première impression donnée au visiteur. A l’heure où tout doit être instantané, même sur mobile, l’utilisateur n’attend plus. Si votre site met trop longtemps à charger, il est susceptible de quitter la page pour retourner à sa recherche, ce qui va augmenter votre taux de rebond*. Des études ont montré que 47% des utilisateurs s’attendent à ce qu’une page se charge en moins de 2 secondes et que 40% des internautes ferment une page si elle met plus de 3 secondes à s’afficher. Diminuer le temps de chargement va permettre de retenir l’utilisateur plus longtemps, d’augmenter le nombre de conversions (achats, inscriptions) et de donner une image positive à votre marque. Ainsi, le visiteur sera plus enclin à revenir sur vos pages.

*pourcentage d’utilisateurs qui entrent sur une page web puis quittent le site sans consulter d’autres pages

Lire aussi : Ergonomie web : 7 bonnes pratiques

Faire progresser votre référencement

Depuis 2010, Google prend en compte la vitesse de chargement dans son classement SEO. Le géant du web favorise ainsi le référencement des sites rapides à charger et à s’afficher. A l’inverse, un temps de chargement élevé va vous faire perdre en visibilité. Votre site sera pénalisé en référencement et pourra se voir affublé d’un “Red Slow Label” très dissuasif dans les moteurs de recherche.

Comment mesurer la vitesse de chargement ? Avec quels outils ?

Avant d’entamer toute modification, vous devez tester votre vitesse de chargement et celles de vos concurrents afin de savoir si votre site est lent et de vous fixer un objectif à atteindre.

De nombreux outils en ligne existent pour mesurer la rapidité de votre site (Google PageSpeed, GT Metrix, Webpagetest, Pingdom, Yslow (extension Chrome), Firebug (extension Firefox)). Pour des résultats plus fiables, il est conseillé d’en utiliser plusieurs.

Ces outils vont vous délivrer des indicateurs de performance (ou KPI) tels que :

•     le TTBF (Time to First Byte), temps pris par le serveur pour envoyer sa première réponse,

•     le Start Render : temps pour qu’un pixel soit affiché à l’écran,

•     le Fully Loaded Time : temps pour que toute la page et ses éléments soient chargés,

•     le Byte In : quantité de données que doit récupérer le navigateur pour afficher entièrement la page.

Attention ! Les outils en ligne vous donnent le temps de chargement du code de la page. Vous devez également prendre en compte le débit utilisateur, le temps de latence (temps de transit entre le serveur et le navigateur) et la connexion mobile pour connaître la vitesse réellement perçue par l’utilisateur. L’outil Webpagetest vous permet de tester la rapidité de votre site en choisissant le navigateur, la localisation, la connexion internet et bien d’autres options encore.

Comment améliorer la vitesse de chargement de votre site ?

De nombreux facteurs peuvent être source de lenteur pour votre site web : des images et fichiers de code trop lourds, un manque de performance du serveur, un hébergement web inadapté, etc. Voici nos conseils pour réduire le temps de chargement de vos pages.

Optimisez vos images pour le web

Le poids des images est une des principales causes de lenteur sur un site internet. Avant de poster une image sur le web, pensez à :

•     Vérifier qu’elle a bien une résolution de 72 dpi (pixel/pouce) ou sélectionner “Enregistrer pour le Web” dans les logiciels de retouches d’image (Photoshop ou Gimp),

•     Choisir un format d’image compatible avec le web : le JPEG pour les photos, le PNG pour les effets de transparence, le GIF pour les animations,

•     Réduire la dimension de l’image, de préférence via votre CMS (génération automatique des miniatures), un logiciel ou un outil en ligne et non via le code CSS pour une meilleure qualité,

•     Compresser l’image à l’aide d’outils en ligne comme Compressor, ezGif, TinyPNG, Image Optim ou, dans le cas d’un site WordPress, en installant des plug-ins tels que Image Optimizer, Imagify, Smush.

Idéalement, le poids d’une image web se situe entre 50 et 500 Ko.

Autre solution pour un temps de chargement plus court lorsque vous souhaitez vous atteler au design de votre site : utiliser la méthode des CSS Sprites, qui consiste à réunir plusieurs images en une seule et à ne sélectionner que la zone à afficher.

Si vos pages contiennent beaucoup d’images, vous pouvez également utiliser le chargement asynchrone (Lazy Load) pour ne les afficher que lorsqu’elles sont visibles à l’écran. Paradoxalement, l’utilisation du Lazy Loading n’est pas conseillée pour le référencement puisque tous les moteurs de recherche ne sont pas capables d’exécuter les codes JavaScript.

Réduisez le poids de vos fichiers de code

Si la lenteur n’est pas liée au poids de vos images, c’est peut-être votre code qui en est la cause. Voici 3 étapes pour alléger vos fichiers HTML, CSS et JS.

•     Minifiez vos codes : Pour minifier vos fichiers, supprimez les espaces, les sauts de lignes, les commentaires et les séparateurs de blocs dans le code. Si vous avez un site WordPress, vous pouvez installer le plug-in WP-Minify ou Autoptimize pour réduire vos codes automatiquement. Vous pouvez également le faire via des outils en ligne (Minify, Compress my Code) ou directement depuis votre logiciel de développement préféré.

•     Regroupez vos fichiers : Mieux vaut charger un fichier de 50 Ko plutôt que 5 fichiers de 10 Ko. Alors n’hésitez pas à réunir tous les codes CSS dans un même fichier et à faire de même pour les fichiers JS. Notez que ceci n’est pas forcément vrai avec le HTTP2. Contrairement au HTTP, qui ne peut charger qu’un nombre défini de fichiers en parallèle (entre 2 et 8), le HTTP2 n’est pas limité. Dans ce cas, le chargement de plusieurs petits fichiers peut être plus avantageux que celui de fichiers lourds.

•     Compressez vos fichiers : Activez la compression GZip pour obtenir des fichiers de code jusqu’à 70% plus légers. Ce système de compression est pris en charge par la plupart des navigateurs modernes.

Après chaque manipulation, pensez à vérifier l’affichage de vos pages pour déceler les éventuels bugs.

Installez un système de cache serveur

Lorsqu’un internaute accède à une URL, le serveur doit exécuter les fonctions PHP et accéder à la base de données avant de renvoyer sa réponse au navigateur. L’installation d’un cache serveur permet, lors de ce premier chargement, de générer une page HTML sauvegardée (mise en cache), qui sera affichée à la visite suivante. Grâce au cache serveur, le serveur n’a plus besoin d’exécuter les fonctions PHP ni d’accéder à la base de données. Moins sollicité, il devient plus rapide. Le système de cache serveur permet une amélioration notable des performances générales du site : un gain de temps important, une expérience utilisateur améliorée, un meilleur référencement naturel.

Pour un site WordPress, vous pouvez installer des plugins de mise en cache déjà configurés tels que WP-Rocket, WP Super Cache, W3 Total Cache ou WP Fastest Cache.

Configurez la mise en cache du navigateur

Le cache navigateur mémorise un certain nombre d’éléments à la première ouverture de la page pour ne pas avoir à les charger de nouveau à la seconde visite. Il limite les requêtes serveur, réduit le temps d’attente et diminue le trafic réseau.

Vous pouvez configurer le cache via le fichier .htaccess en spécifiant des dates d’expiration (Expire Headers) pour indiquer au navigateur combien de temps il doit conserver les données dans son cache.

Utilisez un CDN

Pour réduire le temps de réponse du serveur, vous pouvez souscrire à un Réseau de Diffusion de Contenu ou Content Delivery Network (CDN).

Le CDN est un ensemble de serveurs qui collaborent pour mettre à disposition du contenu ou des données à des utilisateurs. Ces nombreux serveurs dispatchés à plusieurs endroits permettent à l’internaute d’accéder à la version du site la plus proche de son lieu de connexion. Le CDN améliore ainsi le temps de réponse, l’expérience utilisateur, la sécurisation des données, le référencement du site et réduit les coûts de bande passante. C’est un outil idéal en cas de diffusion à l’international. Attention  : si le CDN tombe en panne, votre site sera privé des fonctionnalités disponibles sur ce réseau.

Pour améliorer vos performances, voici quelques CDN à découvrir  : MaxCDN, Akamai, Google Cloud CDN, Limelight, OVH, Cloudflare.

Choisissez un hébergement adapté

Un hébergement inadapté peut également affecter votre vitesse de chargement. Pour héberger votre site, plusieurs solutions s’offrent à vous :

1. L’hébergement gratuit

Se faire héberger gratuitement : c’est tentant. Mais les hébergeurs gratuits demandent généralement en échange la diffusion de messages publicitaires sur votre site. Une contrepartie clairement désagréable pour vos visiteurs et négative pour votre référencement, sans parler des performances et services très souvent médiocres (aucune garantie, pas de hotline, données stockées à l’étranger…) 

2. L’hébergement mutualisé

Votre site est hébergé sur un serveur et partage les mêmes ressources (mémoire, processeur, bande passante). C’est l’hébergement le moins cher (moins de 3€/mois) et le plus facile à utiliser puisque l’environnement est déjà installé. Toutefois, si l’un des sites hébergés est défaillant, votre site s’expose à des risques de crash serveur voire de piratage (hacking). Il en va de même si un autre site hébergé sur le même serveur que vous génère beaucoup de trafic, votre site risque d’être ralenti car le serveur devra travailler davantage pour encaisser toutes ces visites. Dans tous les cas, ne soyez inquiets si vous allez chez un prestataire de renom, les risques de piratage ou de chute de performance dû aux autres sites sont aujourd’hui bien maîtrisés. L’hébergement mutualisé convient principalement aux sites internet à faible trafic ayant des besoins standards (LAMP : Linux, Apache, MySQL, PHP).

3. L’hébergement virtuel ou VPS – Cloud

Votre site est hébergé sur ce qu’on appelle un serveur privé virtuel – VPS (Virtual Private Server). Ce serveur virtuel possède son propre système d’exploitation et partage les ressources d’un serveur physique avec d’autres VPS. A la différence de l’hébergement mutualisé, des ressources sont réservées pour chaque VPS. Pour un coût mesuré, vous pouvez ainsi configurer votre hébergement comme vous le souhaitez. Cependant, l’hébergement virtuel expose également à des risques en cas de crash d’une des machines virtuelles. Ce type d’hébergement est destiné aux sites internet avec un trafic important ou ayant des besoins spécifiques (vidéos, espace disque important, ressources RAM ou CPU, librairies particulières, applications spécifiques, etc.). Notez que de plus en plus d’hébergeurs proposent à la fois des hébergements mutualisés et des hébergements VPS.

Un hébergement cloud émerge également depuis quelques années. A la différence du VPS, le cloud dispose de clones sur différents serveurs qui lui permettent d’être hautement disponible. En cas de défaillance du premier serveur, un des clones peut prendre le relais.

4. L’hébergement dédié

L’hébergement dédié permet à votre site d’être seul sur une machine physique. Vous n’êtes limité ni au niveau de la configuration ni au niveau du matériel (à l’exception des capacités du serveur). Il est toutefois bien plus coûteux et nécessite d’avoir de solides compétences techniques en systèmes et réseaux ou de faire appel à un prestataire compétent. Ce type d’hébergement est conseillé pour les sites e-commerce nécessitant une disponibilité très importante de la machine ou ceux qui doivent sécuriser les données.

A vous de choisir l’hébergement le plus adapté à votre site.

Evitez les redirections en cascade

Principalement utilisées en cas de refonte de site, les redirections font passer les internautes d’une page à une autre de manière automatique lorsque la première est vouée à disparaître ou n’existe déjà plus. Ces redirections permettent d’empêcher que les visiteurs ne tombent sur des pages d’erreur 404 mais aussi d’indiquer aux moteurs de recherche qu’une page a changé d’adresse et ainsi, de ne pas perdre le bénéfice de son référencement passé.

Cependant, de multiples redirections (A redirige vers B qui redirige vers C) peuvent être progressivement préjudiciables pour le référencement. Alors, évitez les chaînes de redirection.

Prendre rendez-vous avec un expert SEO

Après avoir adopté tous nos conseils, vous devriez noter un changement fondamental dans la vitesse de chargement de vos pages. Toutefois, améliorer la performance de votre site demande des compétences en informatique. Si nécessaire, contactez un expert SEO Genious Interactive pour détecter les sources de lenteur et définir les actions à entreprendre.

Lire aussi : 35 choses à savoir pour créer un site performant