Temps de chargement : Comment l’améliorer – Le guide ultime

By 12 novembre 2018Liste des articles SEO

Impact sur l’expérience utilisateur et vos conversions

 

Le temps de chargement de page est un aspect crucial pour votre référencement, l’expérience vécue par vos utilisateurs ainsi que le volume de conversions.

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.

Ainsi, il apparait que le temps de chargement de page a un impact direct sur la qualité de l’expérience vécue par l’utilisateur. Il a également un impact sur le business du site.

En effet, 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.

Autre exemple, sur Shopzilla, 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 peut avoir des répercussions fortes sur votre business à moyen / long terme. Le négliger serait potentiellement néfaste pour vous.

Voici ci-dessous 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).

 

 

Les définitions du temps de chargement de page

 

Le temps de chargement est une donnée très vaste, à tel point qu’il existe des temps de chargement et non pas UN temps de chargement.

Puisqu’il peut jouer sur plusieurs aspects, voici donc un récapitulatif de quelques définitions.

 

Le TTFB (Time To First Byte) :

C’est le temps que le serveur prend pour renvoyer sa première réponse.

 

Le Start Render :

C’est le temps pour que quelque chose soit affiché sur l’écran. Avant ça, l’écran de l’internaute est blanc.

 

Le Fully Loaded Time :

C’est le temps pris pour que la page et tous ses éléments soient chargés totalement.

 

Le Byte in :

Quantité de données que doit récupérer le navigateur pour afficher entièrement les éléments de la page.

 

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.

 

Quelles sont donc les optimisations qu’on peut apporter sur son temps de chargement ?

Voici ci-dessous les actions qu’on peut mener pour optimiser le temps de chargement de page.

 

Activer la compression gzip (action côté serveur via Deflate ou Mod_Gzip)

 

Outil de test : https://checkgzipcompression.com

 

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/

 

Activer les en-têtes Keep-Alive

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.

 

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.

 

Activer le Expire Header

 

Indique la date de péremption d’un fichier. Jusqu’à cette date ledit fichier peut rester en cache.

 

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.

 

Activer le CDN

 

Remettre en cause le choix de l’hébergeur

 

Quelques paramètres à prendre en compte :

  • 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é).

 

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.

 

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>

 

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.

 

Format AMP (Accelerated Mobile Pages)

 

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.

 

Focus sur les outils

 

  • 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 :

https://developers.google.com/speed/

 

L’optimisation du temps de chargement est une action qui s’installe dans le temps et qui requiert des analyses régulières.

Si vous avez des questions sur le temps de chargement, et / ou si vous avez besoin d’assistance et de conseils sur les optimisations à mener, n’hésitez pas à me contacter, nous parlerons de vos problématiques. Je prendrai le temps d’y répondre le plus efficacement possible.

Boostez votre audience et l'engagement de vos utilisateurs !

Powered by MailChimp

nvidal

Author nvidal

More posts by nvidal

Leave a Reply

Coaching et consulting SEO