Why the page is slow
page-speedPROperformanceoptimisation
Measures first, then fixes — and in the order that actually makes a difference.
Ce qu'il fait
- Triggers on “the site is slow”, “bad Lighthouse score”, “check the speed”.
- Forbids touching anything before a measurement: guesses about what is slow are usually wrong, and optimising the wrong thing costs a day and moves nothing.
- Measures on a slow device and a slow connection: a run on a fast machine over fibre says nothing about the phone people actually browse on.
- Reads three numbers and knows what each blames: largest paint blames an image or a font, layout shift blames something that arrived late without dimensions, interaction delay is almost always JavaScript.
- Fixes in order: do not send it, send it smaller, send it later, send it sooner. And forbids lazy-loading the largest paint element — that makes the number worse.
- Requires the number before, the number after, and the device they were measured on. A percentage with no baseline says nothing.
- Reverts a change that moved nothing: complexity bought for nothing is paid for by whoever reads the code next.
À quoi il sert
Speed usually gets fixed by following listicles, which produces a week of work and unchanged numbers. Order matters more than technique here: the fastest asset is the one never requested, and deleting an unused library almost always beats any compression setting. And the classic own goal is lazy-loading the very image the score is computed from.
Où le placer
- 1Créez le dossier .claude/skills/page-speed dans votre projet
- 2Placez-y un fichier SKILL.md avec le texte ci-dessous
- 3C'est tout. Claude Code charge le skill lui-même quand une tâche correspond à la description
Pour que le skill soit disponible dans tous vos projets et pas un seul, placez-le dans ~/.claude/skills au lieu du dossier du projet.
Fichier SKILL.md
# Making a page fast
Measure before changing anything. Most guesses about what is slow are
wrong, and optimising the wrong thing costs a day and moves nothing.
## Measure the right thing
Field data beats lab data. A Lighthouse run on a fast machine over
fibre says little about a mid-range phone on mobile data, which is what
most visitors are on. If there is no field data, throttle: mid-tier CPU,
slow 4G.
Look at three numbers and know what each blames:
- **Largest paint** — the biggest thing above the fold. Usually an
image, a webfont, or content waiting on a request.
- **Layout shift** — something arrived late and pushed the page around.
Almost always an image without dimensions, a late-loading font, or an
injected banner.
- **Interaction delay** — the main thread is busy. Almost always
JavaScript.
## Fix in this order
Le fichier de ce skill fait partie de la sélection PRO
Débloquer l'accès