Votre premier budget de performances

Lorsque vous définissez un budget personnel, professionnel ou familial, vous limitez vos dépenses et vous vous assurez de ne pas dépasser ce budget. Les budgets de performances fonctionnent de la même manière, mais pour les métriques qui affectent les performances du site Web.

Avec un budget de performance défini et appliqué, vous pouvez être sûr que votre site s'affichera le plus rapidement possible. Les visiteurs bénéficieront ainsi d'une meilleure expérience et les statistiques d'entreprise auront un impact positif.

Voici comment définir votre premier budget de performances en quelques étapes simples.

Si vous essayez d'améliorer les performances d'un site existant, commencez par identifier les pages les plus importantes. Il peut s'agir, par exemple, de pages enregistrant le plus de trafic utilisateur ou d'une page de destination de produit.

Une fois que vous avez identifié vos pages clés, il est temps de les analyser. Tout d'abord, nous allons nous concentrer sur les jalons de calendrier qui mesurent le mieux l'expérience utilisateur.

Lighthouse se trouve dans le panneau "Audits" des outils pour les développeurs Chrome. Exécutez des audits sur chaque page dans une fenêtre en mode Invité pour enregistrer les deux événements suivants:

Panneau Lighthouse dans les outils pour les développeurs Chrome

Prenons l'exemple d'un moteur de recherche hautement spécialisé, Doggos.com. L'objectif du site Doggos.com est d'indexer tout ce qui concerne les chiens sur Internet. Ses pages les plus importantes sont les pages d'accueil et de résultats. Voici les valeurs FCP et TTI mesurées pour le site sur ordinateur et sur mobile.

Ordinateur FCP TTI
Page d'accueil 1 680 ms 5 550 ms
Page de résultats 2 060 ms 6 690 ms
Analyse du site Doggos.com sur ordinateur
Mobile FCP TTI
Page d'accueil 1 800 ms 6 150 ms
Page de résultats 1 100 ms 7 870 ms
Analyse mobile de Doggos.com

Analyse de la concurrence

Une fois que vous avez analysé votre propre site, il est temps d'analyser ceux de vos concurrents. La comparaison des résultats de sites Web semblables au vôtre est un excellent moyen de définir un budget de performances. Que vous travailliez sur un projet établi ou que vous repartiez de zéro, il s'agit d'une étape importante. Vous obtenez un avantage concurrentiel si vous êtes plus rapide que vos concurrents.

Si vous ne savez pas sur quels sites examiner, essayez les outils suivants:

  1. Le mot clé "related:" de la recherche Google
  2. Fonctionnalité Sites similaires d'Alexa
  3. SimilarWeb

Capture d'écran de la recherche Google avec le mot clé associé

Pour obtenir une image réaliste, essayez de trouver une dizaine de concurrents.

Définir un budget pour les jalons de calendrier

Dans cet exemple, notre moteur de recherche spécialisé a quelques concurrents, et nous allons nous concentrer sur l'optimisation de la page d'accueil pour les appareils mobiles. Aujourd'hui, plus de la moitié du trafic Internet provient de réseaux mobiles. L'utilisation par défaut des numéros de mobile profitera non seulement aux mobinautes, mais aussi aux internautes.

Créez un graphique avec des valeurs FCP et TTI pour tous les sites Web similaires et mettez en évidence le plus rapide du groupe. Un tableau comme celui-ci vous donne une idée plus précise des performances de votre site Web par rapport à la concurrence.

Site/Page d'accueil FCP TTI
goggles.com 880 ms 3 150 ms
Doggos.com 1 800 ms 6 500 ms
quackquackgo.com 2 680 ms 4 740 ms
ding.xyz 2 420 ms 7 040 ms
Analyse de la concurrence de Doggos.com sur le réseau 3G
Doggo devant un ordinateur
Doggos.com semble bien fonctionner par rapport à la métrique FCP, mais est sérieusement à la traîne par rapport à l'indicateur à l'appui

Il existe une marge de progression. La règle des 20% constitue une ligne directrice pour cela. Des études indiquent que les utilisateurs reconnaissent une différence de temps de réponse supérieure à 20%. Cela signifie que si vous voulez être visiblement meilleur que le meilleur site comparable, vous devez être au moins 20% plus rapide.

Mesurer Heure actuelle Budget (20% plus rapide que la concurrence)
FCP 1 800 ms 704 ms
TTI 6 500 ms 2 520 ms
Un budget axé sur les performances qui permettrait à Doggos.com de prendre une longueur d'avance sur ses concurrents

Si vous tentez d'optimiser un site existant, cet objectif peut vous sembler impossible à atteindre. Ce n'est pas un signe d'abandon. Commencez par de petits pas et définissez un budget 20% plus rapide que votre vitesse actuelle. Poursuivez l'optimisation à partir de là.

Pour Doggos.com, un nouveau budget pourrait ressembler à ceci.

Mesurer Heure actuelle Budget initial (20% plus rapide que le budget actuel) Objectif à long terme (20% plus rapide que la concurrence)
FCP 1 800 ms 1 440 ms 704 ms
TTI 6 500 ms 5 200 ms 2 520 ms
Révision du budget de performance de Doggos.com

Combiner différentes métriques

Un budget de performances solide combine différents types de métriques. Nous avons déjà défini le budget pour les échéances des jalons et nous allons maintenant en ajouter deux autres:

  • métriques basées sur la quantité
  • métriques basées sur des règles

Budget pour les métriques basées sur la quantité

Quelle que soit la taille totale de la page que vous obtenez, essayez de fournir moins de 170 Ko de ressources pour le chemin critique (compressées/minimisées). Ainsi, votre site Web sera rapide, même sur des appareils peu coûteux et une connexion 3G lente.

Vous pouvez avoir un budget plus élevé pour l'expérience de bureau, mais ne vous déchaînez pas. D'après les données HTTP Archive de l'année dernière, la taille médiane des pages sur ordinateur et sur mobile est supérieure à 1 Mo. Pour obtenir un site Web performant, votre objectif doit être bien inférieur à ces valeurs médianes.

Voici quelques exemples basés sur les budgets du TTI:

Réseau Appareil JS Images CSS HTML Polices Total Budget "Délai avant interactivité"
3G lente Moto G4 100 30 10 10 20 ~ 170 Ko 5 s
4G lente Moto G4 200 50 35 30 30 ~ 345 Ko 3 s
WiFi Ordinateur 300 250 50 50 100 ~750 Ko 2s

Définir un budget basé sur des métriques de quantité est une tâche délicate. Un site d'e-commerce avec de nombreuses photos de produits est très différent d'un portail d'actualités qui contient principalement du texte. La présence d'annonces ou d'analyses sur votre site augmente la quantité de JavaScript que vous envoyez.

Utilisez le tableau ci-dessus comme point de départ et effectuez les ajustements nécessaires en fonction du type de contenu sur lequel vous travaillez. Définissez le contenu de vos pages, examinez vos recherches et faites une supposition éclairée de la taille de chaque élément. Par exemple, si vous créez un site Web contenant de nombreuses images, définissez des limites plus strictes concernant la taille de JavaScript.

Une fois que vous disposez d'un site Web opérationnel, examinez vos performances par rapport aux métriques de performances axées sur les utilisateurs et ajustez votre budget.

Budget pour les métriques basées sur des règles

Les scores Lighthouse sont les métriques basées sur des règles très efficaces. Lighthouse classe votre application dans cinq catégories, dont les performances. Les scores de performances sont calculés en fonction de cinq métriques différentes, à savoir "First Contentful Paint" et "Time to Interactive".

Lorsque vous essayez de créer un site de qualité, définissez le budget pour le score de performances Lighthouse sur au moins 85 (sur 100). Utilisez l'intégration continue Lighthouse pour l'appliquer aux demandes d'extraction.

Hiérarchiser

Demandez-vous quel niveau d'interaction vous attendez sur votre site. S'il s'agit d'un site Web d'actualités, le principal objectif des utilisateurs est de lire le contenu. Vous devez donc vous concentrer sur l'affichage rapide et maintenir un FCP faible. Les visiteurs de Doggos.com souhaitent cliquer sur les liens pertinents dès que possible. La priorité absolue est donc faible.

Identifiez précisément la partie de votre audience qui navigue sur ordinateur ou sur appareil mobile, et définissez les priorités en conséquence. Pour cela, vous pouvez vérifier ce que fait votre audience sur les sites Web de vos concurrents, via le tableau de bord du rapport d'expérience utilisateur Chrome.

Données de distribution des appareils issues du rapport sur l'expérience utilisateur Chrome
Données de distribution des appareils issues du rapport d'expérience utilisateur Chrome

Étapes suivantes

Assurez-vous que votre budget de performance est appliqué tout au long du projet et intégrez-le dans votre processus de compilation.