Performance

Web Performance

> Ship under budget: LCP ≤2.5s, CLS ≤0.1, INP ≤200ms — measured in the field, not on your machine.

Core Web Vitals Targets

• LCP (Largest Contentful Paint): ≤2.5s (good), ≤4s (needs improvement), >4s (poor)
• CLS (Cumulative Layout Shift): ≤0.1 (good), ≤0.25 (needs improvement)
• INP (Interaction to Next Paint): ≤200ms (good), ≤500ms (needs improvement)
• FCP (First Contentful Paint): ≤1.8s target
• TTFB (Time to First Byte): ≤800ms target

Measure in field conditions (Chrome UX Report), not just local dev.

Images

• Every ` has explicit width and height` attributes to prevent CLS.
• Lazy-load all below-the-fold images (loading="lazy").
• Hero/LCP images: loading="eager", fetchpriority="high", preloaded in ``.
• Use WebP/AVIF with JPEG/PNG fallback.
• Serve at display size — never load a 2000px image for a 400px slot.
• Alt text on all images; use empty alt="" for decorative images.

Fonts

• font-display: swap or optional — never block.
• Preload critical fonts in ` with correct crossorigin` attribute.
• Subset fonts to character sets actually used. (Typeface count and scale rules live in design-standards:design-system.)

JavaScript Bundles

• Route-level code splitting — each route loads its own chunk.
• Third-party scripts: defer or async — never block render.
• Unused dependencies audited and removed before ship.
• Bundle size budget: initial JS ≤200KB gzipped, per-route ≤100KB gzipped.

Caching

• Static assets: Cache-Control: public, max-age=31536000, immutable (with content hash in filename).
• API responses: appropriate max-age, stale-while-revalidate where applicable.
• HTML: Cache-Control: no-cache (validate on every request).

SSR/Hydration (Next.js/Nuxt/etc.)

• Avoid hydration mismatches — server and client must produce identical initial HTML.
• Use streaming where supported — do not block the entire page on slow data.
• Avoid useEffect for data that can be server-rendered.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: pixelcrafts-app
• Source: pixelcrafts-app/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.