Web et frontend · Avancé

Performances dans le navigateur : ce qui ralentit vraiment un site

En une ligne : Dans la plupart des sites lents, le coupable n'est pas le code mais le poids — grandes images, polices et scripts tiers.

Les trois suspects habituels

Images. Un fichier de trois mégaoctets affiché à 400 pixels est le gaspillage le plus courant sur le web. Servez dans des tailles adaptées, en formats modernes et avec un chargement paresseux pour tout ce qui est sous la ligne de flottaison.

Polices. Quatre graisses dans deux familles ajoutent de l'attente et du scintillement du texte. Deux suffisent presque toujours.

Scripts tiers. Analyses, chat, pixels marketing. Chacun paraît petit ; ensemble, ils représentent généralement la plus grande partie du temps d'exécution. Comptez-les une fois par trimestre et supprimez ce que personne ne consulte.

Mesurer ce que ressent l'utilisateur

Trois choses comptent pour l'utilisateur : quand le contenu principal est apparu, avec quelle rapidité la page a réagi au premier toucher, et combien la mise en page a bougé pendant le chargement. Les deux premières sont bien connues ; la troisième est la cause numéro un de la sensation de site bas de gamme.

Mesurez sur un appareil milieu de gamme et un réseau cellulaire, pas sur votre machine de développement connectée en fibre.

Améliorations par ordre décroissant de retour

Compression et livraison depuis un réseau ; dimensions explicites pour les images afin d'éviter les décalages ; report des scripts non nécessaires au premier rendu ; découpage du code afin que chaque page ne charge que ce dont elle a besoin.

Pour aller plus loin

Fixez un budget de performances — un poids maximum de page et un nombre de requêtes — et faites-le respecter lors de la construction. Sans budget, le site grossit silencieusement sur des mois, et chaque ajout isolé semble toujours négligeable.