Pourquoi augmenter la vitesse de chargement de page web ?
Que faire en cas de temps de chargement page web long ?
Le chargement progressif d’une page web, s’il est élevé peut avoir des impacts négatifs sur la qualité de l’expérience vécue par l’utilisateur sur votre site ainsi que sur la fréquence d’analyse de vos pages par les moteurs de recherche.
La conséquence directe est une baisse des conversions et des visites.
En l’occurrence, votre objectif est de présenter des pages web et mobile avec des temps de chargement les plus faibles possibles.
Donc oui améliorer le temps de chargement d’une page web s’avère un chantier vraiment important, à court et moyen long terme.
Comment améliorer le temps de chargement de vos pages même si vous n’êtes pas développeur dans l’âme ou si les questions techniques vous rebutent ?
Temps de chargement de page web : Qu’est ce que c’est ?
Il s’agit du temps dont une page web ou mobile aura besoin pour se charger.
Afin que l’utilisateur voit la page appelée complètement chargée et disponible sur son navigateur, plusieurs étapes se succèdent. De manière très schématisée cela donne :
- La page est appelée par l’utilisateur directement sur son navigateur ou via un lien.
- Le serveur est appelé : il tape dans la base données et renvoie les informations : html, images, css, js, etc.
- Le navigateur de l’utilisateur charge les éléments de ladite page.
Le temps de chargement d’une page web implique donc plusieurs phases. C’est pourquoi il n’y a pas 1 mais plusieurs temps de chargement de pages. Voici le détail :
Améliorer le temps de chargement de page web : “TTFB” (Time To First Byte)
C’est le temps que le serveur prend pour renvoyer sa première réponse, le chargement du premier octet.
De manière optimale, on doit être à 200ms (millisecondes). C’est Google, lui-même, qui le recommande.
Améliorer le temps de chargement de page web : “Start Render”
C’est le temps pour que les éléments en haut de page soient affichés sur l’écran (ce qui s’affiche donc au-dessus de la ligne de flottaison). Avant ça, l’écran de l’internaute est blanc. Il faudrait être à 1 seconde de chargement en desktop (et 800ms en mobile).
Améliorer le temps de chargement de page web : “Fully Loaded Time”
C’est le temps pris pour que la page et tous ses éléments soient chargés totalement. Il faut comptabiliser 4 secondes maximum.
Améliorer le temps de chargement de page web : Le Byte in
Quantité de données que doit récupérer le navigateur pour afficher entièrement les éléments de la page.
Temps de chargement de page web et webperf : Evolution vers le projet Page Experience et les signaux web essentiels
Afin de satisfaire la qualité de l’expérience vécue par les utilisateurs, Google a activé depuis Mai 2021 la nouvelle feature : Web Core Signals, ou Signaux Web Essentiels qui ont pour objectif avec quelques critères supplémentaires (la qualité de l’affichage mobile / compatibilité mobile, navigation sécurisée, passage à l’https, et la non présence de publicités interstitielles intrusives : (facteurs déjà pris en compte pour le référencement naturel) de qualifier la “Page Experience”, l’expérience vécue sur une page.
Il existe donc trois signaux web essentiels (permettant d’avoir une vision globale de l’expérience utilisateur sur une page web).
>> Critère LCP (Largest Contentful Paint) : Il mesure le temps de chargement (correspond au temps de rendu de la plus grande image ou bloc de texte visible dans la fenêtre).
>> Critère FID (First Input Delay) : Il mesure l’interactivité (correspond à la réactivité d’une page suite à la première interaction d’un utilisateur).
>> Critère CLS (Cumulative Layout Shift) : Il mesure la stabilité visuelle (mesure la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus).
Des infos de perf sont déjà disponibles sur l’outil Page Speed Insights ainsi que sur la Search Console.
A noter que cette évolution est présentée comme majeure par Google. Regardons par le passé les évolutions dites majeures et qui n’ont eu qu’un impact relatif : passage à l’https, le mobile index first par exemple.
Regardons, analysons, prenons du recul sur les annonces de Google, et de ce qui arrive dans les faits sur nos sites.
Temps de chargement de page web : Les impacts
Comme mentionné ci-dessus, oui, le temps de chargement d’une page web a un impact sur l’expérience vécue par vos utilisateurs et sur vos conversions / interactions. Ainsi que sur le référencement de vos pages web.
En effet, l’internaute est impatient, et le mobinaute l’est encore plus. Si la page demandée ne s’affiche pas rapidement, la conséquence directe sera le départ de l’internaute, et un taux de rebond en hausse. Si en plus l’internaute revient sur la liste Google par laquelle il est arrivé sur le site, Google comprendra que le temps passé sur le site est très (trop) faible et prendra ce mauvais signal en compte pour dégrader votre positionnement sur ses listes.
En effet, “57% des internautes quittent un site s’il prend plus de 3 secondes à s’afficher. Parmi ces 57%, 80% affirment ne plus jamais y revenir”.
Pensez que les pages de votre site sont vos vendeurs. Comme dans un magasin physique, si l’internaute tombe sur un “mauvais” vendeur il partira de votre site. C’est donc assurément de la mauvaise publicité que vous vous infligez.
Récemment, une étude a montré que “si le temps de chargement de page d’Amazon augmente de 0,1s, c’est à dire 100 ms, le site enregistre 1% de vente en moins”.
Une autre étude sur Shopzilla a prouvé que “si on réduit fortement le temps de chargement de 7 à 2 secondes, le site enregistre un gain de chiffre d’affaires d’environ 10%”.
Il apparait donc que ce chantier d’optimisation du temps de chargement est loin d’être anodin, et mérite d’être priorisé si le besoin est fort.
Concrètement, comment faire pour savoir si votre temps de chargement de page web est élevé ou pas ?
Regardez votre Search Console, dans l’onglet Améliorations, vous avez une section Vitesse (fonctionnalité expérimentale) qui vous donne plusieurs informations.
Dans l’onglet Anciens outils et rapports, vous avez la section Statistiques sur l’Exploration. Sur cette page vous trouverez un graphe sur le chargement moyen du 1er octet de vos pages (le premier niveau de chargement donc). Vous pouvez voir facilement, si vous êtes au-dessus des 200ms requis.
Découvrez le guide sur la Search Console : Mode d’emploi pour une utilisation efficace.
Je vous recommande également de regarder Dareboost qui vous donne des indications bien plus précises que ce que donne la Search Console. Avec Dareboost, vous avez une vision des performances sur les trois types de chargement.
L’outil Google Speed Insights vous indiquera également ces mêmes indications.
Améliorer le temps de chargement de page web : Quels sont les problèmes les plus fréquents à corriger
Maintenant que nous savons à quel point un “mauvais” chargement peut avoir des répercussions négatives, regardons de plus près les causes les plus fréquentes d’un temps de chargement élevé (à noter que ce graphe ne mentionne pas les problématiques au niveau serveur ou hébergeur alors que celles-ci peuvent être très impactantes : Nous allons les voir ci-après).
Le temps de chargement peut être optimisé sur quatre niveaux :
- Au niveau des pages HTML.
- Au niveau de la base de données.
- Au niveau du serveur.
- Au niveau des fichiers tiers appelés par les pages.
Améliorer le temps de chargement de page web : Les optimisations à envisager
Voici ci-dessous les actions qu’on peut mener pour optimiser le temps de chargement de page.
Pour celles et ceux qui êtes sur WordPress, vous pouvez utiliser le plugin “WordPress Fastest Cache”. Il y en a d’autres bien sûr.
Améliorer le temps de chargement de page web #1 : Activer la compression gzip (action côté serveur via Deflate ou Mod_Gzip)
Outil de test : https://checkgzipcompression.com
Améliorer le temps de chargement de page web #2 : Activer le Minify
On réduit la taille de certains fichiers en y supprimant:
- Les espaces.
- La taille des variables.
Et en passant par la refactorisation du code.
Pour rappel, un fichier JavaScript minifié conserve son format JS, alors qu’un fichier compressé en GZIP est un fichier au format .gzip.
TODO : Il faut d’abord «minifier» les pages HTML puis les fichiers CSS et enfin les fichiers JavaScript.
Outil à utiliser : http://compressmycode.com/
Améliorer le temps de chargement de page web #3 : Activer les en-têtes Keep-Alive
Améliorer le temps de chargement de page web #4 : Activer la mise en cache (côté serveur).
TODO : Utiliser un système de mise en cache côté serveur.
Objectif : Economiser les ressources du serveur et lui éviter de travailler inutilement.
Améliorer le temps de chargement de page web #5 : Désactiver les etags
Un etag permet de faire la différence entre plusieurs versions d’un même document ou d’un fichier.
L’objectif est de vérifier si un document a été modifié.
Si le fichier est identique, le navigateur utilise le cache, transmettant alors sans intérêt les données etag.
Améliorer le temps de chargement de page web #6 : Activer le Expire Header
Indique la date de péremption d’un fichier. Jusqu’à cette date ledit fichier peut rester en cache.
Améliorer le temps de chargement de page web #7 : Eviter les goulots d’étranglement au niveau de la base de données
Les actions pouvant être menées dans ce sens :
- Activer le log des requêtes « lentes » (Slow Query) dans les paramètres de MySQL.
- Eviter les requêtes dans les boucles.
- Utiliser les bonnes clés.
- Partitionner les grosses tables.
- Choisir le bon type de table.
- Activer le cache de requêtes MySQL.
- Augmenter le nombre de connexions simultanées.
Améliorer le temps de chargement de page web #8 : Activer le CDN
Améliorer le temps de chargement de page web #9 : Remettre en cause le choix de l’hébergeur
Quelques paramètres à prendre en compte dans le choix de votre solution d’hébergement :
- Hébergement adapté à l’usage du site : Trafic, charge serveur, load balancing.
- Librairies, versions de serveurs mis à jour.
- Caches serveurs disponibles et fonctionnels.
- Modules de compression disponibles.
- CDN disponible.
- Aide au dimensionnement de la plateforme.
- Services associés à l’hébergement (exemple : la sécurité).
Améliorer le temps de chargement de page web #10 : Optimiser et gérer les images
- Réduire le poids des images (privilégier les formats png et jpg).
- Compresser les images.
- Privilégier les images vectorielles.
- Fournir les images à la taille d’affichage (pas de resize).
=> Utiliser l’attribut “srcset” : Permet au navigateur d’adapter l’affichage de l’image selon le device. - Utiliser les sprite css.
- Charger l’image quand nécessaire : LazyLoad (ou Unveil) permet de ne charger que les images visibles à l’écran.
- Privilégier la résolution 72dpi.
Améliorer le temps de chargement de page web #11 : Différer le chargement du JS
TODO : Placer le JS sous la ligne de flottaison, en bas de page.
Associer les attributs defer (le js n’est chargé qu’au chargement complet des contenus) ou async (les fichiers js les plus légers sont chargés en premier) aux fichiers js du site web.
async : Plutôt pour les scripts prioritaires.
defer : Plutôt pour les scripts secondaires.
<script type=”text/javascript” src=”/path/filename.js” defer></script>
<script type=”text/javascript” src=”/path/filename.js” async></script>
Améliorer le temps de chargement de page web #12 : Autres actions à envisager
- Bloquer la totalité du contenu lorsqu’une attaque XSS est suspectée.
- Éviter de conserver du code en commentaire.
- Ne transmettre aux internautes que les données dont ils ont besoin.
- Limiter les actions pouvant être menées par les contenus externes intégrés au site.
- Gérer les sélecteurs CSS dupliqués et / ou trop complexes.
- Alléger les fontes de caractères.
- Se protéger contre les attaques de type XSS (Cross-Site Scripting) (Mise en place d’une politique restrictive de sécurité du contenu : en-tête HTTP “Content-Security-Policy” (CSP)).
- Limiter l’envoi de certaines données inutilement sur le réseau, à travers des cookies sur des ressources statiques.
- Regrouper les fichiers css et js.
- Sécuriser les cookies : Un cookie transmis au navigateur via le protocole HTTPs doit pouvoir transiter uniquement sur une connexion sécurisée (sauf cas particulier).
- Ajouter l’instruction Secure au niveau de l’en-tête HTTP Set-Cookie.
- Éviter d’utiliser les @import CSS.
Améliorer le temps de chargement de page web #13 : Format AMP (Accelerated Mobile Pages)
AMP : Qu’est-ce que c’est ?
Accelerated Mobile Pages. C’est le projet Google pour améliorer le temps de chargement des pages web.
L’objectif de Google est de permettre aux internautes de naviguer sur des pages rapidement et facilement, en stockant les pages sur les serveurs Google.
AMP est un format AMP-HTML (basé sur du html 5).
Détail : toutes les fonctionnalités ralentissant le chargement de la page sont éliminées.
Les pages AMP sont donc moins riches que leur version canonique.
Les pages amp correspondent à une avancée supplémentaire de Google vers le mobile, mais ne constituent pas en soi un nouveau support comme peut l’être le PWA.
Le second avantage est d’apparaitre dans le carrousel en haut de page sur les résultats Google. Le site gagne donc en visibilité.
Comme les pages amp sont moins lourdes en cas de fort trafic mobile, la charge serveur est allégée.
AMP est recommandé pour les articles, les pages de contenus et les blogs, l’intérêt est moins évident pour les sites e-commerce (puisque les éléments autres textuels ne sont pas affichés).
Quels sont les avantages de passer ses pages en AMP ?
- Réelle baisse du temps de chargement.
- Expérience utilisateur meilleure.
- Google met en avant les pages au format AMP.
- La vitesse et la lisibilité sur mobile sont des critères pris en compte par Google.
- Les pages AMP sont affichées plus haut dans les pages de résultats.
- Le tx de rebond avec les pages amp diminue.
Quels sont les inconvénients ?
- Les pages amp sont allégées : donc pas de formulaires d’enregistrement (pas bon non plus pour le e-commerce).
- Les pages avec erreurs ne sont pas mises en cache par Google amp.
- AMP n’est pas un facteur de classement. Mais, la vitesse de la page et la convivialité pour les mobiles sont importantes pour tous les sites. Donc AMP influe indirectement sur le SEO.
- Un autre risque concerne la perte des signaux sociaux : En effet, si les liens en provenance des réseaux pointent vers la version AMP et non vers la version normale, les signaux risquent d’être dilués.
Comment créer les pages amp ?
Pour créer ces pages (je n’ai pas de valeur ajoutée particulière à expliquer aussi bien le process de construction des pages amp que ce guide) :
La documentation officielle de Google sur le sujet AMP.
Guide sur la manière de créer une page AMP.
Test de validation des pages AMP.
Comment améliorer le temps de chargement de page web : Focus sur les outils
Voici ci-dessous un récapitulatif des outils que vous pouvez utiliser :
- Dareboost
- https://www.dareboost.com/fr
- Search Console
- https://www.google.com/webmasters/tools/home?hl=fr
- Page speed insights
- https://developers.google.com/speed/pagespeed/insights/?hl=fr
- Test my Site Google
- https://testmysite.withgoogle.com/intl/fr-fr
- GT Metrix
- https://gtmetrix.com/
- WebPageTest :
- https://www.webpagetest.org/
- Compressor :
- https://compressor.io/
- EzGif (gif) :
- https://ezgif.com/
- Compression d’images :
- https://compressnow.com/fr/
- http://compressjpeg.com/fr/
- https://imagify.io/
- https://tinyjpg.com/
- https://tinypng.com/
Source d’information chez Google :
https://developers.google.com/speed/
Ressources complémentaires autour du temps de chargement de page web
Augmenter la vitesse de chargement des pages web est un travail nécessaire et qui demande parfois de nombreuses ressources. Il peut parfois remettre en question des choix techniques faits dans le passé et qui ne correspondent plus aux besoins actuels.
Optimiser le temps de chargement d’une page web est donc une action qui s’installe dans le temps et qui requiert des analyses régulières.
Améliorer la vitesse de chargement de vos pages peut donc concerner plusieurs axes de votre site. A titre d’exemples :
- Serveur Web.
- Performance web.
- Cache du navigateur.
- DNS.
- Hébergement mutualisé.
Créer une page de vente qui convertit
Gérer son blog WordPress comme un pro
Supports pédagogiques pour construire votre projet entrepreneurial.
