web-perf

Installation
SKILL.md

Web Performance: the first load of a route

Diagnose and fix what a user sees on a route's first load. Two territories:

  • Hand-wired loading - @font-face written by hand, fonts pulled from a hosted CDN (Google Fonts), native <img>, resource hints in your own document head. No framework layer is doing it for you, so you must - and must verify it yourself.
  • The rendering path itself - streamed shells, Suspense fallbacks and the skeleton-to-content swap, hydration timing, router-level pending states. Here the framework's rendering model is the mechanism, and the lever is where you place boundaries and what the fallback reserves.

Where a framework does automate the fix (Next's next/font/next/image, Astro's Fonts API), defer to that layer's own output - but app code wrapping it stays in scope (references/framework-automation.md).

Out of scope

Installs
5
GitHub Stars
18
First Seen
Jul 22, 2026