Les performances jouent un rôle important dans l'expérience utilisateur et ont une incidence sur les métriques commerciales. Il peut être tentant de penser que si vous êtes un bon développeur, vous finirez par obtenir un site performant. Mais en réalité, de bonnes performances sont rarement un effet secondaire. Comme pour la plupart des autres choses, pour atteindre un objectif, vous devez le définir clairement. Commencez par définir un budget de performances.
Définition
Un budget de performances 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. La définition d'un budget permet de lancer une discussion 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.
Le fait de disposer d'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 permet également aux développeurs de comparer différentes approches pour résoudre un problème, et d'é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 les quantités ⚖️
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 lourds. Ils sont également faciles à communiquer aux concepteurs et aux développeurs.
Nous avons déjà mentionné quelques éléments que vous pouvez inclure dans un budget de performances, tels que le poids 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, frameworks inclus
- Nombre total de ressources externes, telles que des scripts tiers
Toutefois, ces chiffres ne vous disent pas grand-chose sur l'expérience utilisateur. Deux pages ayant 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 essentielle, telle qu'une image de héros ou une feuille de style sur l'une des pages est chargée tardivement dans le processus, les utilisateurs vont patienter plus longtemps avant de voir quelque chose d'utile, et ils considèrent que la page est plus lente. Si les parties les plus importantes se chargent rapidement sur l'autre page, vous risquez de ne pas le remarquer si le reste de la page ne s'en aperçoit pas.
C'est pourquoi il est important d'effectuer le suivi d'un autre type de métrique.
Chronologie des jalons 🎄️
Les jalons marquent les événements qui se produisent pendant le chargement de la page, comme DOMContentLoaded ou load. Les délais les plus utiles sont les métriques de performances axées sur l'utilisateur, qui vous donnent des informations sur l'expérience de chargement d'une page. Ces métriques sont disponibles via les API pour les navigateurs et dans les rapports Lighthouse.
La métrique First Contentful Paint (FCP) mesure le moment où le navigateur affiche la première partie du contenu du DOM, comme du texte ou des images.
Le délai avant interactivité (TTI) mesure le temps nécessaire pour qu'une page devienne entièrement interactive et réponde de manière fiable aux entrées utilisateur. Il s'agit d'une métrique très importante à suivre si vous prévoyez une interaction de l'utilisateur sur la page, comme un clic sur des liens, des boutons, la saisie ou l'utilisation d'éléments de formulaire.
Métriques basées sur des règles 💯
Lighthouse et WebPageTest calculent les scores de performances en fonction de bonnes pratiques générales, que vous pouvez utiliser comme conseils. En prime, Lighthouse propose é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 axées sur la quantité et sur l'utilisateur. Concentrez-vous sur la taille des assets au cours des 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 savoir ce qui fonctionne le mieux pour votre site est de l'essayer, puis de faire des recherches et de tester vos découvertes. Analysez la concurrence pour savoir où vous vous situez. 🕵️
Si vous n'avez pas le temps pour cela, voici des chiffres par défaut qui vous aideront à vous lancer:
- Délai avant interactivité inférieur à 5 s
- Moins de 170 Ko de ressources de chemin critique (compressées/minifiées)
Ces chiffres sont calculés 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 est effectué sur les réseaux mobiles. Commencez donc par utiliser la vitesse du réseau 3G.
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 du produit doit contenir moins de 170 Ko de JavaScript sur mobile
- Notre page de recherche doit inclure moins de 2 Mo d'images sur ordinateur.
- La page d'accueil doit se charger et devenir interactive en moins de 5 s en 3G lente sur un téléphone Moto G4.
- Notre blog doit obtenir un score supérieur à 80 aux audits de performances Lighthouse
Ajoutez des budgets de performances à votre processus de création
Le choix d'un outil pour cela dépendra beaucoup de l'échelle de votre projet et des ressources que vous pouvez consacrer à la tâche. Il existe quelques outils Open Source qui peuvent vous aider à ajouter une budgétisation à votre processus de compilation:
Si un élément dépasse un seuil défini, vous avez deux possibilités:
- Optimisez une fonctionnalité ou un asset existants 🛠️
- Supprimer une fonctionnalité ou un asset existants 🗑️
- Ne pas ajouter la nouvelle fonctionnalité ou le nouvel asset 📈⛔
Suivre les performances
S'assurer que votre site est suffisamment rapide signifie que vous devez continuer d'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 commerciales clés.
Conclusion
L'objectif d'un budget de performance est de s'assurer que vous vous concentrez sur les performances tout au long d'un projet et que le définir tôt permet d'éviter le suivi ultérieur. Elle doit vous servir de référence pour déterminer les éléments à inclure dans votre site Web. L'idée principale est de définir des objectifs afin de pouvoir mieux équilibrer les performances sans nuire aux fonctionnalités ou à l'expérience utilisateur.
Le guide suivant vous aidera à définir votre premier budget de performances en quelques étapes simples.