Comment booster le temps de chargement de votre site ?

La rapidité et les performances d’un site web sont essentielles pour le référencement naturel et l’expérience utilisateur. Si le temps de chargement d’un site s’avère trop long, vous perdrez des utilisateurs et des clients potentiels. C’est pour cela qu’il ne faut pas négliger l’optimisation de votre site.

Pourquoi améliorer le temps de chargement ?

L’importance du temps de chargement

Le temps de chargement d’une page définit le temps en secondes que met une page web avant de s’afficher. Cette donnée est importante à prendre en compte lors de la mise en ligne d’un site. 

En effet, la vitesse de chargement est déterminante pour la vie d’un site web. La rapidité est le signe que votre site est en parfaite santé. C’est également une garantie de sécurité et de sérieux pour les utilisateurs.

Quelques statistiques

Selon les données de Dareboost, outil d’analyse de site web, voici quelques statistiques des retombées sur le temps de chargement d’un site : 

➡️ Taux de rebond : un site qui met plus de 5 secondes à se charger a un taux de rebond 2 fois plus élevé qu’un site qui met 1 seconde. 

➡️ Taux de conversion : 1 seule seconde de chargement de plus peut faire perdre jusqu’à 7% du taux de conversion. 

➡️ Abandon du panier : 20% des clients abandonnent leur panier à cause du temps de chargement. 67% des acheteurs en ligne déclarent que la lenteur d’un site est la raison principale d’abandon d’un panier.

➡️ Panier moyen : un site web qui parvient à diviser son temps de chargement de 50% voit son panier moyen augmenter de 11%.

L’impact sur le référencement naturel

Depuis quelques années, Google prend en compte la vitesse de chargement d’un site dans le référencement SEO. Il va favoriser les pages web les plus rapides et va pénaliser celles qui prennent du temps à s’afficher. 

Comment ? En réduisant leur positionnement dans le classement des résultats de recherche. 

Un site trop lent peut se voir attribuer le label Red Slow Label : un indicatif inscrit “slow” de couleur rouge vif, visible lors d’une recherche Google. Celui-ci est visible sur les recherches effectuées sur mobile pour prévenir les utilisateurs de la lenteur d’un site.  

En effet, les utilisateurs veulent avoir un accès rapide à une information, un service ou un produit.

Comment Google mesure la performance d’un site ?

C’est grâce à ses robots d’indexation, aussi appelés crawlers, que Google parvient à définir la performance d’un site. Il utilise également les remontées des statistiques de la Search Console et de Google Analytics. De plus, les crawlers de Google passent un temps défini sur chaque site. Si un site met trop de temps à répondre, les robots d’indexation n’aura pas le temps d’explorer son entièreté.

Quelle est la vitesse de chargement recommandé ?

La vitesse standard de chargement se trouve entre 300 et 500ms. La vitesse est excellente quand elle est de 100 à 200ms. Par contre, si la page web met plus de 600ms à se charger, elle est considérée comme un peu lente et doit être optimisée.

Comment améliorer le temps de chargement ?

Un hébergement adapté

Afin d’améliorer la vitesse de chargement d’un site web qui est trop lent, la première action à effectuer est de se tourner vers un hébergement plus performant. Il est nécessaire d’adapter votre hébergement au trafic de vos pages. 

Le choix n’est pas simple et il en existe à tous les prix. Lors de votre choix, il est important de faire attention si c’est : 

➡️ un serveur dédié qui ne contiendra qu’un site web. C’est la solution idéale si un site reçoit un fort trafic ou s’il contient de nombreux fichiers. 

➡️ un serveur mutualisé qui est partagé avec d’autres sites. Il faudra donc un site de petite taille avec peu de trafic.

L’optimisation des images

Les images doivent être prises en compte puisqu’elles impactent fortement le poids et la taille d’une page. La limite de référence des images doit être de moins de 100 kilo-octets. Au-dessus de ce poids, les images peuvent affecter considérablement le temps de chargement d’une page. 

Afin d’obtenir un site web très performant, la première étape est le téléchargement d’images optimisées et conviviales pour le web. Pour ce faire, il vous faudra trouver le bon compromis entre la taille et la qualité de l’image grâce à ces éléments : 

➡️ Vous devez choisir le bon format pour avoir des images plus claires. Quelques recommandations concernant les formats : 

-  JPG : meilleur format pour les captures d’écran et les photos

-  GIF :  format standard des animations

-  PNG : parfait pour les images très détaillées, transparentes et aux logos 

-  SVG : utilisé parfois pour les logos et arrières-plans

➡️ La mise à l’échelle est importante. Il faut essayer de garder une taille d’image proche d’un écran d’ordinateur portable. La mauvaise pratique est de télécharger une image beaucoup plus grande pour la redimensionner si besoin. 

➡️ Plus il y a d’images sur une page, plus celles-ci doivent être réduites. Elles seront ajoutées au contenu qu’un navigateur doit télécharger et afficher. Une étude a montré que 70% des pages pesaient plus de 1Mo et 36% plus de 2Mo, en raison d’images trop volumineuses. 

➡️ Une bonne compression de l’image la rendra plus légère pour le web. Les images à haute résolution, avec une densité de pixels élevée (c’est-à-dire supérieure à 300ppi), ne seront pas bien affichées sur un écran HD standard.

Le poids du fichier de code

Il est nécessaire de garder à l’esprit que votre code prend une place importante dans le temps de chargement de votre site web. En effet, avant d’afficher une page web, le navigateur a besoin d’analyser celle-ci en format texte, et donc de parcourir le code. Plus le code est long, plus la page prendra du temps à se charger. 

Vous devez donc faire attention au poids de votre code de façon à réduire le temps de chargement des pages d’un site web. Pour minimiser le code, il est possible d’éliminer les sauts de ligne, les espaces ou encore les séparateurs insérés par un développeur pour relire son code plus facilement et garder une bonne compréhension pour un autre développeur.

Le nombre de plugins

Sur des plateformes comme WordPress ou Shopify, de nombreux plugins sont disponibles et il peut être très tentant d’en utiliser plusieurs. 

Néanmoins, un plugin prend beaucoup de place dans le code, et par conséquent, il est amené à ralentir le temps de chargement d’une page. Faites attention en installant vos plugins.

Les requêtes HTTP et les redirections

Un site web est composé de nombreux éléments qui ne sont pas toujours visibles pour les utilisateurs. Chaque élément nécessite une requête HTML, c’est-à-dire une lecture, qui accentue le temps de chargement d’une page. Certains de ces éléments sont invisibles et  inutiles en termes d’expérience utilisateur. 

Il est donc utile de les supprimer pour réduire le nombre de requêtes et par conséquent le temps de chargement. Pour le faire, il vous faut inspecter une page web et vérifier chaque fichier pour voir si vous en avez besoin ou non. 

Hiérarchiser aussi le contenu à charger.  Vous avez la possibilité d’utiliser le conditionnel dans votre code de façon à ne charger que les éléments demandés par un utilisateur. C’est ce qu’on appelle le lazy loading. Par exemple, il n’est pas nécessaire de charger le contenu en bas de page si l’utilisateur ne scrolle pas. Un plugin est dédié au lazy loading.

Javascript et le CSS

Quand les utilisateurs chargent votre page web pour la première fois, le navigateur met en cache des ressources externes comme les fichiers CSS et JavaScript. Au lieu d’intégrer vos fichiers CSS et JavaScript, il est recommandé de les placer dans ces fichiers externes. 

L’usage de CSS inline accentue le temps de chargement d’une page. En définissant tout dans votre fichier CSS principal, cela permet au navigateur de faire moins de travail au moment du rendu de la page puisqu’il connaît déjà les règles à appliquer. 

L’utilisation de fichiers CSS et Javascript externes simplifie la maintenance du site. En effet, cela vous permettra de gérer des fichiers globaux à la place d’un code éparpillé dans différentes pages du site web.

Les backlinks

Ce sont les liens hypertextes présents sur une page web. Lorsque ces liens sont cassés, ils consomment inutilement de la bande passante. Les backlinks ralentissent la vitesse de chargement d’une page et influent sur l’expérience utilisateur. Les utilisateurs auront tendance à partir d’un site s’ils tombent sur un lien cassé. 

L’identification de liens cassés est possible grâce à ces outils : 

➡️ Google Search Console : donne l’accès aux performances, à installer d’abord sur le site

➡️ Screaming Frog : logiciel à télécharger avec une version gratuite limitée

➡️ Broken Link Checker : un outil gratuit en ligne

Comment tester la vitesse d’un site ?

La vitesse de chargement d’une page est déterminée par une série de facteurs vus précédemment. Que ce soit pour tester la vitesse d’un site sur mobile ou sur ordinateur, de nombreux outils existent.

Google PageSpeed Insights

Développé par Google, l’outil gratuit PageSpeed Insights analyse les performances d’un site web selon son temps de chargement, son taux de conversion ainsi que son taux de rebond. 

Après analyse, PageSpeed Insights détermine un score de vitesse et l’ensemble des actions à mettre en place pour l’améliorer.

Web.dev

Nouvel outil proposé par Google, Web.dev est destiné à venir en aide aux développeurs. Il propose une synthèse complète sur la performance d’un site, sa vitesse de chargement, son SEO, l’accessibilité ou encore l’expérience utilisateur.

Octopulse

L’outil Octopulse est d’une grande aide pour ceux qui peinent à booster leur référencement. Il guide les utilisateurs dans les démarches pour augmenter le trafic et optimiser le positionnement de l’audit SEO à l’analyse concurrentielle. 

Grâce à ces éléments, le temps de chargement d’un site pourra être amélioré.

Test my Site par Google

Troisième outil de cette liste proposé par Google : Test My Site. Cet outil est spécifique car il permet uniquement de mesurer la vitesse de chargement d’un site sur mobile. 

Facile d’utilisation, il donne l’accès à un rapport complet sur les problèmes et atouts de la visualisation d’un site et de son chargement.

GTmetrix

L’outil GTmetrix est gratuit et conçu pour les débutants ! Il sert à vérifier la qualité de chargement d’un site. 

Il permet d’accéder à l’ensemble des options comme le calcul de la moyenne des résultats sur Yahoo et Google Page Speed.

Uptrends

Cet outil permet de rechercher selon plusieurs critères : lieu de navigation, ordinateur/mobile ou encore type de navigateurs web. Uptrends propose une analyse de l'ensemble des éléments présents sur une page ou sur un site web. 

Ces résultats sont pertinents pour les développeurs web.

Contactez dès-maintenant notre agence web Kwantic pour nous partager votre projet !