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é est sauvegardé dans une base de données.
2. Ce texte modifié est ensuite chargé depuis cette base de données afin d’ê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 contenant toute la page web, ce qui permet d’avoir un chargement ultra-rapide !

2. Le code coverage

Technique qui analyse le code utilisé et le code inutilisé lors du chargement d’une page

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

• Google Fonts → 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 : lorsque je clique sur le bouton « envoyer ma demande », il 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 réé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édiez 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 il ne fonctionne pas encore parfaitement aujourd’hui (par exemple pour les iframes et les images SVG) et dépend des versions des navigateurs. Google détaille cette technique ici.
• Le "IntersectionObserver" : très efficace, mais il ne fonctionne pas non plus avec tous les navigateurs. Voir le support.
• Une librairie externe : il en existe des centaines, mais elles ne sont pas toujours 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

Lorsqu’on souhaite optimiser ses pages web, il s’agit 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 déjà chargé.

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

• Le cache du navigateur : il permet d’éviter de recharger vos images, votre CSS, votre JavaScript et même vos pages HTML.
• Le cache serveur : il permet d’éviter de refaire des actions déjà effectuées. Les pages statiques sont une bonne alternative pour ne pas l’utiliser.

Le cache se paramètre 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 » pendant 12 mois dans le navigateur, pour éviter de le recharger lors de mes prochaines visites sur le site.