Les performances représentent une part importante de l'expérience utilisateur et ont une incidence sur les métriques métier. Il est tentant de penser que si vous êtes un bon développeur, vous vous retrouverez avec un site performant, mais la vérité est que de bonnes performances sont rarement un effet secondaire. Comme pour la plupart des choses, pour atteindre un objectif, vous devez le définir clairement. Commencez le parcours en définissant un budget de performances.
Définition
Un budget de performance est un ensemble de limites imposées aux métriques qui affectent les performances d'un site. Il peut s'agir de la taille totale d'une page, du temps de chargement sur un réseau mobile ou même du nombre de requêtes HTTP envoyées. Définir un budget permet d'engager la conversation sur les performances Web. Il sert de point de référence pour prendre des décisions concernant la conception, la technologie et l'ajout de fonctionnalités.
Avoir un budget permet aux concepteurs de réfléchir aux effets des images haute résolution et au nombre de polices Web qu'ils choisissent. Il aide également les développeurs à comparer différentes approches pour résoudre un problème, et à évaluer les frameworks et les bibliothèques en fonction de leur taille et du coût d'analyse.
Choisir des métriques
Métriques basées sur la quantité ⚖️
Ces métriques sont utiles dans les premières étapes du développement, car elles mettent en évidence l'impact de l'inclusion d'images et de scripts volumineux. Ils sont également faciles à communiquer avec les concepteurs et les développeurs.
Nous avons déjà indiqué quelques éléments que vous pouvez inclure dans un budget de performances, comme la taille de la page et le nombre de requêtes HTTP, mais vous pouvez les diviser en limites plus précises, par exemple:
- Taille maximale des images
- Nombre maximal de polices Web
- Taille maximale des scripts, y compris les frameworks
- Nombre total de ressources externes, telles que des scripts tiers
Cependant, ces chiffres ne vous disent pas grand-chose sur l'expérience utilisateur. Deux pages avec le même nombre de requêtes ou la même pondération peuvent s'afficher différemment selon l'ordre dans lequel les ressources sont demandées. Si une ressource critique, telle qu'une image de héros ou une feuille de style sur l'une des pages, est chargée tard dans le processus, les utilisateurs attendent plus longtemps pour voir quelque chose d'utile et perçoivent la page comme plus lente. Si les parties les plus importantes se chargent rapidement sur l'autre page, il se peut même qu'ils ne s'en aperçoivent pas.
C'est pourquoi il est important de surveiller un autre type de métrique.
Délais pour les jalons 🏠
Les codes temporels des jalons marquent les événements qui se produisent pendant le chargement de la page, tels que les événements DOMContentLoaded ou load. Les métriques de performances axées sur l'utilisateur sont les périodes les plus utiles. Elles donnent des informations sur l'expérience de chargement d'une page. Ces métriques sont disponibles via les API de navigateur et dans les rapports Lighthouse.
La métrique First Contentful Paint (FCP) mesure le moment où le navigateur affiche le premier élément de contenu du DOM, comme du texte ou des images.
Le délai d'interaction (TTI) mesure le temps nécessaire pour qu'une page devienne entièrement interactive et réponde de manière fiable à une entrée utilisateur. Il s'agit d'une métrique très importante à suivre si vous attendez une interaction de l'utilisateur sur la page (clic sur des liens, bouton, saisie ou utilisation d'éléments de formulaire, par exemple).
Métriques basées sur les règles Ю
Lighthouse et WebPageTest calculent les scores de performance en fonction des bonnes pratiques générales, que vous pouvez utiliser comme référence. En prime, Lighthouse fournit également des conseils pour des optimisations simples.
Vous obtiendrez de meilleurs résultats si vous effectuez le suivi d'une combinaison de métriques de performances basées sur la quantité et sur l'utilisateur. Concentrez-vous sur la taille des actifs dans les premières phases d’un projet et commencez à suivre le FCP et le TTI dès que possible.
Établir une référence
La seule façon de vraiment savoir ce qui fonctionne le mieux pour votre site est de l'essayer, d'effectuer des recherches, puis de tester vos résultats. Analysez vos concurrents pour savoir où vous vous situez. 🕵️
Si vous n'avez pas le temps, voici quelques chiffres par défaut qui vous aideront à démarrer:
- Délai avant interactivité inférieur à 5 s
- Moins de 170 Ko de ressources de chemin critique (compressées/minifiées)
Ces valeurs sont calculées sur la base des appareils de référence réels et du débit du réseau 3G. Aujourd'hui, plus de la moitié du trafic Internet provient des réseaux mobiles. Vous devez donc utiliser le débit du réseau 3G comme point de départ.
Exemples de budgets
Vous devez prévoir un budget pour les différents types de pages de votre site, car le contenu peut varier. Exemple :
- La page de notre produit doit contenir moins de 170 Ko de code JavaScript sur mobile
- Sur les ordinateurs, notre page de recherche doit inclure moins de 2 Mo d'images.
- Notre page d'accueil doit se charger et devenir interactive en moins de 5 s en cas de 3G lente sur un téléphone Moto G4.
- Notre blog doit obtenir un score supérieur à 80 aux audits de performances Lighthouse
Ajouter des budgets de performances à votre processus de compilation
Le choix d'un outil pour cela dépendra beaucoup de l'échelle de votre projet et des ressources que vous pouvez y dédier. Il existe quelques outils Open Source qui peuvent vous aider à budgétiser votre processus de création:
Si un événement dépasse un seuil défini, vous avez deux possibilités:
- Optimiser une fonctionnalité ou un élément existant 🛠️
- Supprimer une fonctionnalité ou un élément existant 🗑️
- Ne pas ajouter la nouvelle fonctionnalité ou le nouvel élément 🏏⛔
Suivre les performances
Si votre site est suffisamment rapide, vous devez continuer à effectuer des mesures après le lancement initial. En surveillant ces métriques au fil du temps et en obtenant des données auprès d'utilisateurs réels, vous pourrez déterminer l'impact des variations de performances sur les métriques clés de votre activité.
Conclusion
L'objectif d'un budget de performance est de vous assurer que vous vous concentrez sur les performances tout au long d'un projet et le définir tôt permettra d'éviter tout retour en arrière par la suite. Il s'agit du point de référence pour vous aider à déterminer ce que vous devez inclure sur votre site Web. L'idée principale est de définir des objectifs afin de mieux équilibrer les performances sans nuire à la fonctionnalité ou à l'expérience utilisateur. {8/}
Le guide suivant vous explique comment définir votre premier budget de performances en quelques étapes simples.