Retour

Poids des ressources

Qu'est-ce que le poids des ressources ?

Le poids des ressources correspond aux octets à télécharger par le navigateur pour récupérer tous les éléments nécessaires à la page (styles CSS, scripts JavaScript, images etc).

On distingue le poids réel de la ressource du poids transféré. Le poids réel correspond à la taille brute du fichier (l'espace qu'il occupe en mémoire ou sur un disque dur) quant au poids transféré, il s'agit de l'espace qu'il occupe après compression. Généralement les serveurs WEB compressent les ressources avant de les envoyer afin de diminuer la bande passante nécéssaire à leur téléchargement, puis les navigateurs décompressent celles-ci après réception afin de les restituer.

Pourquoi est-il important ?

Plus le nombre de ressources à charger est important, plus le poids global de celles-ci l'est également et prend du temps au navigateur pour tout récupérer. De même, le navigateur peut limiter les connexions simultanées vers un même site et met en attente les autres connexions, ce qui rallonge davantage le délai nécessaire au chargement de la page. Intégrer beaucoup de ressources à une page impacte donc directement sur la rapidité de chargement de celle-ci, surtout si l'utilisateur ne dispose pas d'une bonne connexion internet, ou s'il se trouve sur un téléphone avec une connexion limitée.

Comment le rendre acceptable ?

Au delà de toutes les méthodes pour diminuer le poids des ressources (compression des images, minification des styles CSS etc.), il est recommandé de :

  • ne pas dépasser un poids global à transférer de 4 Mo
  • restreindre au maximum le nombre de ressources à charger
  • privilégier une page simple et rapide, où l'information que cherche l'utilisateur est clairement accessible, à une page lourde et riche d'éléments visuels l'éloignant de sa quête d'information
  • charger les éléments dynamiques lors du déclenchement par l'utilisateur, par exemple, si le fait de cliquer sur un bouton fait apparaitre une fenêtre modale avec une image, charger l'image lors du clique et non à l'avance