Tricorn
06 43 81 70 33
Rechercher un article
Catégories
Conception
Prix
SEO
Sandwich
Polénisation

Accélérer son site web : le guide complet

seo
10%. C'est la proportion de clients que vous perdez pour chaque seconde supplémentaire de chargement pour accéder à votre page. Plus de 75% des sites dans le monde ne chargent pas assez vite selon les internautes, et c'est probablement le cas du vôtre. Apprenez à résoudre les problème de vitesse de votre site par vous-même avec ce guide.

Avoir son propre site web est aujourd'hui quasiment obligatoire pour pouvoir espérer se faire une place sur internet. Mais avoir un site ne signifie pas forcément que des internautes viendront le consulter. En effet, tous les sites web ne se valent pas, et Google a tendance à laisser de côté ceux qui sont les moins performants pour mettre en avant ceux qui offrent une expérience de navigation plus agréable à l'utilisateur.

Vous l'aurez compris, si vous souhaitez que l'on vous remarque, vous devez absolument faire en sorte que l'on puisse accéder rapidement à votre site et à toutes ses pages. Mais si vous souhaitez vraiment surpasser vos concurrents, quelques petits changements ne suffiront pas à vous élever au dessus de la masse; vous devrez souvent modifier votre site en profondeur. Aussi, dans cet article accessible aux débutants, plutôt que de nous concentrer uniquement sur quelques points, nous allons passer en revue l'ensemble des éléments susceptibles de vous ralentir et comment y pallier.

Si votre site fonctionne avec WordPress, cet article présente également une sélection des meilleurs plugin à utiliser pour accélérer votre site.

Introduction : comment analyser la vitesse de son site

Avant de voir comment résoudre vos problèmes, il faut d'abord connaître l'état de votre site. pour cela, on va utiliser l'outil Page Speed Insight de Google, qui vous permettra de connaître toutes les informations importantes concernant les performances de votre page cible. Vous pouvez également utiliser Page Speed Test qui vous permettra d'analyser l'ensemble des pages de votre site, ainsi que GT Metrix, un outil similaire à celui de Google qui pourra vous donner quelques précisions supplémentaires pour compléter votre analyse.

Ces trois outils vous permettront de visualiser les points qui posent problèmes. Ici, on va s'intéresser à 4 métriques directement liées à la vitesse d'affichage.

  1. Le First Contentful Paint (FCP), qui calcule le temps nécessaire pour afficher un premier visuel de la page.

  2. Le Largest Contentful Paint (LCP), qui calcule le temps nécessaire pour afficher le contenu principal de la page. Toute les ressources de la page peuvent ne pas être encore présente, mais l’utilisateur va généralement considérer que la page est chargée.

  3. Le Time To Interactive (TTI), qui calcule le temps nécessaire pour interagir avec la page (par exemple les boutons). Une page qui semble être chargée pour l’utilisateur mais avec laquelle il n’est pas encore possible d’interagir est frustrant et affecte l’expérience utilisateur.

  4. Le Total Blocking Time (TBT), qui vérifie si des actions bloquant le chargement de la page s'effectuent sur votre site.

Ces trois métriques sont capitales, mais il en existe bien d'autres qui peuvent influer sur le positionnement de votre site. Pour connaître les autres éléments susceptibles d'influer sur votre score, consultez cet article.

page speed insight tricorn
Test de Page Speed Insight avec notre site

Pour Page Speed Insight, trois couleurs sont associées à vos résultats :

  • Vert : Satisfaisant, rien à améliorer
  • Jaune : Pas alarmant, mais il est possible de faire des progrès
  • Rouge : Mauvais, risque d'handicaper le positionnement de votre site.

Vous obtenez également un score sur 100 vous permettant d'évaluer votre performance globale :

  • + de 90 : Parfait, ou presque. Votre page est opérationnelle pour se positionner sur les moteurs de recherche.
  • 70-90 : Passable. Votre page est à peu près convenable, mais il y a moyen de faire mieux.
  • 50-70 : Médiocre. Il est probable que l'état de votre page vous fasse perdre des clients.
  • - de 50 : Mauvais. Vous devez absolument redresser la barre.

Si les quatre métriques vues dans cet article sont bonnes, mais que d'autres influent négativement sur votre score, cliquez ici.

Vous devez donc viser le meilleur score possible pour chaque page. Sachez néanmoins qu'il est inutile de chercher à tout prix la perfection. Obtenir la note de 100 est certes satisfaisant pour l'ego, mais ne signifie pas forcément que votre page est parfaite. En effet, aussi puissant soit-il, aucun outil d'analyse n'est parfait, car il ne prend pas en compte tout les aspects de votre site. Vous ne serez donc pas forcément mieux classé dans les résultats de recherche juste parce que votre page dépasse de 2 points le score d'un concurrent.

N'hésitez pas à utiliser ces outils pour analyser les scores de vos plus proches concurrents. Vous saurez ainsi quel score atteindre pour être plus performant qu'eux !

La version mobile : le mode hardcore de l'optimisation

Votre site a un bon score dans sa version bureautique, mais obtient un score médiocre dans sa version mobile ? Ne vous inquiétez pas, c'est parfaitement normal. Il est beaucoup plus difficile d'optimiser parfaitement une page pour les mobiles. C'est un problème que connaît tout créateur de site, à tel point qu'il est très rare de trouver un site web fonctionnant parfaitement sur tous les formats. Vous aurez donc probablement un score plus faible, ce qui ne vous dispense évidemment pas d'optimiser également ce format. C'est en faisant mieux que les autres que vous pourrez obtenir de vrais résultats avec votre site.

Toutes les Actions à effectuer pour accélérer votre site

La Réduction du poids de votre page

tinywow 18483140 4000 2 03 4837534 1 1 2

La première chose à faire lorsque qu'on cherche à améliorer ses performances est de diminuer au maximum la quantité de chose à charger sur chaque page. On considère généralement qu'une page doit rester en dessous de 1MB pour pouvoir charger efficacement, 2MB étant le maximum. Ce chiffre peut être plus difficile à tenir pour la page d'accueil, qui comporte souvent beaucoup de contenus, mais vous devez garder cet objectif en tête.

Pour connaître le poids de votre page, entrez-là sur l'outil GT metrix, puis faites défilez la page jusqu'à l'onglet page details.

page details gt metrix 1
Exemple avec un extrait de la page d'accueil de Tricorn

Réduire le poids des images

C'est la première action à effectuer pour réduire le poids d'une page. Les images et les médias en général sont quasi-systématiquement les éléments qui pèsent le plus lourd dans votre site. Il faut donc réduire leur impact au maximum :

  • En utilisant le bon format d'image, notamment le Jpg ou le Webp
  • En redimensionnant l'image, c'est à dire en réduisant sa taille
  • En compressant l'image avec un outil de compression en ligne comme I Love Img.

On estime qu'une image pesant plus de 150kb n'est pas assez bien optimisée. Notez que cette estimation est une moyenne. Il est par exemple difficile de d'optimiser les photos de paysages ou qui comportent beaucoup de couleurs et d'élément, tandis que des images simple peuvent parfois être compressées jusqu'à atteindre moins de 50kb.

Pour en savoir plus sur comment réduire le poids de vos images, rendez-vous sur cet article.

Si vous utilisez WordPress, Voici quelques plugins recommandés :

Minifier le CSS et Le Javascript

Pour pouvoir afficher de belles mises en page et faire fonctionner tout les éléments à l'écran, votre page a besoin de beaucoup de lignes de codes, en particulier du CSS et du Javascript, qui peuvent rapidement alourdir votre page. La minification CSS consiste à supprimer tous les caractères qui sont inutiles pour afficher le contenu de votre page, comme les espaces, les commentaires, les lignes de codes réutilisées ...

La minification est particulièrement efficace pour les pages comportant beaucoup d'éléments, ou si vous avez utilisé un template pour construire votre site. Si vous souhaitez minifier votre code vous-même, vous pouvez utiliser Minifier. Gardez tout de même à l'esprit que votre code ne sera plus très lisible pas la suite.

Si vous utilisez WordPress, Voici quelques plugins recommandés :

(Avancé) Activer la compression Gzip

Si même après toutes les actions précédentes, vous cherchez encore à réduire le poids de votre page, vous pouvez activer la compression Gzip, qui consiste basiquement à minifier l'intégralité de votre code, y compris le code HTML. Cette action n'est cependant efficace que dans le cas où votre page comporte énormément d'éléments et qu'il vous est impossible d'obtenir un score suffisant même en appliquant toutes les bonnes pratiques.

La compression Gzip sur un site statique (sans CMS comme WordPress) est une opération particulièrement complexe, qui nécessite de bien connaître le fonctionnement d'un site web. Si vous souhaitez vous essayer à la compression, consultez cet article.

Si vous utilisez WordPress, Voici quelques plugins recommandés :

L'optimisation du temps de chargement

time charging

Utiliser la mise en cache

La mise en cache de son site est LE moyen simple et efficace d'améliorer presque "magiquement" les performances de votre site. Pour faire simple, cette action consiste à demander à votre site de sauvegarder une version temporaire du contenu de chaque page et de l'afficher avant que le navigateur en fasse la demande, ce qui diminue le temps de chargement de votre site. Pour en apprendre plus sur le fonctionnement de la mise en cache et son utilité, consultez notre article dédié.

Pour activer la mise en cache sur un site classique (sans CMS comme WordPress), vous aurez besoin de mettre les mains dans votre code. Cependant, la procédure est globalement assez simple. Consultez ce tutoriel pour apprendre comment activer vous-même la mise en cache.

Si vous utilisez WordPress, Voici quelques plugins recommandés :

  • WP Super Cache (gratuit)
  • WP Rocket (payant), un plugin prenant également en charge d'autres fonctionnalités.
  • Swift Performance (payant), moins cher que WP rocket et possédant également un grand nombre de fonctionnalités.

Charger le Javascript en différé

Lors du chargement de votre page, il est courant que du Javascript s'exécute avant que la page s'affiche, afin d'éviter que l'utilisateur voie une mise en page cassée jusqu'à son chargement complet. Mais lorsque le Javascript à charger s'accumule, cette action peut finir par bloquer le chargement du site (Métrique Total Blocking Time). Le chargement différé permet d'enlever le "render-blocking Javascript", qui bloque l'affichage de la page. Le code Javascript sera chargé après les ressources nécessaires, afin de ne pas ralentir le chargement de la page.

Cette action peut se montrer très efficace pour les mise en page complexe, mais attention, elle peut aussi parfois provoquer des bugs visuels durant le chargement, notamment si certains éléments dépendent directement du Javascript. Il est donc important de tester votre site au préalable.

Si vous n'êtes pas développeur, le chargement différé du Javascript n'est possible que sur un CMS comme WordPress.

Si vous utilisez WordPress, Voici quelques plugins recommandés :

  • WP Rocket (payant), un plugin prenant également en charge d'autres fonctionnalités.

Utiliser le Lazy Loading

La Lazy Loading fonctionne sur un principe très simple : ne charger que les médias qui arrivent dans le champ de vision de l'utilisateur, afin d'avoir à charger la totalité de la page. Cette technique évite d'avoir à charger les images qui ne sont pas consultée par l'utilisateur, et permet donc d'économiser un précieux temps.

Attention cependant : si l'utilisateur scrolle vite, il peut arriver que certaines images n'aient pas achevé leur chargement lorsque qu'elle arrivent dans son champ de vision, notamment pour les images lourdes. Cela peut être un problème dans certains cas.

Si vous n'êtes pas développeur, l'activation du Lazy Loading n'est possible que sur un CMS comme WordPress.

Si vous utilisez WordPress, Voici quelques plugins recommandés :

Utiliser un serveur plus performant

Même si votre site est parfaitement optimisé, il reste une problématique à laquelle vous devrez peut-être faire face : le temps de chargement de votre serveur. Un serveur performant mettra moins de temps pour fournir ses ressources, et permettra à votre site de charger plus vite. Inversement, un serveur trop faiblard risque de vous handicaper face à vos concurrents. Cela peut-être notamment le cas si vous avez souscrit à une offre d'hébergement trop limitée, et / ou si votre trafic doit faire face à un important trafic. Pour en savoir plus sur les différents types de serveur et quel hébergement privilégier pour votre site, consultez notre article dédié.

Il est possible de savoirs si votre serveur est trop lent à fournir les ressources de votre site. Pour cela, rendez-vous sur le site Bitcatcha et entrez l'url de votre site. Vous aurez ensuite les informations sur la vitesse de votre serveur.

Quelques autres actions à effectuer sur un site WordPress

Supprimer les plugins non utilisés

Un site WordPress, c'est comme un jeu de lego. Il est si simple d'installer de nouvelles extensions qu'on a tendance à en user et à en abuser; et même si WordPress est un CMS conçu pour s'adapter à des logiciels tiers, un nombre trop important de plugins finira par alourdir votre site et risque de conduire à d'énormes temps de chargement pour exécuter tout le code nécessaire. Pour éviter cette situation, prenez soin de supprimer tous les plugins dont vous n'avez pas besoin. Attention à ne pas juste les désactiver. En effet, un plugin désactivé continuera à peser sur votre site, en plus de risquer de causer une brèche de sécurité. Assurez-vous également de ne pas avoir plusieurs plugins effectuant la même tâche, afin d'éviter un gaspillage inutile de vos ressources.

Mettez à jour votre site et vos extensions

La qualité du code évolue en permanence, et il serait judicieux d'en faire profiter votre site. Au fil du temps, WordPress améliore son code source, et c'est également le cas pour la plupart des extensions du CMS. Il est donc important de s'assurer que votre site est toujours à jour, et qu'il ne fonctionne pas avec avec une antique version de WordPress.

wave (10)

Nos derniers articles

Pourquoi vous devez avoir votre site internet

Doit-on vraiment avoir son propre site web ? Si vous êtes commerçant, vous vous êtes peut-être déjà posé cette question. Cet article est là pour vous parler des avantages à créer son site internet, mais également des désavantages à ne pas le faire.

Oxygen Builder : Pourquoi il est meilleur qu'Elementor

Si vous choisissez de construire vous-même votre site sur WordPress en 2022, il y a de fortes chances que vous utilisiez Elementor ou que vous ayez envisagé de l'utiliser. Pourtant, même Elementor est de loin le plugin de page builder le plus utilisé aujourd'hui, il existe une opportunité qui pourrais être bien plus intéressante pour […]

Accélérer son site web : le guide complet

10%. C'est la proportion de clients que vous perdez pour chaque seconde supplémentaire de chargement pour accéder à votre page. Plus de 75% des sites dans le monde ne chargent pas assez vite selon les internautes, et c'est probablement le cas du vôtre. Apprenez à résoudre les problème de vitesse de votre site par vous-même avec ce guide.

Critères d'évaluation d'un site web : le guide ultime

Il n'est pas toujours évident de savoir ce qui fait la qualité d'un site web. De nombreux critères peuvent l'impacter positivement ou négativement. Cet article a pour objectif de vous permettre d'estimer facilement si votre site est suffisamment qualitatif aux yeux de Google.

hello world!
bonjour@tricorn.fr
472000 - Marmande
Contactez-nous
cross
Index
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram