Développement web

Comment optimiser la vitesse de son site internet ?

Par Raphael Pernel, le 17 décembre 2019, mis à jour le 18 décembre 2019
reveil

Personne n’aime attendre pour charger une page d’un site internet. Selon une étude récente de Google, le temps moyen nécessaire au chargement d’une landing page sur mobile est de 22 secondes. L’étude indique également que 53% des personnes quitteront une page mobile si elle prend plus de 3 secondes à se charger, alors prendre soin de l’optimisation de son site internet est primordial.

Mon site est lent, pourquoi ?

Il existe diverses raisons qui transformera votre site internet en un véritable escargot.

  • Une mauvaise optimisation des images
  • L’utilisation de fichier CSS et JS non compilés
  • Des polices inadaptées aux web
  • Votre serveur manque de puissance, notamment dans le cas de projets plus imposants
  • Une mauvaise gestion du cache

Comprendre la source du problème

Si vous avez besoin d’estimer la vitesse du chargement du site sans beaucoup de précision, il sera utile de commencer par faire son audit (via l’onglet de la console développeur sur Chrome). Il pourra être réalisé grâce au plugin Lighthouse. Dans le rapport, on pourra trouver une estimation de vitesse pour les appareils mobiles et quelques autres rapports.

Pour évaluer rapidement l’optimisation du parcours client, vous pouvez utiliser Google PageSpeed Insights ou Sitechecker (nous utilisons une API de Google PageSpeed Insights). Finalement, il est utile d’analyser le temps de chargement du site par un utilisateur réel. Pour cela, il existe des rapports spécifiques dans le système d’analyse web de Yandex.Metrics et Google Analytics.

Lighthouse audit pluging image

Optimiser ses images

Les images présentes sur votre sites seront souvent source de lenteur si celles-ci ne sont pas correctement optimisées pour le web.
La technique principale pour optimiser les images est de réduire leur taille. Pour le faire, il faut utiliser un format adapté et se servir des outils de compression :

  • PNG pour les images avec transparence et texte
  • JPEG pour les photos et les images complexes
  • SVG pour les graphiques vectoriels.

Il est possible aujourd’hui de compresser des images PNG grâce à des différents outils comme par exemple OptiPNG, PNGout, EWWW Image Optimizer
Les images JPEG sont des images compressées à l’enregistrement et sont par défaut généralement très légère.
Enfin, utilisez vos images à leurs tailles réelles, évitez au maximum de modifier leurs tailles en CSS ou en JS.

L’optimisation au niveau internationale

Si vous, ou votre entreprise, souhaitez que vos utilisateurs à travers le monde profitent de la meilleure expérience possible, l’utilisation d’un CDN est un must.
Mais un CDN, c’est quoi ? Pour comprendre facilement, une image parle mieux que mille mots.

How a CDN works
A gauche, un serveur avec un site internet sans CDN, à droite, un site internet avec CDN.

Lorsque le visiteur demande la page, le point CDN le plus proche distribue le contenu statique directement depuis son cache, sans faire appel à votre hébergement.

Vous pouvez paramétrer un temps de vie pour vos fichiers. Le point CDN vérifie cette information avant de distribuer les fichiers. Si le temps est expiré, il les redemande à votre hébergement.

L’utilisation d’un CDN à un coup, mais le retour sur investissement en vaudra la chandelle, et vos clients internationaux vous remercieront.

Plusieurs services proposent des CDN, rapprochez-vous d’eux pour trouver celui qui correspondra le mieux à vos besoins. En attendant, voici une liste non-exhaustive des plus utilisés :

  • Akamai
  • Amazon Cloudfront
  • Cloudflare

😇

E-commerce, avec peine et désespoir, optimisez le SEO des produits.

Avatar

Raphael Pernel

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.