Badge Webflow Award Winner 2023

5 étapes pour accélérer la vitesse de son site web

Publié le 
10/11/2021
Modifié le 
11/4/2023
Temps de lecture : 5 min
Evolution score performance vitesse google page speed
Écrit par
Photo de Thibaut Legrand avec un t-shirt Digidop noir

Thibaut Legrand

Développeur Webflow & SEO

Voici comment accélérer la vitesse de chargement des pages de son site pour optimiser son référencement naturel !

Points clés à retenir

Un des facteurs les plus importants pour être bien référencé sur les moteurs de recherche concerne la vitesse de chargement de votre site. Un site qui met trop de temps à charger peut être néfaste pour l’expérience utilisateur (UX) et donc générer un taux de rebond élevé. Vous pouvez perdre plus de la moitié de votre audience si votre site a un temps de chargement supérieur à 3 secondes. Les robots de Google vont scruter la vitesse de votre site pour pouvoir offrir le meilleur service à ses internautes. Il faut donc avoir un œil vigilant sur ce critère de performance. Ainsi, à travers cet article, nous allons vous montrer comment optimiser votre site pour qu’il soit plus rapide.

Statistiques Google sur la probabilité de taux de rebond par rapport au temps de chargement d'une page web
Probabilité du Taux de rebond selon le temps de chargement des pages web

Comment évaluer la vitesse de chargement actuelle de son site web ?

Avant de vouloir optimiser le temps de chargement de son site, il faut déjà le mesurer. Pour cela, rien de bien compliqué. En effet, Google vous propose un outil pour pratique pour effectuer un diagnostic de vos pages concernant ce facteur.

Vous pouvez vous rendre sur Google PageSpeed Insights pour évaluer le temps de chargement de vos pages. Une fois que vous entrez une URL, vous obtenez un score sur 100. Ce score de performance est obtenu via la moyenne pondérée de plusieurs métriques (First Contentful & Largest Contentful Paint, Total Blocking Time, Speed Index, etc.). Vous pourrez alors avoir une vue détaillée des raisons pour lesquelles votre site met un certain temps à charger et donc des points à améliorer sur celui-ci.

Une autre méthode pour mesurer la vitesse de chargement de son site est d’utiliser l’outil SEMRush. Effectivement, sur SEMRush, vous pouvez accéder aux données de vitesse de vos pages. Pour y avoir accès, il vous suffit de suivre le chemin suivant :

  • SEO Local
  • Audit de site
  • Score thématique
  • Performance

Ici aussi, vous pouvez voir quelles sont vos pages qui mettent du temps à charger ainsi que les raisons et axes d’amélioration.

Capture d'écran du score de performance de Digidop.fr sur SEMRush avec une analyse de la vitesse de chargement des pages

Enfin, vous pouvez aussi utiliser l'outil Pingdom. Comme les outils précédents, Pingdom évalue la vitesse de votre site, mais il donne aussi la possibilité de la mesurer selon différents endroits dans le monde. Vous obtenez alors une vue détaillée de la taille de vos pages (poids images, vidéos ...) et des possibilités pour améliorer la vitesse de son site.

Capture d'écran du score de performance de Digidop.fr sur Pingdom pour évaluer le temps de chargement du site

Évaluer la vitesse de ses pages fait partie des étapes importantes dans l'audit SEO de son site.

5 points pour accélérer la vitesse de son site web

Maintenant, entrons dans le vif du sujet. Nous allons voir à travers différentes étapes comment gérer l’optimisation du temps de chargement des pages de votre site internet.

1 - Réduisez la taille de vos fichiers média (Images, Vidéos …)

L’utilisation de fichiers média permet d’améliorer l’expérience utilisateur notamment pour vos articles, votre contenu et, de façon plus générale, pour votre site. Il est donc important d’utiliser des images, vidéos ou encore audio pour proposer de la qualité et se différencier. Cependant, ces fichiers peuvent être très volumineux et il est donc important, pour améliorer la vitesse d'un site, de réduire leurs tailles.

Diminuez le poids de vos images (compressez-les)

Pour commencer, prenons le type de fichier le plus utilisé sur les sites internet : les images. Il en existe en plusieurs formats (Jpg, Jpeg, png, gif, svg) mais tous doivent être optimisés pour le web.

Petit Tips : Utilisez le format SVG pour votre logo afin qu’il s’adapte à n’importe quel format sans perdre en qualité.

Les technologies modernes nous permettent d’avoir des images de très bonne qualité. Cependant, la plupart du temps, si une image est de très bonne qualité, elle est aussi volumineuse. Un fichier média volumineux aura un impact fort sur la vitesse de chargement de votre site. Il faut donc compresser vos images avant de les publier. Une manipulation très simple qui peut se faire grâce au site iloveIMG.

Tuto vidéo pour diviser par 10 le poids des images :

Diminuez le poids de vos vidéos (compressez-les)

À l'instar des images, un autre type de média très utilisé sur le web est la vidéo. Là aussi, il existe de nombreux formats (MP4, MOV, AVI, WMV, WEBP, etc.). Plusieurs méthodes existent afin de diminuer l’impact du poids d’une vidéo sur la vitesse de vos pages :

  • Embed votre vidéo depuis une autre plateforme (YouTube, Vimeo)
  • Utilisez un outil de compression de vidéo (Clideo, Adobe Premier)

L'option recommandée est plutôt d'intégrer les vidéos sur son site via un code <!-- fs-richtext-ignore --><embed>.

Représentation d'une intégration <embed> d'une vidéo YouTube sur le site digidop.fr

Si vous utilisez d'autres types de fichier médias que les images et les vidéos sur votre site web, faites en sorte que le poids de ces fichiers ne soit pas trop volumineux.

2 - Minifiez le HTML, CSS, JavaScript … (Rendre plus léger son code)

Derrière votre site, se cachent des lignes de code à n’en plus finir et comprenant plusieurs langages (HTML, CSS, Javascript, etc.). + votre site comprend de page et de contenu, + le code s’alourdit. Cependant, il est possible de réduire la taille de votre code en le minifiant.

En minifiant votre code, vous enlever les éléments "parasites" tel que les espaces ou les renvois à la ligne. Un supprimant ces éléments, vous alléger votre code sans que celui-ci ne soit impacté. Votre code sera moins facile à lire pour un humain, car il ne sera pas aéré, mais un robot n’aura aucun problème à le déchiffrer. Ainsi, le temps de chargement de vos pages sera considérablement réduit.

Capture d'écran d'un code CSS minifier à partir de CSS Minifier
Exemple d’un code CSS minifier

Comment minifier le code HTML, CSS et Javascript ?

  • Sur Wordpress : Installez le plugin : “Merge + Minify + Refresh” puis paramétrez les options de minification
  • Sur Webflow : Avant de publier ou d’exporter un projet, rendez-vous dans les paramètres du projet puis dans l’onglet “Hosting”, vous trouverez dans les options avancées, des cases à activer pour minifier le code HTML, CSS et Javascript

3 - Diminuez le temps de chargement de vos pages dans le monde grâce à un CDN (Content Delivery Network)

Un des moyens les plus efficaces pour augmenter la vitesse de chargement de votre site est d’utiliser un CDN (Content Delivery Network).

Mais qu’est-ce qu’un CDN ?

Un CDN permet à votre site d'être distribuer localement grâce à des serveurs présent sur tout le globale grâce à un système de réseau. En d’autres termes, votre contenu va être stocké dans différents serveurs autour du monde afin que les internautes puissent y accéder plus rapidement selon l’endroit où ils se situent. De ce fait, cela permet d’accélérer le chargement des pages.

Représentation de l'accès au contenu d'un site qui utilise un CDN ou non
Représentation de la distribution d'un site qui n'utilise pas un CDN par rapport à un site qui utilise un CDN

Si vous avez une audience internationale, ce peut être une bonne option que d’envisager d’utiliser un CDN.

Pour utiliser un CDN, il faut vous renseigner auprès de votre hébergeur.

Guide SEO Webflow 2023

4 - Prenez soin de bien choisir votre offre d'hébergement ainsi qu'un bon hébergeur web

Dans ce point-ci, il faudra bien étudier les différentes options que le marché vous propose. En effet, le choix d’un hébergeur et d’un type d’hébergement dépend majoritairement du budget que vous avez à disposition. Cependant, certains hébergeurs web proposent des options plus adaptées à vos besoins et certaines fois, il faut mettre le prix pour avoir un service de qualité.

L’hébergement web est une dépense majeure, mais essentielle ! Des types d’hébergement vous proposeront par exemple d’avoir un serveur dédié virtuel ou physique (ne comprend que votre site) plutôt qu’un hébergement mutualisé (comprend plusieurs sites web). Un avantage de taille pour générer plus de trafic et optimiser la vitesse de chargement de ses pages (surtout pour les sites E-commerce) sur le web.

Pour simplifier ce point, il faut se dire que le prix que l’on va payer pour son hébergement n’est qu’un investissement pour avoir de meilleures performances. Des performances qui vous permettront d’optimiser votre site et par conséquent votre référencement naturel.

Digidop vous offre la possibilité d’avoir un site rapide et sécurisé grâce au logiciel de création Webflow qui comprend l’hébergeur Amazon AWS.

5 - Les autres "petites" optimisations possibles

Si vous utilisez le CMS Wordpress pour votre site, il y a des étapes supplémentaires par rapport à Webflow pour améliorer la vitesse de vos pages web.

Réduisez le temps de chargement de votre code grâce à la compression Gzip

Installez un plugin pour activer la compression Gzip : Cela permet de réduire le temps de chargement des codes HTML, CSS et Javascript de votre site.

Réduisez le nombre de ressources de votre site à charger (mise en cache)

Installez un plugin pour la mise en cache des ressources : Cela aura pour effet de réduire le nombre de ressources à charger sur les pages du site.

Pensez à la vitesse de votre site sur mobile

Utilisez un template responsive pour votre site : le temps de chargement est aussi important voir plus sur mobile que sur ordinateur pour Google.

⚠️ Attention à l'adaptation des images de votre site internet sur mobiles !

Agencez le code de votre site

Priorisez les éléments du code pour afficher en haut de page le contenu le plus important (Surtout pour le chargement de la page d’accueil qui peut être lent). Grâce à cette manipulation technique, votre site affichera en premier lieu, les éléments qui doivent être vu en premier par les internautes.

⚠️ Attention : utiliser trop de plugins peut ralentir la vitesse du site

Pour éviter ce désagrément de Wordpress (avoir une multitude de plugins à ne plus en savoir où donner de la tête), nous vous recommandons d'utiliser la plateforme nocode Webflow. Grâce à Webflow, vous pouvez construire des sites sans limite et sans une ligne de code. Avec son CMS et son interface complétement modulable, vous pourrez créer un site web à votre image très rapide et donc optimisé SEO.

Voilà ! Vous savez maintenant comment améliorer le temps de chargement de vos pages. Une page web qui va vite permet d’avoir un meilleur taux de conversion. Votre audience et les moteurs de recherche vous remercieront grandement. Maintenant que cette partie est faite, il ne vous reste plus qu’à mettre en place une stratégie de référencement SEO pour vous positionner sur des requêtes et des mots-clés pour atteindre les premières positions avec votre site.

Sinon, notre agence web nocode peut aussi vous simplifier la vie grâce à son expertise dans le référencement naturel pour booster votre visibilité en ligne 🚀

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop