Les performances sont un élément important de l'expérience utilisateur et affectent les métriques commerciales. Il est tentant de penser que si vous êtes un bon développeur, vous obtiendrez un site performant. Mais la vérité est que les 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 se compose d'un ensemble de limites imposées aux métriques qui affectent les performances du 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 de lancer 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.
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 à un problème et à évaluer les frameworks et les bibliothèques en fonction de leur taille et de leur coût d'analyse.
Choisir des métriques
Métriques basées sur la quantité ⚖️
Ces métriques sont utiles aux premières étapes du développement, car elles mettent en évidence l'impact de l'inclusion d'images et de scripts lourds. Elles 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, comme le poids de la page et le nombre de requêtes HTTP. Vous pouvez toutefois les diviser en limites plus précises, par exemple:
- Taille maximale des images
- Nombre maximal de polices Web
- Taille maximale des scripts, y compris des frameworks
- Nombre total de ressources externes, telles que les 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 le même poids peuvent s'afficher différemment selon l'ordre dans lequel les ressources sont demandées. Si une ressource critique, comme une image hero ou une feuille de style sur l'une des pages, est chargée tardivement dans le processus, les utilisateurs devront attendre plus longtemps pour voir quelque chose d'utile et percevront la page comme étant plus lente. Si les parties les plus importantes de l'autre page se chargent rapidement, les utilisateurs ne remarqueront peut-être même pas que le reste de la page ne le fait pas.
C'est pourquoi il est important de suivre un autre type de métrique.
Calendrier des jalons ⏱️
Les temps de jalon marquent les événements qui se produisent lors du chargement de la page, tels que l'événement DOMContentLoaded ou load. Les temps les plus utiles sont les métriques de performances centrées sur l'utilisateur qui vous renseignent sur l'expérience de chargement d'une page. Ces métriques sont disponibles via les API du 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.
La métrique 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 attendez un type d'interaction utilisateur sur la page, comme cliquer sur des liens ou des boutons, saisir du texte ou utiliser des éléments de formulaire.
Métriques basées sur des règles 💯
Lighthouse et WebPageTest calculent des scores de performances en fonction de règles générales de bonnes pratiques que vous pouvez utiliser comme référence. En prime, Lighthouse vous propose également des conseils pour des optimisations simples.
Pour obtenir les meilleurs résultats, suivez une combinaison de métriques de performances basées sur la quantité et axées sur l'utilisateur. Concentrez-vous sur les tailles des composants dans les premières phases d'un projet et commencez à suivre la FCP et le TTI dès que possible.
Établir une référence
Le seul moyen de savoir vraiment ce qui fonctionne le mieux pour votre site est de l'essayer : effectuez des recherches, puis testez vos conclusions. Analysez la concurrence pour voir où vous vous situez. 🕵️
Si vous n'avez pas le temps de le faire, voici quelques valeurs par défaut pour vous aider à vous lancer:
- Délai avant interactivité inférieur à 5 s
- Moins de 170 ko de ressources du chemin critique (compressées/minimisées)
Ces chiffres sont calculés en fonction d'appareils de référence réels et de la vitesse du réseau 3G. Plus de la moitié du trafic Internet passe aujourd'hui par les réseaux mobiles. Vous devez donc partir de la vitesse du réseau 3G.
Exemples de budgets
Vous devez définir un budget pour les différents types de pages de votre site, car leur contenu varie. Exemple :
- Notre page produit doit envoyer moins de 170 Ko de code JavaScript sur mobile
- Notre page de recherche doit inclure moins de 2 Mo d'images sur ordinateur
- Notre page d'accueil doit se charger et devenir interactive en moins de cinq secondes sur une connexion 3G lente sur un téléphone Moto G4
- Notre blog doit obtenir un score supérieur à 80 lors des audits de performances Lighthouse
Ajouter des budgets de performances à votre processus de compilation
Le choix de l'outil dépendra en grande partie de l'ampleur de votre projet et des ressources que vous pouvez consacrer à la tâche. Plusieurs outils Open Source peuvent vous aider à ajouter un budget à votre processus de compilation:
Si un élément dépasse un seuil défini, vous pouvez:
- Optimiser une fonctionnalité ou un composant existants 🛠️
- Supprimer un élément ou une fonctionnalité existants 🗑️
- Ne pas ajouter la nouvelle fonctionnalité ou le nouvel élément ✋⛔
Suivre les performances
Pour vous assurer que votre site est suffisamment rapide, vous devez continuer à le mesurer après le lancement initial. En surveillant ces métriques au fil du temps et en obtenant des données provenant d'utilisateurs réels, vous verrez comment les variations de performances ont un impact sur les métriques commerciales clés.
Conclusion
L'objectif d'un budget axé sur les performances est de vous assurer de vous concentrer sur les performances tout au long d'un projet. Le définir tôt vous aidera à éviter de revenir en arrière plus tard. Il doit vous servir 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 aux fonctionnalités ni à l'expérience utilisateur.🎯
Le guide suivant vous explique comment définir votre premier budget de performances en quelques étapes simples.