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

1. Les pages web statiques

Une page dite "statique" 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 !

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 :

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".

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.

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 statiques 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.