Comment optimiser les performances d’un site

Optimiser les performances des pages d’un site est très bénéfique pour le site. Il devient plus rapide, et mieux référencé comme nous le rappelle cet article des bonnes pratique de développement. Un site trop lent peut vous faire perdre des visiteurs impatients. Adoptez donc les méthodes listées ci-après et votre site sera à la pointe de la performance.

Medias

Selon Google, 60% des octets transmis sur la toile seraient des images. Les médias sont les éléments les plus lourds à charger sur une page web, c’est pourquoi il faut les optimiser au maximum.

Les dimensions

Un site web, affiché sur un écran d’ordinateur, ne dépassera que très rarement les 2000 pixels de largeur. Il est donc inutile d’avoir des images au delà de cette valeur. Sur un écran de téléphone, on sera plutôt aux alentours de 500 pixels de largeur.

Je viens de prendre une photo avec un iPhone 15. Les dimensions sont de 5712 * 4284 pixels. Le poids de la photo est de 6,4 Mo. J’ai redimensionné cette photo, et maintenant elle fait 2000 * 1500 pixels pour un poids total de 1,2 Mo. On vient de diviser le poids de l’image par 5 ! Pour le rendu sur mobile, j’ai créé une image de 500 * 375 pixels pour un poids total de 88 Ko.

Note aux développeurs 💻 : Pour utiliser une image différente entre ordinateur et mobile, il faut utiliser l’attribut srcset de la balise image (<img>). Voir la documentation de l’attribut srcset.

Le format

Il existe différents formats pour une image, qu’on appelle aussi extensions. Chaque extension est utilisée en fonction des caractéristiques de l’image avec ses avantages et inconvénients.

Une photo va souvent être au format jpeg, ou png. Ces deux extensions sont des formats BITMAP. Pour chaque pixel, sa couleur est enregistrée dans le fichier de l’image. Donc vous l’aurez compris : plus il y a de pixels dans la photo, plus le fichier image est lourd. La différence principale entre ces deux extensions est que le PNG a une couche alpha supplémentraire qui permet d’avoir de la transparence dans une image.

Pour un logo avec quelques couleurs, on va privilégier le format SVG qui permet de changer les dimensions d’une image sans perte de qualité. En effet le Scalable Vector Graphics (en français « graphique vectoriel adaptable ») est un format composé de vecteurs (formules mathématiques). Il est donc beaucoup plus léger que les formats BITMAP et s’apparente au XML en terme de structure.

Les formats d’image sont assez anciens, la norme officielle et définitive du JPEG a été adoptée en 1992. Depuis de nouvelles générations de format ont vu le jour. On peut citer les extensions .webp et .avif qui permettent une réduction du poids de l’image entre 30 et 80%.

Reprenons la photo initiale prise avec un iPhone 15 qui faisait 6,4 Mo au format JPEG. Je la convertis en WebP, et elle atteint maintenant un poids de 5,4 Mo. L’image redimensionnée à 2000 px de 1,2 Mo, après conversion au format WebP fait maintenant 1 Mo.

Le format WebP est pris en compte par tous les navigateurs récents.
Le format AVIF est quasiment pris en compte par tous les navigateurs et permet un niveau supérieur d’optimisation.

Optimisations combinées

En redimensionnant les images de notre site et en les affichant au format WebP, on gagne un poids considérable, et ainsi chaque page se chargera plus rapidement. Le site aura de meilleures performances et le référencement n’en sera que renforcé.

Scripts & Styles

Les fichiers de style améliorent le rendu du site et sont indispensables pour développer un site à l’apparence moderne. Les scripts quant à eux permettent des interactions avancées lors de telles ou telles actions de l’internaute. Ces fichiers sont parfois lourds et leur multiplicité peut grandement ralentir un site. Il existe néanmoins quelques bonnes actions à faire pour optimiser ces fichiers.

La minification

Les fichiers CSS (pour le style) et JS (les scripts) sont composés de lignes de code. Le développeur par soucis de lisibilité, indente le code, passe des lignes et ajoute des commentaires. Mais les navigateurs web, n’ont pas besoin de tous ces éléments qui alourdissent le code inutilement. C’est pourquoi les développeurs créent des versions minifiées de leur code, dans lesquelles tous les éléments inutiles pour le rendu final ont été supprimés.

Ainsi, on gagne encore quelques octets sur chaque fichier appelé sur le site web.

L’agrégation

L’agrégation de fichiers, c’est le fait de les regrouper en un seul. Par exemple, un site charge 5 fichiers CSS : 1 fichier pour l’entête, 1 pour tout ce qui est commun, 1 pour les formulaires, 1 pour les pages, et 1 pour le pied de page. Si on les appelle tous un par un, cela fait 5 appels. Au lieu de cela, lors du développement, on agrège les fichiers pour en créer un unique qu’on fournira au navigateur.

Pourquoi fait-on ça ? Car le navigateur ne sait charger qu’un nombre limité de fichiers simultanément. De plus, chaque appel va provoquer un échange avec le serveur web, donc limiter ce nombre d’appels permet aussi d’être plus écologique.

Le chargement différé

Quand le navigateur rencontre un script dans le document HTML, il l’exécute directement en bloquant le rendu du reste de la page. Les scripts externes servent souvent à agrémenter les pages. C’est pourquoi on diffère leur chargement. Pour cela, on ajoute l’attribut defer à la balise script. L’ordre des scripts est quand même respecté.

Le chargement asynchrone

Les scripts déclarés comme asynchrones grâce à l’attribut async se chargent en arrière-plan et s’exécutent lorsqu’ils sont prêts. L’ordre des scripts n’est plus respecté, le premier script chargé est le premier exécuté.

Pour en savoir d’avantage sur le chargement différé et asynchrone, je vous conseille de lire cet article.

Caches

Lorsque vous visitez un site web, votre navigateur stocke les fichiers sur votre disque dur. Ainsi, lors de la prochaine visite, au lieu de faire appel au serveur web, votre navigateur utilise ceux qui sont sur votre propre ordinateur pour afficher plus rapidement la page. On appelle ça : le cache navigateur.

Les serveurs web peuvent eux aussi avoir une mise en cache, c’est exactement le même principe. Au lieu de créer les pages dynamiquement avec des appels en base de données, des versions statiques des pages sont retournées aux internautes. Ces pages s’affichent donc beaucoup plus vite.

Conclusion

L’optimisation des images est très importante car le gain de performance est conséquent. Et toute optimisation aussi minime soit-elle, permet de gagner en performances et donc en référencement. Comme nous le rappelle également cet article sur l’éco-conception, toutes les optimisations sont aussi bénéfiques pour notre belle planète.

J’espère vous avoir convaincu, optimisez les performances de votre site !