PrompTom
Усі скіли

Why the page is slow

page-speedPROperformanceoptimisation

Measures first, then fixes — and in the order that actually makes a difference.

Що робить

  • 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.

Навіщо він потрібен

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.

Куди покласти

  1. 1Створіть у проєкті теку .claude/skills/page-speed
  2. 2Покладіть у неї файл SKILL.md з текстом нижче
  3. 3Усе. Claude Code підключить скіл сам, коли задача підійде під опис

Щоб скіл працював в усіх проєктах, а не в одному, покладіть його в ~/.claude/skills замість теки проєкту.

Файл 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

Файл скіла входить у PRO-добірку

Відкрити доступ
Why the page is slow — PrompTom