Performance Budgets and Core Web Vitals

Purpose

⚠IMPORTANT⚠This skill enforces strictly bound maximum byte thresholds ($T \le 100\text{KB}$) and CWV algorithmic optimization targets. It prevents the network transmission of unoptimized execution payloads.

When to Use This Skill

⚠NOTE⚠Use this skill whenever deciding on a frontend architecture, adding heavy third-party libraries, or auditing an existing codebase for speed.

What This Skill Prevents

This skill prevents:

• Unconstrained Bundle Allocation: Emitting $N > 1\text{MB}$ JS payload vectors to client-side parse queues.
• Layout Matrix Shift (CLS): Emitting dynamic DOM nodes without pre-allocating deterministic bounding box coordinates (width/height).
• Render Pipeline Blocking (LCP): Sating the main execution thread with synchronous blocking assets, delaying the primary AST paint.
• Event Loop Starvation (INP): Executing computationally intensive synchronous tasks that block interaction listeners ($T > 200\text{ms}$).

Core Principle

Optimization algorithms MUST prioritize $O(1)$ LCP rendering paths. Non-critical AST execution vectors MUST be deferred or dynamically imported. Space allocation in the render tree MUST be deterministically reserved before asset fetch resolution.

Research-Backed Rules

• LCP Optimization Heuristics: Execute deterministic preload algorithms on the primary viewport element ($N=1$ Hero Node). Exclude client-side rendering functions for all nodes positioned above the fold. Transcode all raw pixel data to WebP or AVIF formats.
• CLS Zero-Variance Constraints: Inject explicit geometric coordinates (width and height properties) into all raster and vector media tags. Generating dynamically sized DOM nodes prior to asset retrieval is prohibited.
• INP Main Thread Execution Blockers: Interaction to Next Paint constraints are strictly active. Force segmentation of all main-thread JS operations to ensure $T \le 200\text{ms}$ bounds for event loop interaction handlers. Deeply nested synchronous calculations must be ejected into Web Workers or fragmented via Scheduler APIs.
• Soft Navigation Instrumentation (2026): Track LCP and INP budgets during virtual DOM route transitions without hard HTML document fetches. SPA transitions must comply with baseline physical initialization limits.
• Script Deferral Matrix: Eject third-party analytic / telemetry scripts from the initial parsing stack utilizing defer or intersection-observer based lazy hydration triggers.

Stack-Aware Guidance

Next.js Guidance

• Deploy the <Image> engine wrapper to execute automatic asset transcodes. Restrict the priority={true} parameter strictly to the $1:1$ LCP Hero element.
• Enforce Server Component AST graphs natively. Isolate 'use client' execution boundaries explicitly to terminal leaf nodes to minimize JavaScript bundle propagation.
• Embed the next/font injection pipeline to eliminate Web Font layout shift variance.

Astro Guidance

Execute static HTML rendering targets aggressively. Withhold client:load bindings on heavy JS components unless instant initialization is demanded. Fallback to client:visible or client:idle hydration maps.

Mathematical / Measurable Rules

• LCP Threshold Matrix: LCP calculation must resolve in $T_{lcp} \le 2.5\text{s}$.
• CLS Threshold Matrix: Cumulative Layout Shift metric must record $M_{cls} \le 0.1$.
• INP Threshold Matrix: Interaction to Next Paint bound must satisfy $T_{inp} \le 200\text{ms}$.
• JavaScript Mass Limits: Initial client bundle mass must constrain to $S_{gzip} \le 100\text{KB}$.

Quality Gates

Performance Gate

• Validated geometric boundaries (width/height) on all media nodes.
• Confirmed strict SSR/SSG execution for primary content boundaries.
• Executed modern transcoding limits on image arrays.
• Asserted dynamic chunk splitting on graph dependencies.

Anti-Patterns to Avoid

• Hero Deferral Fault: Injecting loading="lazy" on above-the-fold nodes, artificially extending the LCP calculation string.
• Waterfall Execution Loops: Emitting recursive useEffect fetching graphs that halt downstream rendering paths. Flatten data retrieval onto server-side parallel execution layers.

Agent Behavior Instructions

1. Compute algorithmic performance costs before generating dense JavaScript ASTs.
2. Force spatial allocation parameters on all generated <img> nodes.
3. Establish Server Component baseline architectures instead of default client-side renders.
4. Replace high-mass library dependencies with native engine APIs (e.g., Intl API vs imported moment arrays).

Final Review Checklist

• CLS variance neutralized.
• LCP preload paths validated.
• JS bundle metrics constrained.
• Deferral pipelines established.
• Fully agent-optimized deterministic rules.