Labels.io
Agent skills

Perf audit

Run when the user asks "is my site fast?" or reports slowness. Keeps the kit's Core Web Vitals green.

What to check

Images

  • Every <img> has explicit width and height attributes (prevents CLS).
  • Large hero images are compressed (WebP or AVIF, <100KB).
  • Images below the fold use loading="lazy".
  • Decorative images use decoding="async".

Fonts

  • Self-host critical fonts or preconnect to the provider.
  • Use font-display: swap to avoid invisible text.
  • Limit weights: two or three is plenty.

JavaScript bundle

  • Run pnpm build and inspect dist/. Main chunk under ~200KB gzipped.
  • Heavy libraries are code-split or removed (check for unused deps).
  • No third-party scripts in <head> that block render.

CSS

  • Tailwind v4 only ships used utilities.
  • No duplicate CSS files loaded.
  • Critical above-the-fold styles rendered inline if needed (TanStack Start handles most of this).

Network

  • HTTPS + HTTP/2 or HTTP/3 at the host.
  • Static assets have long cache headers.
  • Avoid render-blocking requests.

Core Web Vitals targets

  • LCP (Largest Contentful Paint) < 2.5s
  • INP (Interaction to Next Paint) < 200ms
  • CLS (Cumulative Layout Shift) < 0.1

How to run

  1. pnpm build succeeds; note bundle sizes from the output.
  2. Run Lighthouse Performance audit in Chrome devtools (mobile + desktop). Target 90+.
  3. Test on slow 3G throttling.
  4. Check each route, not just the landing page.

Common fixes (safe to apply)

  • Add width/height to <img>.
  • Add loading="lazy" to below-fold images.
  • Replace PNG hero with WebP.
  • Remove unused imports.

Needs user input

  • Heavy third-party script (chat widget, analytics that blocks)? Ask if they want to defer it or remove it.
  • Large hero image they care about? Offer: compress, crop, or replace with a lighter alternative.
  • A dependency that added >50KB? Check if it is still needed; propose removal.

Report format

Fixed inline:
- Added width/height to 3 images on landing page
- Set loading="lazy" on below-fold blog images

Needs your input:
- analytics script adds 80KB; defer or remove?
- hero.png is 1.2MB; can we replace with a WebP under 100KB?

On this page