Optimiser la vitesse de chargement : un élément essentiel en SEO

Lorsqu’une page d’un site met du temps à charger, cela perturbe la navigation de l’utilisateur qui préférera peut-être aller autre part pour trouver les informations dont il a besoin. De plus, la rapidité d’un site, notamment sur mobile, est quelque chose que Google juge très important et il vous pénalisera au niveau de votre référencement si la vitesse de vôtres site n’est pas optimale. Dans cet article, vous découvrez pourquoi, mais aussi de quelle manière améliorer la vitesse de charger de votre site-web afin de vous assurer le meilleur référencement possible et un site “SEO-friendly.“

Pourquoi est-il nécessaire d’accélérer la vitesse de chargement des pages ?

D’un point de vue SEO

D’une part, la vitesse de chargement d’un site web est un des facteurs de référencement par les robots de Google, plus votre site est performant plus cela aura un impact positif sur votre référencement. A une époque ou les commandes vocales représente 1⁄3 des recherches sur le web, on ne prend même plus le temps de taper nos recherches. Les moteurs de recherche ont donc besoin d’avoir une réponse la plus instantanée possible. On estime qu’un site avec un temps de chargement standard est capable de charger une page dans un temps compris entre 300 ms et 500 ms. Le nombre de recherches sur mobile ne cessent de croître, les mobiles n’ayant pas la même puissance qu’un ordinateur, il est nécessaire d’optimiser les temps de chargements des pages web.

D’un point de vue utilisateur

D’autre part, il est très frustrant pour un utilisateur de naviguer sur un site web qui a du mal à charger. On estime qu’un utilisateur n’attendra jamais plus de 3 secondes.

En réalité, si cela prend plus de 600ms le temps de chargement est trop long. Il préférera fermer l’onglet et aller chercher l’information autre part.

Comment établir un diagnostic de votre site web ?

Avant de vouloir améliorer le temps de chargement de votre site web, il faut bien entendu réaliser un état des lieux de votre site web.

Keyweo a sélectionné 3 outils qui peuvent vous permettre d’analyser la vitesse de chargement d’une page. Le résultat obtenu déterminera si votre site nécessite de plus amples optimisations ou s’il est suffisamment rapide. Pour un analyse plus poussée, je vous invite à consulter cet article

Pour cela il existe plusieurs outils disponibles sur Internet. Le premier outil à utiliser est celui proposé par Google lui-même.

Google Pagespeed Insights

Cet outil est très simple d’utilisation et est capable d’estimer le temps de chargement sur la version desktop et mobile de votre site. Attention, les résultats sont différents en fonction du support. Un site peut être très bien optimisé sur desktop et être lent sur mobile.

Vous n’avez qu’à coller l’URL de la page que vous souhaitez analyser dans l’espace dédié. En moins d’une minute, vous obtiendrez un rapport détaillé des points à améliorer sur votre page. Google vous donnera aussi un score entre 1 et 100, si votre site obtient un score compris entre 90 et 100, on estime que c’est un bon score et que le site web est efficace. À vous désormais d’analyser le rapport de Google et de prendre les décisions qui s’imposent pour maximiser vos chances d’être bien positionné.

GTmetrix

GTmetrix fonctionne de la même façon que l’outil proposé par Google. Vous collez l’URL de la page à tester et l’outil s’occupe de lui accorder une note et un diagnostic en quelques secondes.

GTmetrix est en revanche plus visuel et plus intuitif que Google Pagespeed Insight pour les utilisateurs. De plus, les actions à effectuer pour optimiser le temps de chargement de votre page sont hiérarchisées par ordre de priorité. Concernant les aspects techniques à améliorer, GTmetrix procure une analyse plus complète et approfondie pour vous aider à cibler les opportunités d’optimisation.

Pingdom Tools

Ensuite l’utilisation de Pingdom Tools complètera votre expertise.

Ce logiciel sert globalement à la même chose mais il est intéressant de comparer les résultats entre les deux tests.

Pingdom Tool vous présentera 4 critères principaux :

1. Le poids des pages
2. Le temps de chargement
3. Le nombre de requête lors du chargement de la page
4. Un indice de performance

De même que l’outil de Google, Pingdom Tool vous propose des axes d’améliorations pour votre site web, il vous donne aussi les codes de réponse.

Bien que très similaires, ces trois outils vous permettent d’obtenir différents points de vues sur votre site web. C’est ensuite à vous de corréler les résultats et de choisir les meilleurs axes d’amélioration.

Maintenant que nous savons dans quel état se trouve votre site web nous allons vous donner une liste d’astuces afin d’optimiser le temps de chargement de votre page web.

Nos conseils pour accélérer le temps de chargement de vos pages web

 Du côté de votre serveur

• Choisir un hébergeur performant.

Il existe énormément d’hébergeurs web sur le marché et à tous les prix. Il existe deux types de serveurs : dédiés et mutualisés.

Les serveurs mutualisés sont en principe moins efficaces. Comme son nom l’indique, les serveurs sont partagés par plusieurs sites ce qui peut ralentir les performances du vôtre si trop de connexions s’effectuent sur les autres sites du serveurs. Préférez un serveur dédié uniquement à votre site.

• Utiliser un CDN (réseau de diffusion de contenu)

Un CDN est en fait un système de mise en relation du contenu. Des ordinateurs sont reliés en réseaux à travers internet et agissent en quelque sorte comme des miroirs pour refléter le contenu d’un site déposé sur un serveur afin d’améliorer les performances du mécanisme de transmission/livraison du contenu.

Cela se traduit par la réduction des coûts de la bande passante ainsi qu’une amélioration de l’expérience utilisateur.

•  Utiliser un préchargement DNS

Le DNS est ce qui permet d’apporter du trafic sur un nom de domaine. C’est lui qui traduit votre recherche ”www.keyweo.com” en langage informatique qui permet à tous les ordinateurs d’être interconnectés et de se comprendre. Il fera en sorte que vous vous connectiez à tel ou tel nom de domaine et fait le lien avec le serveur sur lequel il est hébergé.

Il est possible de précharger le DNS (en le gardant en cache durant un laps de temps prédéfinie) afin que la réponse à la requête soit plus rapide.

• Utiliser des plateformes externes de stockage pour ne pas surcharger le serveur

Afin d’optimiser le chargement de vos pages nous vous conseillons d’héberger les contenus lourds sur des plateformes de stockage indépendantes de votre site web.

Par exemple, si vous voulez présenter du contenu vidéo, préférez mettre ce contenu sur des plateformes comme Youtube etc..

Et intégrez le lien à votre page, la vidéo étant hébergée sur des serveurs externes aux vôtres cela allégera le poids de votre page.

Du côté de votre site web

•  Limiter l’utilisation de Widget et Pluggin

Il est vrai que les Widget sont élégants et rendent un site plus attirant. Cependant, ils sont aussi régulièrement longs à charger à cause de leurs poids. Concentrez vous uniquement sur les Widget essentiels.

•  Minimiser l’ensemble des fichiers (nous vous donnons des outils pour cela plus bas dans l’article)

Plus le contenu de votre site est allégé, plus votre page chargera rapidement. Il est donc très important de réduire au maximum la charge de tous les fichiers présents sur votre site web.

• Réduire le code HTML/CSS

Pour vous afficher une page web, le navigateur a besoin de lire la version de votre page en code afin de vous l’afficher correctement par la suite.

Plus le code est court à déchiffrer par le navigateur plus la réponse sera rapide

• Minimiser les requêtes HTTP et apporter des priorités à votre contenu

Chaque ligne de code qui devra être lu augmentera le temps de chargement de votre page. Or, il n’est pas forcément utile de faire charger l’ensemble de votre page si l’utilisateur n’utilise qu’une partie de celle-ci.

Par exemple, il n’est pas intéressant de charger un menu déroulant tant que l’utilisateur n’a pas cliqué dessus.

Il existe différents plugins pour gérer cela en fonction du logiciel que vous utilisez.

On appelle cela le “lazy loading”, vous n’avez qu’à taper cela suivit du nom du logiciel que vous utilisez pour retrouver ces plugins sur le net.

•  Réduire le contenu Javascript et css

Certaines ressources peuvent être longues à charger car le navigateur aura besoin de les télécharger pendant le chargement de la page ce qui peut s’avérer long.

Éliminer ces ressources qui peuvent être trop longues à télécharger.

Pensez à utiliser les lignes de flottaisons afin de hiérarchiser votre contenu.

 Voici différents outils qui peuvent vous permettre d’améliorer votre vitesse de chargement.

Il existe de nombreux outils pour réduire le poids des fichiers présents sur vos pages web. Ici nous allons vous présenter 6 outils qui vous permettront d’améliorer un maximum le temps de chargement de vos pages. 3 de ces outils ont pour but direct d’accélérer ce temps de latence. Les 3 autres ont pour but de réduire le plus possible le poids des photos. Nous avons remarqué que beaucoup de nos clients avaient déjà relevé ce genre de problème sur leur site mais ne savaient pas y remédier.

 3 outils pour accélérer un site

L’utilisation de ces outils requiert de bonnes compétences en informatique, nous vous conseillons de vous rapprocher d’une agence SEO pour réaliser ce genre d’amélioration. Ne tentez rien si vous jugez ne pas avoir les capacités nécessaires, cela risque d’endommager le fonctionnement de votre site web .

Gzip

Ce programme permet de compresser les fichiers avant leur transit sur le web, puis le navigateur va les décompresser au moment d’afficher la page. Le fait de compresser les fichiers permet d’augmenter les performances de votre site ainsi que de faire des économies de bande passante.

Gzip est reconnu par l’ensemble des navigateurs.

Retrouvez le lien pour accéder au programme Gzip ici

 web.dev

Proposé par Google, cet outil est à la base conçu pour les développeurs web, il sert à se former mais aussi à étudier son site comme une étude de cas. L’avantage de cet outil contrairement au “Google Pagespeed Insights“est qu’il vous propose des articles pour pouvoir améliorer les points qui posent problème sur votre site. web.dev detaillera l’analyse en 4 partie : 1 Performance; 2 Accessibility; 3 Best practices; 4 SEO

Nous vous conseillons de vous rendre sur cette page plusieurs fois par an et de veiller à rester dans le vert. Du fait des mises à jour de l’algorithme Google qui peuvent impacter vos résultats.

Retrouvez le lien pour accéder à Google web.dev ici

WP rocket

WP rocket permet d’appliquer la compression des fichiers grâce à Gzip et d’améliorer la vitesse d’un site WordPress. Il sert exactement les mêmes avantages que Gzip et mentionné précédemment.

Pour pouvoir utiliser WP rocket il faut que vous vous assuriez de deux conditions :

1. Le serveur sur lequel est hébergé votre site doit avoir la fonction gzencode disponible en php.
2. mod_deflate doit être activé sur le serveur. Rapprochez vous de votre hébergeur si vous ne connaissez pas la réponse.
3. Les règles nécessaires sont placées dans le fichier de configuration de votre serveur .htaccess, situé à la racine de votre site.

Retrouvez le lien pour accéder à WP rocket ici

 3 outils pour optimiser vos photos

Une grande majorité de personnes détectent ce problème lorsqu’elles auditent les performances SEO d’un site.  Dans la plupart des cas, elles ne savent malheureusement pas comment le résoudre. En outre, l’optimisation des images via leurs compressions est généralement associée à une perte de qualité. Il existe pourtant des outils gratuits en ligne qui permettent de réduire nettement le poids des images sans que ce soit perceptible à l’œil nu.

Dans cet article, nous allons comparer 3 outils gratuits d’optimisation d’images et confronter leur efficacité. Pour établir ce test comparatif, nous allons utiliser l’image suivante. Son poids original s’élève à 499 Ko et sa taille est de 1920 x 1268 px.

	TinyPNG	Squoosh	Compressor.io
UX/UI	Rapide et intuitif	Très visuel. Possibilité d’avoir un avant-après	Très visuel. Possibilité d’avoir un avant-après
Formats acceptés	JPG / PNG	JPG / PNG / Mozjpg / WebP	JPG / PNG / GIF / SVG
Téléchargement des fichiers	Jusqu’à 20 fichiers en même temps	Un par un	Un par un
Poids maximum	5MB	Jusqu’à 10MB -Accepte plus lourd mais la page se bloque-	10MB
Enregistrement	Sur votre ordinateur Sur Dropbox	Sur votre ordinateur	Sur votre ordinateur Sur Dropbox
Choix de la qualité	Impossible	Possible	Impossible
Besoin de connexion	Oui	Non	Oui
Changer la taille	Impossible	Possible	Impossible
Développeur	API	Google	Stephane.Ly
Taille affectée ?	Non	Non	Non
Optimisation	57%	56%	39%
Poids final	178,3 KB	184KB	253 KB
Qualité	La qualité de la photo n’a pas été affectée par la transformation. En revanche, son poids occupe moins de la moitié de ce qu’il occupait avant la compression. On peut voir que la texture du plumage du flamant rose est inchangée et contient toujours autant de détails. Les couleurs non plus n’ont pas été transformées lors de l’optimisation. Nous pouvons en conclure que TinyPNG n’interfère pas sur la qualité des photos, les changements apportés étant imperceptibles à l’œil nu.	Avec Squoosh, on constate que les détails dans la texture du plumage sont moins visibles que dans la photo originale. La tête et le bec en revanche conservent à peu de choses près la même qualité. Les couleurs sont également les mêmes après transformation. Le plus de cet outil est qu’il nous permet de varier la réduction du poids de l’image.	Compressor.io est l’outil qui préserve le mieux la qualité de l’image originale. On peut difficilement percevoir les changements. La photo est extrêmement similaire à l’originale. Elle préserve tous les détails et la texture du plumage du flamant rose

• Image TinyPNG

• Image Squoosh

• Image Compressor.io

En conclusion…

Chaque outil a pu considérablement réduire le poids de l’image originale. TinyPNG et Squoosh ont notamment atteint plus de 55% d’optimisation et Compressor.io quant à lui un peu moins, 39%. Toutes les images ont conservé leur qualité et leurs couleurs et même si c’est Compressor qui se démarque sur ce point, Squoosh effectue également une belle performance. Nous avons d’ailleurs pu voir que la texture de l’image y est meilleure que dans la version de TinyPNG.

Optimiser ses images est l’un des aspects majeurs des bonnes pratiques SEO et de l’élaboration d’un contenu adapté aux critères de référencement des moteurs de recherche. Bien réduites, les images pourront améliorer le temps de chargement d’une page et ainsi satisfaire autant les internautes que Google.

Optimiser les temps de chargements n’est qu’un des nombreux points à prendre en compte pour un bon référencement naturel. Pour plus de conseils, n’hésitez pas à consulter les autres articles SEO de notre blog.