analyse-de-performance-animee

Analyse de performance animée

La qualité du mouvement est mesurable. « C'est fluide » et « c'est proche de la référence » sont des affirmations ; cette compétence les transforme en chiffres que vous pouvez reproduire la semaine suivante.

Deux tâches :

1. Performance : combien de temps chaque image prend, le poids de la page, et comment la page s'adapte quand l'appareil est lent. Guide : references/performance.md. Outil : scripts/frame-meter.js.
2. Notation par référence : à quel point une page est proche d'une référence ou de sa cible de conception, jugée équitablement. Guide : references/reference-grading.md. Outil : scripts/compare-sheet.mjs.

Démarrage rapide

Mesurer le temps par image sur n'importe quelle page

Ajoutez le compteur et ouvrez la page avec ?meter :

<script src="frame-meter.js" defer></script>

Un petit affichage indique p50, p95 et un niveau de qualité suggéré, et la console enregistre un résumé toutes les cinq secondes. Depuis la console, vous pouvez aussi exécuter :

frameMeter.start();          // commencer une mesure propre
// ...défiler la page, utiliser l'interaction principale...
frameMeter.report();         // { frames, p50, p95, p99, max, fps, longFrames, jank, suggest }

Mesurez sur l'appareil le plus lent qui vous importe, pas sur votre poste de travail. Défiler toute la page et utilisez l'interaction principale pendant la mesure, car les images inactives cachent les moments coûteux.

Construire une feuille côte à côte

node scripts/compare-sheet.mjs ./shots/nous ./shots/reference ./compare --labels "Nous,Référence"

Associe les images ayant le même nom de fichier, écrit compare.html (toujours) et compare.png (quand sharp est installé). Remettez la feuille aux évaluateurs comme décrit dans le guide de notation.

Les chiffres qui comptent

Mesure	Objectif	Pourquoi
Temps par image p95	16,7 ms ou moins sur l'appareil cible (60 Hz)	p95 est ce que les gens ressentent ; la médiane cache les à-coups
Temps par image p50	Bien en dessous de p95	Un grand écart signifie des pics : téléchargements, GC, compilation de shaders
Images longues (plus de 50 ms)	0 pendant le défilement	Chacune est un accroc visible
Poids de la page au premier écran	Moins de 3 Mo	Première impression sur données mobiles
Page entière	Moins de 10 Mo	Temps de chargement, coût des données, batterie
Largest Contentful Paint	Moins de 2,5 s	Afficher une image composée avant l'arrivée des ressources lourdes
Cumulative Layout Shift	Moins de 0,1	Les boîtes canvas et vidéo doivent réserver leur espace
Interaction to Next Paint	Moins de 200 ms	Les boucles de rendu lourdes ne doivent pas bloquer l'entrée

Les détails, les budgets par type de ressource et une échelle de qualité fonctionnelle sont dans references/performance.md.

Flux de travail

1. Référence. Chargez la page avec ?meter, défilez du haut en bas deux fois, utilisez l'interaction principale, puis lisez frameMeter.report(). Notez l'appareil, le navigateur, la zone d'affichage et les chiffres.
2. Trouvez la section coûteuse. Répétez par section avec frameMeter.start() au début de la section et report() après. La pire p95 est là où il faut travailler.
3. Corrigez la cause. Généralement : résolution de pixels de l'appareil trop élevée, passe de post-traitement en pleine résolution, trop d'appels de dessin, texture téléchargée en milieu de défilement, shader compilé à la première vue, ou rendu en arrière-plan. Voir le tableau de correctifs dans le guide de performance.
4. Ajoutez l'échelle. Même une page rapide a besoin d'un moyen de descendre sur un téléphone faible. Utilisez le snippet d'échelle continue : descendre d'un palier au-dessus de 22 ms p95, monter en dessous de 12 ms.
5. Re-mesurez de la même manière. Même appareil, même chemin, même durée. Rapportez avant et après.
6. Notez par rapport à la cible. Quand la page recrée un design ou un aspect de référence, construisez des feuilles à quatre moments et appliquez la méthode des trois évaluateurs dans references/reference-grading.md.

Format du rapport

Page : <nom>   Appareil : <modèle, navigateur>   Zone d'affichage : <l x h, DPR>
Chemin : défilement complet x2 + interaction principale, 60 s
Avant : p50 9,8 ms, p95 31,2 ms, images longues 6, poids 14,1 Mo
Après :  p50 7,1 ms, p95 15,9 ms, images longues 0, poids 8,7 Mo
Modifications : limitation DPR 1,5 sur téléphones, bloom à demi-résolution, textures héroïques en WebP 2048, shaders pré-compilés dans le chargeur
Échelle : paliers 0 à 3, se stabilise au palier 3 sur bureau, palier 2 sur le téléphone de test

Règles

• Rapportez p95, pas la FPS moyenne. Une moyenne de 58 fps peut cacher un à-coup chaque seconde.
• Une classe d'appareil par chiffre. Ne mélangez jamais une mesure sur ordinateur portable avec une mesure sur téléphone dans une même affirmation.
• Même chemin à chaque fois. Les mesures ne sont comparables que lorsque le chemin de défilement, l'interaction et la durée correspondent.
• Mesurez aussi le chargement à froid. La première vue compile les shaders et télécharge les textures. C'est là que vivent les images longues.
• Notez avec des preuves. Un verdict « proche » nécessite des feuilles à des moments appariés et des évaluateurs qui n'ont pas construit la page.

Connexe

• Rubrique de révision et contrôles qualité bloquants : ../motion-review/SKILL.md.
• Flux de travail artisanal et bibliothèque de techniques : ../motioncraft-builder/SKILL.md.