5 règles efficaces pour optimiser le temps de chargement d'une page

Vous souhaitez améliorer la vitesse de votre internet ? On vous explique dans cet article (sans trop de terme technique) comment y arriver.

Google a annoncé le 10 Novembre 2020 que les "Core Web Vitals" vont influencer le référencement de vos pages à partir de Mai 2021. L'article est disponible ici.

Pour résumer les "Core Web Vitals", c'est un peu comme une note qu'on donne à votre site pour voir s'il est en bonne santé. Il prend également en compte le chargement des pages. C'est la raison pour laquelle on vous en parle dans cet article.

1 - Les pages web statiques

Une page dite "static" est une page web qui a été générée dans un fichier.


Pour comprendre le fonctionnement de ces pages, commençons par expliquer comment fonctionne un CMS classique comme Wordpress par exemple.

Quand vous changez le texte d'une page de votre site web :

  1. Ce texte modifié se sauvegarde dans une base de données.
  2. Ce texte modifié est ensuite chargé depuis cette base de données pour pouvoir être affiché dans votre navigateur web.

Pour ce type de fonctionnement, on parle de page dynamique.

Les pages dynamiques prennent un temps considérable à se charger.

Grâce aux pages statiques, le chargement du texte modifié ne se fait pas depuis la base de données mais directement depuis un fichier avec toute la page web. Ce qui permet d'avoir un chargement ultra rapide !

Pour finir sur ce point, voici une image qui vulgarise le fonctionnement décrit ci-dessus.

Differences page statique dynamique

2 - Le code coverage

Technique qui analyse le code utilisé et inutilisé pour le chargement d'une page


Lorsqu'on arrive sur une page web, elle se met à charger plusieurs fichiers. Par exemple :

  • Google font -> la police utilisée
  • Google Analytics -> votre code de suivi pour analyser le trafic du site
  • Le style du site -> vos couleurs, la disposition du site, etc...
  • Le comportement du site -> exemple de comportement : lorsque je clique sur le bouton "envoyer ma demande", confirme ma demande de contact

Tous ces fichiers sont essentiels pour faire fonctionner correctement votre site internet et doivent être utilisés de manière optimisée.

Sans rentrer dans les détails techniques, une bonne pratique à considérer pour les développeurs est d'utiliser le moins de code possible ou de re-écrire nativement le code en "Javascript pur" (sans aucune dépendance).

Un téléphone n'a pas les mêmes performances qu'un ordinateur. C'est la raison pour laquelle cette optimisation est importante si vous souhaitez avoir un site fluide sur tous les supports.

Ci-dessous, un exemple de "code coverage" des fichiers d'une page :

Nom

Taille totale

Taille de code utilisé

Code coverage

styles.css

48.5 KB

12.0 KB

25 %

app.js

9.3 KB

4.1 KB

44 %

analytics.js

44.9 KB

19.6 KB

44 %

Plus la valeur du "code coverage" se rapproche de 100%, plus votre page est optimisée.

3 - Le lazy loading

Capacité d’un site internet à charger les bons éléments au bon moment


Prenons l'exemple du chargement d'une image lorsqu’elle est visible.

Imaginons que vous posséder une page avec beaucoup de photos. Si vous n'utilisez pas la technique du lazy loading, toutes vos images vont se charger au début et en même temps. Cela va tout simplement ralentir le chargement de votre page.

Le lazy loading peut être utilisé pour tout type d'éléments web mais il est surtout utilisé pour :

  • les images
  • les iframes

Comment implémenter le lazy loading pour votre site?

Votre développeur a plusieurs choix pour utiliser cette technique :

  • Le "native" à suivre de très près mais ne fonctionne pas parfaitement encore aujourd'hui (par exemple sur les iframes et les images SVG) et dépend encore des versions des navigateurs. Google nous détaille cette technique ici.
  • Le "IntersectionObserver" : très efficace mais ne fonctionne pas également avec tous les navigateurs, voir le support.
  • Une librairie externe : il en existe des centaines mais elles ne sont pas toujours toutes très bien optimisées et peuvent avoir un impact sur votre "code coverage" (technique précédente).

On remarque donc aujourd'hui qu'il n'y a pas encore de solution simple et optimisée. Il est donc nécessaire d'adapter cette solution en fonction du besoin de l'entreprise.

L'image ci-dessous est chargée grâce à la technique "IntersectionObserver".

Optimisation temps chargement page web lazy loading

4 - Optimiser les fichiers


Lorsque l'on souhaite optimiser ses pages web, le principe est de réduire le poids de celles-ci. Voici quelques techniques que vous pouvez appliquer sur vos fichiers :

  • GZIP : permet de compresser et de réduire la taille de n'importe quel fichier.
  • La minification : permet de compacter le code des fichiers CSS et Javascript.
  • Les photos au bon format et à la bonne taille : on vous donne quelques infos à ce sujet sur ce lien.
Optimisation temps chargement page web optimisation fichiers

5 - Le cache

Permet d'éviter de recharger un élément qui a déjà été chargé auparavant


Il existe de nombreux types de cache en web. Voici ceux qui nous intéressent le plus :

  • Le cache du navigateur : qui permet d'éviter de recharger vos images, votre CSS, votre Javascript et même vos pages HTML.
  • Le cache serveur : qui permet d'éviter de refaire des actions déjà faites auparavant. Les pages static sont une bonne alternative pour ne pas l'utiliser.

Le cache se paramètre tout simplement avec des règles que votre développeur va définir.

Un exemple de règle de cache : je souhaite mettre en cache le fichier "Google Analytics" 12 mois dans le navigateur pour éviter de le recharger les prochaines fois que j'irai sur le site internet.

👉 Vous souhaitez un renseignement technique sur votre site internet?

Articles en rapport


Partager cette page!


Chaque semaine dans votre boite mail, recevez un condensé de conseils et de nouveautés Snoweb !

Nous diffusons des cookies afin d'analyser le trafic sur ce site. Les informations concernant l'utilisation que vous faites de notre site nous sont transmises dans cette optique.