Pourquoi la vitesse d’un site web est si importante ?
Toute agence web, professionnel du webmarketing ou référenceur vous le répètera à loisir : la vitesse d’un site internet est un critère très important qu’il convient de surveiller et d’optimiser constamment. En tant que consultant SEO ou agence de référencement naturel, on explique souvent aux clients que la vitesse de leur site est un critère pour Google.
Seulement c’est loin d’être la seule raison.
Faisons un point global pour bien comprendre pourquoi. Ce dossier est long mais se veut assez complet, et je vous donne une liste de 25 pistes d’amélioration.
Les attentes des utilisateurs
Un comportement qui reflète de notre société qui pousse à faire toujours plus, toujours plus vite : les internautes sont toujours plus impatients.
Au début de l’internet grand public et de sa démocratisation, l’accès à internet était très limité.
Je me rappelle mon premier modem : un 56 K !
56 kilobits par seconde, avec un forfait limité à 20h de connexion par mois.
Toute page était très longue à charger, on pouvait bien patienter 1 ou 2 minutes pour voir son contenu, et dans ces conditions on comprendrait encore aisément que les internautes ne se tourneraient que vers les sites les plus légers et rapides.
Aujourd’hui, nous avons l’internet haut débit, voire la fibre dans de plus en plus de territoires et des vitesses dépassant les 100 M par seconde.
La 4G et bientôt la 5G, des forfaits mobiles autorisant toujours plus de transferts de données…
Alors, si un site web met 2 secondes de plus à se charger, serait-ce si dramatique ?
Oui !
Les internautes veulent aller toujours plus vite et ne sont pas prêts à attendre, à être frustrés.
Si un site est trop lent à leur fournir l’information ou le service désiré, ils s’en vont.
De nombreux exemples et études
L’impact du temps de chargement d’un site sur le business d’une entreprise ne date pas d’hier, et a été mainte fois vérifié par de nombreuses études.
Parmi les exemples les plus célèbres et régulièrement cités, prenons le cas d’Amazon : le géant de l’e-commerce.
Dès 2006, soit bien avant qu’on entende tout ce remue-ménage dans le référencement naturel, Amazon publiait une étude sur des A/B tests réalisés.
Une augmentation du temps de chargement de 100 ms (millisecondes) signifiait une baisse des ventes de 1%.
Avec les volumes monstrueux de l’e-commerçant, un délai de 1 seconde signifierait une perte de 1.6 milliard par an.
Il en va de même pour d’autres géants.
Ainsi Walmart, la plus grande chaine de commerces aux Etats-Unis, indiquait qu’une amélioration de 1 seconde du temps de chargement se traduisait par une hausse de 2% de conversion.
Intuit indiquait dès 2013 qu’ils s’étaient efforcés de réduire leur temps de chargement des pages de 15 à 2 secondes.
Les résultats ?
- +3% de conversion pour chaque seconde gagnée entre 15 et 7 secondes de chargement
- +2% de conversion pour chaque seconde gagnée entre 7 et 5 secondes
- +1 de conversion pour chaque seconde entre 4 et 2
Akamai, autre géant mondial et solution de CDN (Content Delivery Network – pour rendre votre site plus rapide aux 4 coins du monde), partageait en 2017 une étude sur la vitesse des sites.
Il en ressortait notamment que pour 100 ms de temps de chargement additionnel, l’impact sur les conversions pouvait être de 7%.
Or j’ai déjà vu lors de mes audits SEO des sites web dont les pages se chargeant parfois en +10 ou même +20 secondes.
Imaginez toutes les ventes perdues…
Revenons au principal acteur qui peut nous intéresser : Google.
Le moteur de recherche partage depuis des années des études sur le temps de chargement des sites web et le comportement des utilisateurs.
Par exemple en 2017, une étude de Google montre que 53% des visiteurs sur mobile quittent un site s’il se charge en plus de 3 secondes.
Et là encore, le constat est sans appel.
Plus le temps de chargement augmente, plus la probabilité que vos visiteurs quittent le site augmente.
Vont-ils patienter gentiment pour revenir plus tard ? Peu probable : ils vont aller immédiatement sur un site concurrent.
Ne dit-on pas que le temps c’est de l’argent ?!
Quelques sources :
https://medium.com/@vikigreen/impact-of-slow-page-load-time-on-website-performance-40d5c9ce568a
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
La réaction des géants du web
Lorsqu’on est un géant du e-commerce qui réalise des millions ou milliards en ligne, fidéliser les clients et augmenter la conversion est une évidence : la seule en fait !
Et ils ne s’y trompent pas. Les considérations SEO viennent après, car le référencement est un moyen, non un objectif.
Le but : faire du chiffre d’affaires !
Google n’y échappe pas.
Rappelons que la firme de Mountain View est avant toute chose une régie publicitaire.
Si ses systèmes sont lents (le site de Google, les résultats de recherche, l’affichage des annonces…) les utilisateurs seraient déçus et pourraient se tourner vers d’autres moteurs.
Moins de trafic = moins de revenus publicitaires.
Il en va de même pour les sites proposés par le moteur de recherche.
Si Google vous proposait constamment des sites vieux, moches, non adaptés aux mobiles, ou très lents… mais pourquoi continuer à utiliser un moteur si mauvais ?
Mais ces géants du web ne peuvent du jour au lendemain imposer leur point de vue sur tout un écosystème.
Alors, progressivement, ils incitent les professionnels du web à être plus performants avec la méthode du bâton et de la carotte :
- si tu fais un super site, design, rapide, centré sur l’utilisateur… tu gagneras des points
- si tu fais un site moche, lent, pauvre en contenu… tu vas prendre cher
A ce jour, difficile d’avoir des outils et un acteur tiers qui jauge votre taux de conversion, de rétention de clients ou votre image de marque, et vous compare à vos concurrents.
Sauf… le géant Google, avec son incommensurable base de données sur tout et tout le monde.
Alors Google fait ce qu’il fait de mieux : il nous parle de SEO et de business.
Un site lent sera défavorisé en SEO, et on connait la suite : crainte de perdre du trafic, des positions, des ventes… ce message tout le monde peut l’entendre et peut désormais le mesurer.
L’impact en SEO
Dès 2010, Google a annoncé officiellement que le temps de chargement d’un site était pris en compte par ses algorithmes en référencement naturel.
Le moteur de recherche commençait à pénaliser les sites trop lents.
En 2015, Google est à l’origine d’un projet pour rendre le web plus rapide, l’AMP – Accelerated Mobile Pages.
En 2016, il annonce l’indexation « Mobile First » : la priorité est donnée aux mobiles (et version mobile ou responsive d’un site), car c’est là que sont et seront les internautes.
En juillet 2018, alors que le temps de chargement est déjà un facteur de positionnement sur ordinateur, Google annonce avec la « Speed Update » que le temps de chargement est désormais un facteur de positionnement sur mobile.
Et ce n’est pas parti pour s’arrêter.
Mais y a-t-il une relation entre sites bien positionnés et sites rapides ?
Une analyse menée par Neil Patel (marketeur américain très suivi) et Ahref (une solution d’analyse de site et notamment de backlinks), a porté sur 143 827 URLS et montrait en effet que les sites qui étaient dans le top 5 étaient plus rapides que les autres.
A partir de la 6ième position, les sites étaient 20% plus lents.
Ordonnées = temps de chargement
Abscisses = position dans les résultats de recherche
Source :
https://neilpatel.com/blog/does-speed-impact-rankings/
A noter qu’il faut tout de même prendre un peu de recul vis-à-vis de ce type d’analyse.
Les sites les mieux positionnés sont les plus rapides, OK.
Mais ce sont aussi souvent les plus populaires, les plus partagés, les plus alimentés…
Amazon n’a pas la même force de frappe ni la même capacité d’investissement que la petite PME du village voisin. Alors est-ce si étonnant que des gros sites ayant du budget soient en capacité d’avoir les sites les plus rapides ? Pas vraiment.
La visibilité sur les réseaux sociaux
En 2017, Facebook annonçait à son tour prendre en compte l’environnement d’utilisation du réseau pour améliorer l’expérience des utilisateurs.
Si vous êtes sur mobile, avec une connexion lente… alors Facebook va éviter de vous proposer des contenus lents, qui seraient déceptifs.
En clair, éditeurs et concepteurs de sites web : pour que votre site gagne en visibilité sur Facebook, il doit être mobile friendly et rapide !
Le badge pour les sites lents
Seulement, ce n’est toujours pas suffisant.
Pour preuve, on peut à nouveau citer l’étude de 2018 de Google :
70% des landing pages analysées sur mobile mettaient plus de 5 sec à se charger.
Alors, Google continue à sensibiliser le grand public et taper sur les doigts des mauvais élèves.
En novembre 2109, une annonce concernait le navigateur Chrome.
Au passage, il convient de rétablir un peu la vérité ici, car on voyait souvent indiquer que c’est tous les sites lents qui seraient punis et impactés en SEO.
Non, l’annonce concerne jusqu’à présent un « badge » (détails à confirmer au fil des annonces) sur le navigateur Chrome. Pas de pénalité SEO ici.
Cela pourrait prendre la forme d’une alerte avant même de charger le site, pour indiquer à l’internaute que le site est très lent. Ou un indicateur vert de chargement si le site est rapide.
Autrement dit, on insiste bien ici sur l’expérience client, la satisfaction.
Et si votre site est indiqué dans chrome comme un mauvais élève… bonjour l’image de marque !
Source :
https://blog.chromium.org/2019/11/moving-towards-faster-web.html
On parlait de SEO, on parlera de …
Depuis quelques années, la vitesse de chargement des sites internet est donc essentiellement abordée via une approche de référencement naturel.
Et pour cause : la culture SEO s’est répandue, est devenue assez populaire pour que tout le monde sache aujourd’hui à peu près de quoi on parle et prenne le sujet au sérieux.
C’est bien !
Quand j’ai débuté dans le web, à part véritablement les pros du trafic web, le SEO était une vague notion. Même en parler avec des intégrateurs, développeur ou marketeurs était confus.
Toutefois le temps de chargement n’est pas qu’une priorité SEO, c’est une priorité business.
Alors on entend de plus en plus cette notion abordée aussi en UX (User Expérience – l’expérience client).
Ou en growth hacking (j’adore, c’est trop à la mode) : on va hacker votre croissance en… améliorant la vitesse de votre site.
Si le référencement naturel ne vous a pas convaincu, peut-être que le growth hacking le fera.
Peut-être que demain, on parlera d’un nouveau terme marketing à la mode lié aux objets connectés et à la réalité augmentée ?
L’Ultra Fast Augmented Reality ? Le HFIoT – High Frequency Internet of Things ?
Bref, tout ça pour dire la même chose : un site et une interface rapide, c’est ce que veulent vos clients.
Depuis que le web existe. Parce que c’est qu’ils veulent partout ailleurs !
Qui aime attendre 15 min au bureau de Poste ? Patienter 1h à un guichet SNCF ? Faire la queue 3h à la préfecture ? Attendre 10 min à la caisse d’un supermarché ? …
Vos clients veulent des services simples et rapides.
Un site lent, et vous perdrez de l’argent. C’est aussi simple que ça.
Le temps de chargement d’un site impacte donc votre image de marque, votre fidélité client et votre chiffre d’affaires, soit le cœur de votre activité, la raison pour laquelle vous et vos collaborateurs allez travailler le matin.
Accepter d’avoir un site, surtout e-commerce, lent, c’est valider de perdre de l’argent avant même de commencer sa journée.
La performance web est avant tout une question de business et de croissance, surtout face à la concurrence. C’est pour cela que les gros e-commerçants sont si forts en webperf et investissent dans des solutions et réseaux performants.
Quelle vitesse faut-il viser concrètement ? Est-ce la priorité absolue ?
Plus votre site sera rapide, mieux ce sera !
Google recommande de rester sous la barre des 3 secondes pour afficher le contenu sur Mobile par exemple.
A partir de 5 ou 6 secondes, votre site est lent et vous perdrez beaucoup de visiteurs.
Au-delà de 6 secondes, il est vraiment temps de réagir !
Quant à savoir si cela doit être votre priorité absolue… je vous conseillerais plutôt de rester pragmatique.
Oui, indéniablement le temps de chargement est important.
Seulement, qui êtes-vous, quelle est votre situation et quel est votre marché ?
Un gros e-commerçant qui génère (ou veut générer) des millions : oui vous avez plutôt intérêt à mettre le paquet en optimisation, car à chaque seconde supplémentaire vous perdez des clients et de grosses quantités d’argent.
Vous avez un petit site e-commerce, un petit site vitrine, un blog… ?
Gagner 1 seconde, pour passer de 3 à 2 secondes par exemple, pourrait bien vous coûter plus que ça ne vous rapporterait : optimisation / refonte technique, changement de serveur, solutions tierces…
Si vous gagnez 2% de conversion, sur un trafic inférieur à 50 000 visites mensuelles, ça ne ferait même pas 1 000 visiteurs. Qui eux-mêmes ne convertiraient peut-être qu’à 1%…
Investissez plutôt dans d’autres optimisations.
Quelles sont les principales causes de lenteur d’un site internet ?
Il y a de très nombreux éléments qui impactent le temps de chargement.
Lorsque l’on se lance dans une démarche d’optimisation intense, la liste des points à travailler est très longue. J’en donne par la suite une bonne partie.
Mais globalement, on peut retenir 3 principaux facteurs à la lenteur d’un site.
- Les images
- Les scripts
- L’hébergement
Améliorer et optimiser véritablement ces 3 facteurs permettra à votre site de gagner à coup sûr en vitesse.
Comment mesurer la vitesse de son site ?
Il existe de nombreux critères à mesurer et plusieurs façons (dont beaucoup de mauvaises) de le faire.
Toutes les méthodes et tous les outils ne se valent pas.
Pour commencer de façon simple et résoudre la majorité des problèmes, vous pouvez heureusement compter sur des outils gratuits ou payants.
Les outils gratuits
Parmi les nombreux outils gratuits qui existent pour tester la vitesse de votre site, en voici 5 à connaître particulièrement.
- Pingdom Tools
L’outil Pingdom Tools est disponible en version gratuite et est très simple à utiliser.
Il vous donne un score (100 étant le maximum), affiche le poids de la page testée, le temps de chargement et le nombre de requête.
Un bon début.
Attention à bien utiliser un serveur au plus proche de votre situation géographique : le temps que les données parcourent une certaine distance se ressent dans les résultats.
Exemple sur le site efficienseo.com avec un test depuis Francfort en Allemagne, puis Washington aux Etats-Unis.
Depuis Francfort :
Depuis Washington :
600 ms de perdues uniquement à cause du serveur de contrôle !
- GTmetrix
Autre outil gratuit et fréquemment utilisé, GTmetrix.
Il va lui afficher un score PageSpeed, un score YSlow (outil de Yahoo), le temps nécessaire au chargement complet, la taille de la page et le nombre de requêtes.
L’outil va également lister les ressources problématiques, comme les images sont compressées ou les scripts qui se chargent trop tôt.
En revanche, je n’apprécie pas vraiment les notations de l’outil.
Il a une propension à dégrader sévèrement les notes pour des raisons parfois obscures, alors qu’il est sensé renvoyer aussi le score Page Speed.
J’ai par exemple vu des cas où la note était très dégradée (un joli F rouge global) à cause de 3 pauvres PNG de 12ko que GTmetrix recommandait de compresser à 10ko…
Et un service marketing ne sachant pas interpréter les résultats qui hurlait au scandale parce que le site était lent… Allez, on respire…
Un exemple ?
Prenons le site d’IKEA puisqu’il était parmi les plus rapides dans l’étude de 2018 vue précédemment.
Sur Page Speed en version desktop :
(A noter, c’est pas terrible comme résultat)
Sur GTmetrix :
Au moment du test, j’ai bien sûr comparé avec d’autres outils, qui rendaient un résultat similaire à Page Speed et non GTmetrix.
Donc oui, il est gratuit, il donne des pistes parfois très utiles… mais je m’en méfie.
- Webpagetest
Webpagetest est un autre outil gratuit très connu et utilisé.
Pour cause : il permet de tester différentes configurations de device et de localisation, il effectue plusieurs tests à la suite, affiche le waterfall, c’est-à-dire la cascade de téléchargement des ressources avec les points bloquants, donne le Speed Index…
Bref, franchement un outil assez complet !
En revanche son design n’est pas de toute jeunesse et la lecture des résultats pas forcément claire pour beaucoup de monde.
- Lighthouse
Directement embarqué dans les devtools de Google Chrome, Lighthouse permet d’effectuer un audit d’un site en simulant un PC ou un mobile, une connexion lente ou rapide…
Il présente différents indicateurs et pistes de résolutions concernant le temps de chargement, l’adaptabilité au mobile et l’ergonomie ou encore la capacité de vérifier si votre site supporte le Progressive Web App.
Pour l’utiliser :
- utilisez Chrome et rendez-vous sur votre site
- appuyez sur la touche F12
- allez sur l’onglet « audits », sélectionnez ce que vous voulez contrôler
- cliquez sur « Run audits »
A noter : je parle du PWA en fin d’article, mais c’est du développement avancé.
- Page Speed Insight
Enfin comment ne pas parler de cet autre outil mis à disposition par Google lui-même.
Page Speed Insight donne deux scores distincts, pour le desktop et le mobile.
Il va lister des ressources qui se chargent lentement, mais aussi donner des pistes d’optimisations pour le développement, telles que la façon de déclencher des scripts.
https://developers.google.com/speed/pagespeed/insights/
La limite de ces outils
Ces outils présentent toutefois certains défauts : géolocalisation du serveur de test, simulation ou non d’un navigateur / d’un type de connexion, granularité des facteurs testés…
- Localisation du serveur
Premier problème : le serveur depuis lequel les tests sont réalisés.
Pour des outils américains, les résultats en Europe sont forcément un peu plus mauvais, car les données doivent traverser l’Atlantique.
Et comme vu précédemment avec le cas de Pingdom Tools, ça peut réellement impacter vos résultats.
- Détail des points à corriger
Un autre souci fréquent est que si vous ne savez pas correctement interpréter ces résultats ils ne vous serviront souvent à rien.
Pour plusieurs outils, Pingdom Tool en tête, il s’agit au mieux d’une piste de travail.
En tant que dirigeant d’entreprise, directeur marketing qui ne gère pas le technique etc… Ok, vous avez un aperçu simplifié et un score.
Mais vous dire par exemple qu’il faut réduire le nombre de requêtes HTTP… ne vous dira pas sur quelles ressources travailler.
- Méthodologie de test et de scoring
Tous les outils ne réalisent pas les tests de la même façon, ce qui est un véritable problème.
Imaginez en contrôle qualité dans une usine de production, deux contrôleurs qui testent différemment un produit. Qui doit-on écouter ?
Si vous comparez deux sites, ou un site avant / après modifications, faites-le toujours de la même façon sur un même outil.
Pire, dans leur notations certains outils peuvent sous-estimer l’impact négatif d’un critère ou le surestimer : on se retrouve avec un site rapide qui obtient une mauvaise note.
Ce qui peut créer des situations ubuesques… comme l’exemple donné avec GTmetrix.
Dareboost, exemple avec efficienseo.com
Avant toute optimisation, je fais un premier teste sur Page Speed Insight.
Sur ordinateur (desktop), le score est plutôt moyen :
Il était pire encore sur mobile évidemment.
Après quelques optimisations, j’ai pu obtenir le score Page Speed de 100 sur ordinateur et 91 sur mobile :
Excellent n’est-ce pas ?! Un site hyper rapide ! D’autant plus que les autres outils cités précédemment me donnaient aussi des scores très élevés.
Oui mais…
Si j’utilise maintenant un autre outil, que je trouve plus avancé, le résultat est un peu différent, très bien, mais peu mieux faire :
Cette solution, c’est Dareboost.
En version gratuite, vous avez droit à 5 rapports assez limités par mois. Malgré tout, ces rapports sont déjà plus fournis que beaucoup d’autres outils gratuits.
En versions payante, on peut aller encore plus loin.
Surtout, Dareboost va lister de façon précise les éléments bloquants : liste des images, des scripts, des polices de caractères… On peut voir une vidéo du chargement du site etc. La lecture des résultats est simple et l’ensemble ergonomique.
Encore une fois, cela montre bien qu’on peut présenter des metrics plus ou moins avantageuses en fonction des outils et méthodologies, mais que ce n’est pas suffisant pour prendre la bonne décision.
Au final, j’aurais encore des optimisations à apporter pour rendre le site vraiment plus rapide, notamment sur mobile.
Mais j’ai aussi choisi de faire des compromis en revenant un peu en arrière, et le site affiche un score tout à fait satisfaisant sur ordinateur, correct sur mobile.
L’un des éléments qui abaisse autant le score est le script du bandeau de cookies. Celui-ci est tout à fait conforme (et recommandé !) aux attentes de la CNIL / du RGPD, mais n’est pas le plus efficient.
En l’état, je préfère concentrer mes efforts sur d’autres aspects plutôt que de m’acharner sur un ce score. Reflet de l’approche plutôt pragmatique que je conseille dans tout projet d’optimisation SEO.
Quoi mesurer exactement ?
C’est essentiel de savoir quoi mesurer, sinon on peut facilement passer à côté de gros freins.
Je dirais qu’il y a notamment 6 indicateurs à prendre sérieusement en compte pour une bonne optimisation webperf.
Le nombre de requêtes
A chaque fois qu’un visiteur va consulter une page internet, son navigateur va envoyer des requêtes au serveur pour télécharger tous les éléments nécessaires : scripts, images, fichiers CSS…
Chaque requête prend du temps, et même si l’on compte en millisecondes, multiplié par des dizaines ou centaines de requêtes, ça fait beaucoup de secondes à la fin.
Moins vous ferez de requêtes, mieux ce sera. Idéalement, essayez de rester sous les 50 requêtes.
Le poids de la page
Le poids d’une page, c’est le poids de l’ensemble des données à télécharger : images, vidéos, fichiers de code… tout sur un site a un minimum de poids.
C’est le volume de données.
Plus votre site sera lourd, plus il mettra longtemps à se charger.
Google conseille de viser un poids inférieur à 500 Ko, ce qui est rarement / difficilement atteignable en vérité.
Restez sous le 1 Mo, ce sera déjà bien.
Le TTFB
TTFB = Time To First Byte, est une indication de la réactivité du serveur web. C’est la mesure entre le moment où un internaute fait une requête HTTP pour accéder à une page web et le moment où le premier octet de la page est reçu par le navigateur de l’internaute.
Ici cela ne dépendra donc pas de la façon dont le site est créé ou optimisé, c’est uniquement côté serveur.
Votre TTFB est très élevé ? Changez d’hébergement.
Google recommande de rester sous les 200 ms.
Le début d’affichage
C’est le temps qu’il faut pour commencer à voir les éléments de navigation etc sur votre site.
Indicateur intéressant, il est le reflet de la gestion des priorités entre les ressources.
Avec une mauvaise gestion du cache ou de la priorisation des ressources, votre site pourrait commencer par charger pendant 3 secondes les éléments de bas de page, avant le menu par exemple. 3 secondes sur une page web, sans le menu ni la partie visible… l’internaute part.
Google recommande un temps inférieur à
Le site visuellement complet
C’est le temps nécessaire pour que l’intégralité des éléments affichés sur une page web soient chargés.
Là aussi c’est un bon indicateur : 90% de votre page pourrait bien se charger rapidement, mais une ressource telle qu’une image ou un script mal optimisé pourrait ralentir en fin de course tout le site.
Ici, Google préconise que le site se charge en moins de
Le speed index
Le Speed Index est un indicateur orienté utilisateur.
Ici, on mesure le temps nécessaire à l’affichage des éléments visibles sans scroller : au-dessus de la ligne de flottaison.
C’est intéressant car si vous avez une page assez longue, vous pouvez très bien charger des éléments plus tard, comme des images grâce au lazy loading.
Ni votre site ni l’internaute n’ont besoin de charger immédiatement ces éléments immédiatement. Donc le Speed Index est une mesure assez pragmatique.
Pour vous aider à vous situer sur le marché français, une étude menée en 2018 par Semrush en partenariat avec Dareboost portait sur les 25 plus gros sites e-commerce.
Parmi ces site, l’étude indiquait que le Speed Index (en ms) du top 5 était :
- Ikea = 528 ms
- Microsoft = 984 ms
- Laredoute = 1306 ms
- Apple = 1467 ms
- Ebay = 1510 ms
Donc si votre site a un Speed Index inférieur à 1500ms, il est équivalent au top 5 des plus gros sites e-commerce en France.
Classe non ?
Comment améliorer la vitesse de son site ? 25 critères
A ce stade, vous devriez désormais avoir une bonne idée des enjeux liés à un site web rapide et des principaux facteurs à surveiller.
Passons donc au concret : vous avez un site trop lent, quels aspects doivent être corrigés pour gagner en vitesse ?
Les images
Les images sont omniprésentes sur les sites. Pour une expérience toujours plus immersive, on a tendance à mettre de très grande et très belles images en haute résolution.
Le problème : elles sont vraiment trop lourdes.
Surtout il faut penser responsive.
Ce n’est pas parce que l’apparence globale de votre site est adaptée et se redimensionne bien sur mobile, qu’il est optimisé pour. On ne charge pas une grande image prévue pour un grand écran d’ordinateur sur un smartphone, c’est un non-sens.
Pour bien optimiser vos images :
- Veillez à les compresser avant de les mettre en ligne, avec un logiciel comme Photoshop
- Enregistrez-les au bon format de fichier. Un PNG sera très lourd, alors qu’un JPG est plus compressé. Si possible, pensez à exploiter les nouveaux formats comme le WEBP.
- Veillez à ne pas utiliser des images trop grandes par rapport à un emplacement du site. Ne chargez pas une image de 1200 pixels de large dans un bloc de 500 px par exemple.
- Vérifiez que le site charge bien différentes versions des images, en fonction du support (ordinateur, tablette, mobile). Exemple : une image de 1200px de large sur PC, la même en 800px de large sur tablette et la même en 400 px de large sur mobile.
C’est tout bête, mais vous pouvez être sûr(e) que sur 100% des sites pour lesquels j’ai fait des recommandations d’optimisations, les images sont un problème majeur et pourtant facilement réglable.
Les vidéos
Utiliser des vidéos, c’est super pour l’image de marque et donner envie de découvrir une marque ou visiter un lieu.
Mais souvent, c’est une plaie pour votre vitesse.
Evitez d’héberger vous-même la vidéo, car à moins d’avoir un très bon serveur cela ralentira grandement votre site en consommant des ressources.
Si vous utilisez un lecteur externe comme Youtube, veillez à différer le chargement du script.
Ou encore, affichez simplement une image, et au clic seulement lancez la vidéo.
Les sliders
Aaah, les sliders !
Où l’art de vouloir fourrer absolument toutes les informations du site dans un seul encart, et tout faire défiler à grande vitesse pour gaver l’internaute comme un canard du Périgord en prévision des fêtes…
En UX, c’est-à-dire l’expérience utilisateur, les sliders (ou carrousels) se transforment souvent en cauchemars totalement inefficaces : trop d’infos, trop de call to action, une vitesse de défilement trop élevée…
Côté performances, comme on n’arrive pas à choisir uniquement 2 belles photos, on va faire 5 ou 6 slides. Et pourquoi pas 8 ou 9 hein ?!
Et comme on les change souvent, on oublie d’en optimiser la moitié…
Résultat : au-dessus de la ligne de flottaison, vous mettez déjà 5 secondes pour charger 3 Mo de données…
Vous vous rappelez du lien avec les plus gros sites e-commerce en France et les plus rapides ?
Au moment où j’écris ces lignes :
- Ikea = pas de slider
- Laredoute = pas de slider
- Appel = pas de slider
- Microsoft = oh les fous ! 2 slides !
Alors oui, on peut trouver des gros sites qui ont des gros sliders très chargés, comme Cdiscount.
Mais d’une part, je doute que vous ayez les énormes ressources de ce géant de l’e-commerce, ils ne sont pas hyper performants par hasard, ils y mettent les moyens.
D’autre part, voulez-vous que votre site y ressemble ?
Là c’est totalement subjectif, pour ma part j’ai toujours eu beaucoup de mal avec le design de Cdiscount, je trouve que leur site est une source de migraine : ça défile, ça clignote, ça incite au clic dans tous le sens, il y a du vert du rouge du jaune, de la vidéo …
Mon avis : si vous ne maîtrisez pas vraiment l’optimisation d’un slider, abstenez-vous.
Les scripts
Après les images, ils constituent en général la deuxième raison de la lenteur d’un site.
On va utiliser du javascript pour un peu tout et n’importe quoi : des animations, des slides, des fonctionnalités, de l’analyse (Google Analytics), du tracking (tags de conversion) …
Les scripts s’additionnent et ralentissent vite l’ensemble de plusieurs secondes.
Pour améliorer la gestion des scripts :
- Réduire leur nombre
- Limiter au maximum les scripts inline, c’est-à-dire directement dans le HTML
- Minifier les scripts. La minification des fichiers limite leur taille en enlevant tout ce qui est inutile (sauts de lignes, commentaires…).
- Combiner les scripts, c’est-à-dire en avoir un seul qui contient l’ensemble du code au lieu d’une dizaine par exemple.
- Rendre les scripts asynchrones avec l’attribut « async », leur chargement ne dépend plus d’un ordre précis et ne bloque pas les autres ressources.
- Utilisez Google Tag Manager pour intégrer un maximum de tags et contrôler plus facilement leur déclenchement, une fois que le DOM est chargé par exemple.
Attention toutefois.
Cela peut altérer l’affichage ou le bon fonctionnement de votre site. Il convient donc de tester progressivement cela.
Soit c’est le développeur qui s’en charge, soit vous utilisez un plugin.
Le CSS
Tous les éléments de design d’un site vont être gérés par les fichiers CSS.
Le souci : les thèmes, les plugins etc vont tous en embarquer. Ces fichiers se cumulent et ralentissent aussi l’ensemble.
- Réduire le nombre de fichiers CSS
- Limiter le CSS inline, c’est-à-dire directement dans le HTML
- Minifier les CSS
- Combiner les fichiers CSS
Là aussi, attention.
Une action brute peut affecter l’apparence du site, testez donc petit à petit.
Soit c’est le développeur qui s’en charge, soit vous utilisez un plugin.
Les requêtes
Chaque fichier appelé sur une page va demander des ressources, du temps, et ralentir la file des autres éléments à télécharger.
Pour un site rapide, il faut limiter au maximum les requêtes.
C’est une suite logique des points précédents : limitez les images, les scripts et les fichiers CSS, et votre site gagnera en performances.
Le code HTML
Tout comme les scripts et le CSS, le code HTML peut être alourdi par des sauts de lignes, des commentaires et des éléments inutiles, comme une balise « <div> » vide etc.
- Assurez-vous, avec le développeur, que le code HTML du site est propre et conforme aux règles du W3C.
- Minifiez l’HTML pour qu’il soit plus léger
La gestion du cache et des en-têtes HTTP
Il existe tellement de solutions ou plugins (souvent gratuits) qui promettent une super gestion optimisée du cache en 3 clic…
Pourtant, la gestion du cache sur un site, surtout sur un site e-commerce, peut vite être un art et exiger beaucoup de doigté technique.
Ce seul point pourrait faire l’objet d’un très long dossier.
Mais faisons simple aujourd’hui.
Le cache, c’est une mise en mémoire.
Quand un internaute passe sur votre site, il va télécharger l’intégralité des éléments du site : images, HTML, scripts…
L’idée ici, c’est de dire au navigateur de l’internaute :
Attends ! T’es déjà venu, je te reconnais.
90% n’a pas changé, alors garde ce que tu connais du site et économises toi 3 secondes de téléchargement.
Idem pour les visiteurs suivants.
Hey, on ne se connait pas encore mais tu sais quoi, quelqu’un m’a déjà demandé la même info tout à l’heure !
Alors je ne vais pas aller voir dans mes bouquins, je te redonne la même info car elle est encore valable.
Vous économisez énormément de téléchargements et d’allers-retours pour reprendre chaque information d’une page web. Le gain de temps est tout bonnement énorme !
Pour des sites sous WordPress, Prestashop etc, des plugins existent. Même pour du Magento.
Toutefois, autant sur un petit site vitrine ou e-commerce WordPress, un plugin ira parfaitement bien, autant je vous recommande la mise en place de solutions plus avancées pour du Magento.
Le lazy loading
Le lazy loading, c’est le fait de ne pas charger un élément dans une page tant que l’on en n’a pas besoin. Cela s’applique aux images et vidéos.
En clair, si un internaute arrive sur votre site, il aura besoin de l’image au-dessus de la ligne de flottaison. Mais pas celles qui se trouvent dans le pied de page, ou qu’on ne verrait qu’après 3 scrolls.
Donc via le lazy loading, on ne charge pas ces images et on gagne forcément du temps !
Pour cela, il faut utiliser soit un script et bien gérer l’implémentation du code pour les images, soit utiliser un plugin qui s’en chargera.
L’hébergement et le TTFB
On l’a vu, le Time To First byte est important.
Mais ici, une seule chose à faire s’il est mauvais : changer d’hébergement.
Typiquement, Ok vous pouvez héberger votre site pour 3€ / mois sur un serveur mutualisé. Mais les performances seront mauvaises.
Même pour un petit site vitrine, un petit blog, ça vaut le coup de payer quelques euros de plus par mois pour un hébergement plus rapide.
Dès lors que vous avez un e-commerce qui commence à avoir du trafic et générer du business, un petit serveur dédié se justifie amplement.
Le CMS
Alors ici, il est notamment fréquent d’entendre que WordPress est lent et que « c’est de la merde ».
Ou bien que machin soit mieux que truc.
Bof…
WordPress, c’est lent et pas suffisamment solide ?
Voici quelques exemples de très gros sites qui tournent sans aucune difficulté sous WordPress :
- Le site d’actualités techno Techcrunch
- BBC America
- Sony Music
- The Walt Disney Company
- …
Donc si votre petit site à 5 000 visites mensuelles a du mal, la vérité est ailleurs.
Cependant, si le CMS est mal optimisé, mal maintenu (vieille version), oui vous pouvez avoir des problèmes.
De même, ils auront chacun leurs forces et faiblesses.
Utiliser un Magento pour publier du contenu massivement, et un WordPress pour une boutique dans 5 pays et 50 000 produits… y a un souci !
Le thème et le design
On trouve facilement des thèmes gratuits ou à pas cher sur des plateformes comme themeforest.
Le fait est malheureusement que nombre d’entre eux sont mal conçus et sont lents, difficiles à optimiser aussi bien en SEO qu’en temps de chargement.
Le pire étant les thèmes qui promettent de faire tout et n’importe quoi, car ils vont souvent embarquer bien trop de scripts et de plugins pour vous donner un sentiment de liberté dans la conception du site, aux dépends des performances.
Dès lors que vous voulez créer ou refondre un site web qui a un minimum de trafic et doit être moteur de votre business, investissez dans les compétences d’un développeur et faites construire un thème sur-mesure et véritablement performant.
En ce qui concerne le design du site, là aussi on peut parfaitement réaliser de belles choses tout en gardant en tête des objectifs de performances.
Ainsi le designer / service marketing a sa part de responsabilité et son rôle à jouer lorsqu’il conçoit les maquettes.
Ajouter des animations partout, d’immenses images en parallaxe, des vidéos, 10 typos sur une même page (j’y reviens après), des textures partout… faciliter le travail des développeurs et permettre au site de charger le moins de ressources possibles, ça commence dès l’étape de conception.
Les plugins
Là encore ce sera plus souvent vrai pour des WordPress.
Il existe une très grande quantité de plugins gratuits comme payants.
Mais utiliser trop de plugins ralentit WordPress, et ceux-ci peuvent de plus charger plusieurs scripts et CSS qui vont encore alourdir vos pages.
Je ne dis pas qu’il ne faut pas en utiliser, c’est quasiment obligatoire. Il convient seulement de vérifier si possible les performances, leur suivi, les avis des utilisateurs, les mises à jour…
Et bien entendu, tester la parfaite compatibilité avec votre thème et vos autres plugins, ainsi que l’impact possible sur la vitesse.
La version de PHP et autres technologies
PHP, c’est un langage de programmation qui rend les sites dynamiques : charger les X derniers articles de blog sur une page WordPress par exemple.
Tout comme d’autres technologies, PHP évolue.
Si votre serveur utilise une ancienne version de PHP, disons le 5.6, non seulement il y a un sérieux risque de sécurité, mais aussi une grosse perte de performance.
PHP 7 est en effet plus rapide et performant que PHP 5, ce qui aide votre site à traiter plus d’informations et à être plus réactif.
Même entre les différentes 7.x il y a des améliorations.
A noter que fin 2019, si votre site est toujours sous PHP 5.6 (il y en a malheureusement), il est urgent d’en changer car cette version n’est plus supportée.
Les processus
Point technique qui ne concerna que les gros sites ou les e-commerce, mais c’est lié au choix du CMS, des plugins et du réel besoin technique de votre site.
Dès lors que vous commencez à plugger votre site à d’autres systèmes : CRM, ERP (gestion de prix et de stocks…), sites tiers pour publier ou récupérer du contenu, réseaux de partenaires…
Il y a des transferts de données et vous allez demander à votre site d’ingurgiter et traiter ces données.
Plus les processus sont volumineux, plus le système à la base de votre site, le CMS ou la plateforme e-commerce, va utiliser de ressources du serveur et prendre du temps.
Mal calibrés, on peut atteindre un point de rupture : le back-office consomme trop de ressources / met trop de temps à traiter l’information, et il y a un effet cascade qui dégrade l’ensemble du site, jusqu’à le crasher totalement.
Vous voulez développer du e-commerce, lancer de nouveaux marchés ou de nouvelles gammes de produits ? Très bien. Mais assurez-vous avec votre agence de développement que l’ensemble est techniquement solide.
Si ce n’est pas suffisant, rallongez, c’est un investissement pour votre business.
Faire des économies de bout de chandelles vous coûterait très cher si votre site est totalement HS et que vous perdez toutes vos commandes.
Le passage au HTTPS et HTTP/2
Attention c’est encore technique ici.
Le HTTP, c’est un peu l’antiquité du web : on parle des années 90 là.
Pas assez rapide, pas assez sécurisé… il aura tout de même permis au web de s’étendre.
HTTPS veille sur vous.
Pour des raisons de SEO, de sécurité des données, d’affichage des sites marqués comme « non sécurisé » … le passage au HTTPS est désormais une nécessité.
Seulement, l’ajout de sécurité ralentit un peu le temps chargement d’un site. Sans trop rentrer dans les détails, même la question du « HTTPS » dépend de plusieurs facteurs.
On parle toujours de SSL, mais en fait il s’agit déjà d’un ancien protocole cryptographique, et même SSL 2.0 et SSL 3.0 ont été reconnus comme non sécurisés.
L’autre protocole réellement utilisé est TLS, et pour mettre en œuvre des communications sécurisées on va utiliser des ciphers, des suites cryptographiques. Eh bien là aussi, il en existe des plus rapides que d’autres.
Bon là on va quand même loin dans l’optimisation, ça ne concerne pas la majorité des sites.
Donc HTTP/1 a des limites en termes de téléchargement de ressources, et on ralentit encore le tout avec des échanges sécurisés. Ça n’arrange pas nos affaires.
HTTP/2 à la rescousse.
Parmi les gros avantages de HTTP/2 par rapport à HTTP/1 on notera le multiplexage.
Avec HTTP/1, chaque connexion TCP entre le navigateur et le serveur permettait de récupérer les ressources une par une. Donc on crée plusieurs connexions TCP, ce qui est lent, pour paralléliser les ressources. Mais on est souvent limité à 6 connexions TCP par domaine. Il y a donc toujours un goulot d’étranglement.
Grâce à HTTP/2 et au multiplexage, une seule connexion TCP suffit à traiter toutes les requêtes et elles peuvent être priorisées, sans bloquer la file d’attente. OUF !
En somme : passez en HTTPS, assurez-vous de passer aussi en HTTP/2, et testez les meilleures configurations pour optimiser le chargement des ressources.
Les redirections
Votre site ou votre page a changé d’URL ? Un lien pointait vers une page qui n’existe plus et vous voulez récupérer le jus SEO et les visiteurs ?
Pas de souci, vous pouvez faire une redirection 301 pour que le serveur renvoie l’internaute vers la bonne page, et pour indiquer à Google le changement.
Le souci, c’est quand les redirections 301 s’enchaînent.
Exemple :
Mondomaine.com fait une 301 vers www.mondomaine.com qui fait une 301 vers https://www.mondomaine.com
Cette étape en trop, elle va demander du temps pour être traitée et donc ralentir le chargement de la page.
Une bonne gestion des redirections ce n’est pas qu’une question de SEO, c’est aussi une question d’UX.
Le hotlinking des images
Le hotlinking c’est quand un autre site va utiliser des images de votre site, mais sans les copier sur son serveur : il fait une requête sur le vôtre directement.
Ce qui veut dire que votre serveur supporte le trafic de votre site, mais est aussi impacté par le trafic des sites qui font du hotlinking.
Bloquer cela via le fichier .htaccess résout facilement le problème.
Le choix des polices de caractères
Les thèmes faciles à personnaliser, les pages builders, les fantaisies en design…
Cela conduit rapidement à utiliser plein de typos différentes.
Là aussi, merci à Google avec ses polices de caractères gratuites.
Seulement chacune de ces typos doit être chargée, et les googlefonts ralentissent pas mal le chargement d’une page.
Alors si vous en utilisez 1 différente pour chaque niveau de titre, plus une autre pour les paragraphes, encore une pour des accroches etc, c’est vite problématique.
Essayez de n’appliquer qu’un nombre limité de typos différentes.
Les appels en base de données
Vous l’aurez compris avec les volumes de requêtes : plus une page va nécessiter de requêtes, plus son temps de chargement sera ralenti.
Sur certaines pages et certains sites, on est obligés d’avoir des éléments dynamiques qui vont interroger un ou des services / serveurs pour contrôler des informations : calcul de prix, stock, vérification d’un compte…
Mais dès que c’est possible, préférez les éléments statiques à ceux dynamiques et limitez les requêtes en base de données.
Avec la sécurité, c’est aussi une raison pour laquelle on voit des CMS au back-office très fluide publier des pages statiques en front.
Les révisions et autres copies en base de données
Pour sécuriser les sites, les CMS et divers plugins ont tendance à conserver des révisions en base de données.
Tous les changements appliqués sur une page de contenu vont être stockés en différentes versions.
Si votre site a beaucoup de contenus, avec des changements réguliers et plusieurs personnes qui interviennent en back-office, le nombre des révisions peut très vite grimper et alourdir la base de données.
Il y a donc un compromis à trouver entre sécuriser le travail et permettre rapidement de rétablir une version précédente d’une page, et l’encombrement inutile de la base de données.
Idem avec les brouillons d’articles de blog par exemple.
L’utilisation d’un CDN
Le CDN, Content Delivery Network, revient à créer une copie de votre site en plusieurs points du globe.
Ainsi par exemple, si vous avez votre serveur en France et qu’un internaute consulte le site depuis les Etats-Unis, les données ne vont pas à chaque fois traverser la moitié de la planète. Les requêtes se feront avec la copie la plus proche du visiteur, aux Etats-Unis.
Très intéressant et même nécessaire si vous avez un site multilingue et que vous communiquez / vendez à l’international.
En revanche en France et pour les pays d’Europe très proches (Allemagne, Belgique, Espagne…), le gain plus discutable voire carrément nul.
Là aussi il convient d’avoir une approche pragmatique : volume de visites, de données, chiffre d’affaires en jeu… et du service que vous utiliseriez.
J’ai vu par exemple des sites devenir de vrais fusées avec le service d’Amazon.
Le bandeau de cookies
Celui-là je le mets à l’écart des autres. Oui il va s’agir d’un javascript qui va contrôler la dépose et la lecture des tags et cookies.
Logiquement et pour être en conformité avec la CNIL et le RGPD, il apparaît à la première visite sur un site et avant tous les cookies ou tags tiers non fonctionnels : on ne peut donc pas vraiment le bloquer.
Seulement, ce bandeau peut-être parfois lent et gênant, ralentissant d’autres ressources essentielles à une page.
Faites vos tests.
L’utilisation d’AMP et PWA
L’AMP nous a donc été proposé (qui a dit forcé ?!) par Google.
Comme son nom l’indique, Accelerated Mobile Pages a pour but de rendre les sites extrêmement rapides sur mobile.
Les premiers à avoir adopté l’AMP étaient des sites d’actualité, de presse. Mais il y a aussi eu des e-commerçant qui s’y sont rapidement mis.
Pour servir une page AMP, on va l’épurer au maximum : adieux les scripts inutiles, les lourdes animations etc. La page doit être la plus légère possible.
Puis il y eu rapidement derrière le PWA : Progressive Web App.
Peut-être vous êtes-vous déjà posé la question de faire développer une application IOS ou Android ? Seulement c’est cher, il faut la maintenir…
PWA permet aux sites de se comporter sur smartphone comme une app : fluidité, fonctionnalités… l’expérience utilisateur est grandement améliorée et l’éditeur n’a plus à développer une application par plateforme.
Avec la combinaison des deux, on parle alors de PWAMP.
Sur un site vitrine mais surtout un blog WordPress, c’est intéressant, facile et rapide de servir des articles de blog en AMP.
Il vous suffit pour ça d’installer le plugin officiel.
En revanche, passer tout votre site en AMP ou tout développer en PWA est vite coûteux. A faire si vous en avez vraiment besoin et en fonction de votre marché.
Les logs
Enfin dernier point pour cette liste, les logs.
Là aussi, on ne s’adresse pas à tous les sites et il s’agit d’optimisation déjà avancée.
Toutefois si vous avez un site e-commerce notamment, avec un serveur dédié et des systèmes qui vont stocker des données, s’intéresser aux logs est une nécessité.
Les logs, ce sont des fichiers journaux : de façon brute et peut lisible, ils vont stocker des petites informations concernant tout ce qui se passe sur le site.
Les visites, les pages consultés, les navigateurs utilisés, les erreurs rencontrées…
Très utiles pour déceler et corriger des bugs ou pour optimiser en profondeur le SEO, scrutant exactement ce que va consulter Google.
Mais non maîtrisés ils peuvent vite atteindre un volume très important, et finir par surcharger votre serveur. Il m’est arrivé de travailler sur des cas où on atteignait +30 Go de logs…
C’est comme le disque dur de votre PC : s’il est trop plein, ça rame et vous n’enregistrez plus rien.
Nettoyer et archiver à intervalle régulier les logs soulage donc le serveur et contribue à assurer la disponibilité des ressources pour accélérer l’ensemble du système.
Conclusion
Nous y sommes enfin !
Un long dossier qui vous présente à la fois l’intérêt d’optimiser la vitesse de votre site, les outils de mesure, quoi mesurer et ensuite quelles pistes suivre pour booster votre site web.
Et vous, où en êtes-vous de l’optimisation de votre temps de chargement ?
