Critical rendering path minimized

The critical rendering path (ISO-25010 time-behaviour) is the chain of resources the browser must fetch and process before it can paint the first pixel. Each extra hop — a synchronous script in <head>, a monolithic render-blocking stylesheet, a sequential font request — adds a full network round-trip of latency. On mobile networks with 100–200ms RTT, three sequential blocking resources add 300–600ms of blank-screen time regardless of how fast your server is. This directly worsens FCP, LCP, and the user's first impression.

Shorten the critical path by eliminating render-blocking resources. Apply these three changes in src/app/layout.tsx or your root HTML:

1. Inline critical above-fold CSS (under 14 KB) and defer everything else:

<style>{criticalCSS}</style>
<link rel="preload" as="style" href="/styles/main.css" onload="this.onload=null;this.rel='stylesheet'">

2. Mark non-critical scripts as defer or async:

<script defer src="/js/app.js"></script>
<script async src="/js/analytics.js"></script>

3. Verify the fix in DevTools Network: the critical path waterfall should show parallel fetches with at most 2 sequential hops before first paint.