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

Avoir un site rapide est devenu un élément stratégique pour améliorer la conversion, l’expérience utilisateur et, surtout, le référencement. Cependant, il n’est pas rare de trouver sur le web des sites très lents. Alors, comment améliorer la vitesse de chargement de votre site ? Dans cet article, je vous dévoile les dix astuces que j’ai utilisées pour accélérer mon site, en mettant l’accent sur celles qui ont eu le plus d’impact.

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

Face aux comportements des internautes sur le web, surtout avec la propagation des IA rapides, avoir un site rapide n’est plus une option, mais un devoir. Il en va de votre rentabilité ainsi que de leur expérience utilisateur.

D’abord, un site qui se charge rapidement offre une meilleure expérience utilisateur. En fait, au cours de leur navigation, les utilisateurs s’attendent à ce qu’une page se charge en quelques millisecondes. Si le temps de chargement est très élevé, ils risquent de quitter le site ou d’explorer moins de pages.

Conséquence ? Ils sont moins enclins à remplir des formulaires (de vente, par exemple). Ah oui ! Plus personne ne veut passer une minute à attendre qu’une page de réservation se charge. Cela impacte directement votre conversion, vos ventes et le taux de rebond.

Mais ce n’est pas tout !  Un site rapide consomme moins de ressources serveur. Cela vous permet d’avoir un site stable en performance même avec un trafic élevé. Résultat ? Plus besoin de passer à la formule supérieure chez votre hébergeur pour garantir une bonne expérience à vos visiteurs.

Est-ce que la vitesse de chargement impacte le SEO ?

Sur cette question, les avis sont mitigés, une polémique sans fin. Je vais faire court : NON. Non, car Google ne prend pas réellement en compte la vitesse comme un critère de chargement.

À mon avis, avoir un site rapide ne garantit pas une position en première page de Google. Cependant, ne négligeons pas ces deux aspects de la vitesse qui ont un impact :

• L’expérience utilisateur : Il est clair que vos visiteurs passeront plus de temps sur votre site s’il est rapide. Cela envoie un signal positif, et c’est ce signal qui impactera le référencement de votre site.
• Un avantage compétitif : Si votre site se charge plus vite que celui de vos concurrents, les visiteurs sont susceptibles de cliquer sur son lien dans la SERP et de découvrir une page. Le taux de clic sur les pages de résultats de Google a également un impact non négligeable sur le classement d’un site.

Alors, est-ce qu’une bonne vitesse de chargement garantit la position 0 sur Google ? Non. Est-ce une raison pour avoir un site lent ? Encore moins.

Comment tester la vitesse de chargement de son site ?

Le meilleur moyen de tester la vitesse de chargement de son site est de charger soi-même une page et d’évaluer le temps de chargement. Cependant, il est évident qu’avec de telles méthodes, tester les performances de votre site peut être difficile, surtout pour les sites volumineux.

L’alternative est de se tourner vers des outils en ligne pour des tests en quelques clics. Je tiens à vous avertir que ces outils ne sont pas entièrement fiables. Il se peut que vous obteniez un meilleur score sur un site lent. Parmi les nombreux outils de test en ligne, je vous conseille les deux suivants.

• Google Page Speed Insights

Il s’agit d’un outil gratuit de Google qui vous permet de mesurer en un clic le score de performance ainsi que la vitesse de chargement de votre site. Une confusion courante avec cet outil est de confondre le score d’une page avec celui du site web en général.

Revenons à l’outil. Pour l’utiliser, insérez le lien de la page à analyser dans la barre de requête, puis patientez pendant qu’il teste les formats « Mobile » et « Ordinateur » et vous envoie son rapport.

Au moment de cette rédaction, ma page d’accueil obtient un score de 99 % sur ordinateur et 94 % sur mobile : ce qui n’est pas mal ! Je vous dévoile dans la suite de l’article comment j’y suis arrivé.

• Chinafy

Cet outil est une pépite que j’ai découverte tout récemment via un post LinkedIn. Contrairement à l’outil de Google, qui effectue des tests sans tenir compte de votre position géographique, celui-ci agit comme un « utilisateur » robot. Il dispose de 18 serveurs répartis sur le globe et peut donc effectuer des tests depuis chacun de ces pays et villes.

Le mode d’utilisation reste le même que le précédent : vous insérez le lien de la page à analyser, puis il vous le teste sous les deux versions. La particularité ici est qu’en plus de choisir les pays, vous pouvez également choisir le type de connexion : Wi-Fi, 4G, 3G ou autres.

Choisissez un hébergeur web de qualité

Le facteur déterminant dans la vitesse de chargement d’un site est l’hébergeur. En fait, si votre hébergeur est de qualité, des serveurs plus rapides et optimisés seront mis à votre disposition. Cela réduit donc le temps de réponse et, par la même occasion, la vitesse de chargement des pages.

De plus, un hébergeur optimal vous offre une bande passante large ainsi que des connexions à haut débit pour éviter les crashs lors des pics de trafic.

Si vous résidez en France, je vous recommande vivement o2switch, LWS et Hostinger. Soyez rassuré, ce n’est pas une publicité. Je suis moi-même un utilisateur de LWS et j’avoue que les infrastructures sont de qualité.

Optez pour un thème WordPress performant pour du Lazy load

Le Lazy Load, ou chargement paresseux, permet de charger les ressources principales d’un site, comme les images et les iFrames, uniquement lorsqu’elles deviennent visibles à l’écran. Pour le constater, rendez-vous sur ma page de blog ou sur un article au hasard. Vous verrez que les images ne s’affichent pas immédiatement, mais uniquement lorsqu’elles sont nécessaires : c’est ça, le Lazy Load.

Pour bénéficier de telles fonctionnalités, vous devez choisir un thème SEO-friendly. Je vous recommande le thème Astra, qui est excellent pour réduire les requêtes et améliorer les performances sur mobile.

Compressez vos fichiers média en WebP ou AVIF

Actuellement, sur le web, WebP et AVIF sont les deux formats de compression modernes. Ils permettent de réduire considérablement la taille des images par rapport aux JPEG et PNG.

En adoptant ces formats sur votre site, vous impactez directement le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP), permettant ainsi aux contenus visuels et à l’image principale de se charger plus rapidement.

Sur WordPress, je vous recommande le plugin QuickWebP, qui est gratuit et compresse automatiquement toutes les images d’un site. Je l’ai testé sur mon site, et j’ai été vraiment satisfait des résultats.

Utilisez un CDN pour votre site web

Le CDN, ou Content Delivery Network, qui signifie réseau de diffusion de contenu en français, rapproche le contenu de l’internaute. Le réseau stocke une copie de votre site sur plusieurs serveurs répartis stratégiquement à travers le globe. L’objectif est d’offrir à chaque visiteur des réponses provenant du serveur le plus proche de lui.

Un autre avantage souvent négligé est que le CDN décharge le serveur principal. Par exemple, avec le CDN Cloudflare sur mon site, mon serveur principal subit moins de pression, ce qui réduit les risques de crash en cas de pic de trafic et garantit une vitesse de chargement optimale. 

Hébergez vos polices en local

En général, les polices pour tous les sites web sont chargées depuis des plateformes externes, principalement Google Fonts. Cette pratique entraîne un temps de chargement considérable. À titre d’exemple, j’ai gagné 10 points sur Google Page Speed Insights en hébergeant mes polices localement.

En effet, lorsque les polices sont hébergées sur un service tiers, le navigateur doit, à chaque requête, quitter le site pour aller chercher la police sur un autre site avant de charger la page. En revanche, si tout était hébergé sur le site, cela simplifierait les choses, car tout serait géré en interne.

Petite parenthèse pour ceux qui hésitent : depuis 2022, un tribunal allemand a statué que l’hébergement des polices sur Google Fonts constitue une violation du RGPD. Il est important de vous conformer aux règles si vous êtes dans l’Union Européenne.

Activez la mise en cache des ressources

La mise en cache des ressources fonctionne comme une mémoire pour les navigateurs de vos visiteurs. Certes, cela n’a pas un grand impact lors de la première visite, mais pour les visites suivantes, c’est vraiment efficace.

Cela permet au navigateur d’éviter de recharger chaque élément de code avant l’affichage de la page. Une copie est stockée en mémoire, permettant aux pages de s’afficher presque instantanément, ce qui offre une vitesse de chargement optimale, surtout lors des visites répétées.

Cependant, ce conseil doit être pris avec précaution. Si vous avez déjà un CDN sur votre site, activer une mise en cache peut perturber le fonctionnement. Il en va de même si vous disposez de deux options de cache : lisez bien votre offre d’hébergement.

Supprimez les extensions inutilisées

Il existe toujours sur nos sites des extensions dont nous ne voulons pas nous séparer, pourtant il faut le faire. En supprimant sept extensions de mon site (SMTP, conversion WebP, etc.), je suis passé de 63 à 72 sur Google PageSpeed pour mobile.

En fait, chaque plugin WordPress est chargé de code JavaScript et CSS, et parfois même de fichiers inutiles qui alourdissent le chargement. De plus, il arrive parfois que les extensions créent des conflits entre elles, entraînant des blocages, des crashs ou des fonctionnalités chargées en arrière-plan qui ralentissent le site.

Pour ceux qui se demandent par quoi ai-je pu remplacer ces sept extensions, sachez qu’il existe désormais sur WordPress un plugin tout-en-un : WPMasterToolkit. Plus de 110 fonctionnalités regroupées en un seul plugin : un véritable game changer pour accélérer la vitesse de chargement de votre site.

Combinez et minifiez les fichiers JavaScript et CSS

Un site web est constitué de plusieurs fichiers de script et de code, notamment les fichiers CSS et JavaScript. Ces deux types de code sont très lourds à charger, et leur abondance sur un site peut rapidement devenir problématique.

En les combinant, vous réduisez le nombre de requêtes, car tout est regroupé en un seul fichier. Cela améliore la vitesse de chargement du site et diminue le nombre de requêtes HTTP. La minification, quant à elle, permet d’alléger le poids des fichiers en supprimant les espaces et les commentaires inutiles.

Je ne vous recommande pas cette méthode. Je l’ai testé, et la couleur « ambre » sur mon site est à peine reconnaissable. C’est le revers de la médaille : combiner des fichiers peut généralement briser la structure du code, ce qui affecte visuellement le site.

Activez le JavaScript différé sur le site

Au début, j’ai mentionné le Lazy Load. C’est une option disponible dans les thèmes WordPress. Ici, je vais aborder le JavaScript différé, ou defer JavaScript, une option que vous pouvez activer via certains plugins si elle n’est pas disponible dans votre thème WordPress.

Je ne vais pas entrer dans des détails techniques, mais lorsqu’un navigateur rencontre un fichier JavaScript sur une page, il s’arrête pour le télécharger et l’exécuter avant de continuer. Comme vous pouvez l’imaginer, la page sera très lente à charger, surtout si le JavaScript est en début de page.

Le defer JavaScript consiste donc à télécharger le code JS en parallèle avec le HTML, mais à ne l’exécuter qu’une fois la page affichée. L’avantage ici est que vous ne supprimez pas le code, ne le combinez pas et ne le minifiez pas ; il sera simplement chargé à la fin de l’affichage de la page.

Personnellement, je l’utilise sur mon site. D’ailleurs, dans sa version gratuite, le thème Astra sur WordPress propose déjà cette option.

Réduisez les animations sur le site

Les animations sont excellentes pour améliorer l’expérience utilisateur. Elles nécessitent cependant beaucoup de ressources processeur et de mémoire, en fonction de la complexité de l’animation. Cela en fait une arme à double tranchant. Ainsi, plus vous avez d’animations, plus votre site sera lent, surtout sur les smartphones.

En réduisant les animations sur votre site, vous aurez moins de code inutile à charger, moins de requêtes serveur et des fichiers plus légers. En effet, les visiteurs sont plus impressionnés par des pages rapides que par des pages animées qui vont dans tous les sens.

La preuve ? Je n’ai aucune animation sur cette page, et pourtant vous l’avez lue jusqu’à la fin (pas vrai ?).

FOIRE AUX QUESTIONS

Une préoccupation particulière pour améliorer la vitesse de chargement de votre site ? J’y réponds dans  cette section.