Lorsque vous définissez un budget personnel, professionnel ou familial, vous fixez une limite à vos dépenses et vous vous assurez de ne pas la dépasser. 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 performances établi et appliqué, vous pouvez être sûr que votre site s'affichera le plus rapidement possible. Cela permettra d'améliorer l'expérience de vos visiteurs et d'avoir un impact positif sur les métriques de votre entreprise.
Voici comment définir votre premier budget de performances en quelques étapes simples.
Analyse préliminaire
Si vous essayez d'améliorer les performances d'un site existant, commencez par identifier les pages les plus importantes. Par exemple, il peut s'agir des pages qui génèrent le plus de trafic utilisateur ou d'une page de destination d'un produit.
Une fois que vous avez identifié vos pages clés, il est temps de les analyser. Nous allons d'abord nous concentrer sur les étapes clés de timing 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 Invité pour enregistrer ces deux temps :
Prenons l'exemple d'un moteur de recherche très spécialisé, Doggos.com. Doggos.com vise à indexer tout ce qui concerne les chiens sur Internet. Ses pages les plus importantes sont la page d'accueil et la page 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 |
| Mobile | FCP | TTI |
|---|---|---|
| Page d'accueil | 1 800 ms | 6 150 ms |
| Page de résultats | 1 100 ms | 7 870 ms |
Analyse de la concurrence
Une fois que vous avez analysé votre propre site, il est temps d'analyser ceux de vos concurrents. Comparer les résultats de sites Web semblables au vôtre est un excellent moyen de déterminer un budget de performances. Que vous travailliez sur un projet existant ou que vous partiez de zéro, il s'agit d'une étape importante. Vous obtenez un avantage concurrentiel lorsque vous êtes plus rapide que vos concurrents.
Si vous ne savez pas quels sites consulter, voici quelques outils à essayer :
- Mot clé "related:" de la recherche Google
- Fonctionnalité Sites similaires d'Alexa
- SimilarWeb
Pour obtenir une image réaliste, essayez de trouver une dizaine de concurrents.
Budget pour les étapes de minutage
Dans cet exemple, notre moteur de recherche spécialisé a quelques concurrents. 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 transite par les réseaux mobiles. L'utilisation des numéros de téléphone mobile par défaut profitera non seulement à vos utilisateurs mobiles, mais aussi à ceux qui utilisent un ordinateur.
Créez un graphique avec les temps FCP et TTI pour tous les sites Web similaires, et mettez en évidence le plus rapide. Un graphique comme celui-ci vous permet de mieux comprendre les performances de votre site Web par rapport à celles de vos concurrents.
| 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 |
Il y a toujours une marge de progression possible. Une bonne règle à suivre est la règle des 20 %. Les études montrent que les utilisateurs perçoivent une différence de temps de réponse lorsqu'elle est supérieure à 20 %. Cela signifie que si vous voulez être nettement 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 |
Si vous essayez d'optimiser un site existant, cet objectif peut sembler impossible à atteindre. Cela ne signifie pas que vous devez abandonner. Commencez par de petits pas et définissez un budget 20 % plus rapidement que votre vitesse actuelle. Continuez ensuite à optimiser vos campagnes.
Pour Doggos.com, un budget révisé pourrait se présenter comme suit.
| Mesurer | Heure actuelle | Budget initial (20 % plus rapide que la durée actuelle) | 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 |
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 délais des jalons. Nous allons maintenant en ajouter deux :
- 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é
Quel que soit le poids total de la page, essayez de fournir moins de 170 Ko de ressources du chemin critique (compressées/minifiées). Cela garantit que votre site Web sera rapide, même sur des appareils peu coûteux et avec une connexion 3G lente.
Vous pouvez prévoir un budget plus important pour l'expérience sur ordinateur, mais ne vous emballez pas. Selon les données HTTP Archive de l'année dernière, le poids médian des pages sur ordinateur et sur mobile est supérieur à 1 Mo. Pour obtenir un site Web performant, vous devez viser bien en dessous de ces chiffres médians.
Voici quelques exemples basés sur les budgets TTI :
| Réseau | Appareil | JS | Images | CSS | HTML | Polices | Total | Budget "Time to Interactive" |
|---|---|---|---|---|---|---|---|---|
| 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 |
| Wi-Fi | 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 Web d'e-commerce avec de nombreuses photos de produits est très différent d'un portail d'actualités qui est principalement textuel. Si vous diffusez des annonces ou utilisez des outils d'analyse sur votre site, la quantité de code JavaScript que vous envoyez augmente.
Utilisez le tableau ci-dessus comme point de départ et ajustez-le en fonction du type de contenu avec lequel vous travaillez. Définissez le contenu de vos pages, examinez vos recherches et faites une estimation éclairée de la taille de chaque composant. Par exemple, si vous créez un site Web avec de nombreuses images, définissez des limites plus strictes pour la taille du fichier JS.
Une fois que votre site Web fonctionne, vérifiez vos performances au niveau des métriques axées sur l'utilisateur et ajustez votre budget.
Budget pour les métriques basées sur des règles
Les scores Lighthouse sont des métriques basées sur des règles très efficaces. Lighthouse évalue votre application dans cinq catégories, dont les performances. Les scores de performances sont calculés sur la base de cinq métriques différentes, y compris First Contentful Paint et Time to Interactive.
Lorsque vous essayez de créer un site de qualité, définissez un budget de score de performances Lighthouse d'au moins 85 (sur 100). Utilisez Lighthouse CI pour l'appliquer aux requêtes d'extraction.
Définir des priorités
Demandez-vous quel niveau d'interaction vous attendez sur votre site. Si le site Web est un site d'actualités, l'objectif principal des utilisateurs est de lire du contenu. Vous devez donc vous concentrer sur un rendu rapide et un FCP faible. Les visiteurs de Doggos.com veulent cliquer sur des liens pertinents le plus rapidement possible. La priorité est donc de réduire le TTI.
Découvrez exactement quelle partie de votre audience navigue sur ordinateur et sur mobile, et définissez vos priorités en conséquence. Pour le savoir, vous pouvez consulter le tableau de bord du rapport sur l'expérience utilisateur Chrome, qui vous indique ce que votre audience fait sur les sites Web de vos concurrents.
Étapes suivantes
Assurez-vous que votre budget de performances est appliqué tout au long du projet et intégrez-le à votre processus de compilation.