feat(docs): interactive render-blocking demo on Find render-blocking resources

[nucliweb]

What

Replaces the mermaid sequenceDiagram ("Render-blocking timeline") on Loading/Find-render-blocking-resources with an interactive render-blocking-timeline demo. The reader switches between a render-blocking and an optimized setup and steps through when First Contentful Paint can happen in each.

• New self-contained demo at public/demos/render-blocking-timeline.html, following the embed contract in public/demos/README.md (posts demoHeight, syncs theme, no external dependencies).
• The resource-type table and the optimization decision-tree flowchart on the page are kept as-is.

Why

The sequenceDiagram rendered too wide to fit the viewport and, being static, could not convey the temporal behaviour it described (blocking resources delaying first paint). Second demo in the "convert temporal mermaid diagrams to interactive demos" initiative, after Script-Loading.

Before: the static mermaid it replaces

sequenceDiagram
    participant Browser
    participant HTML as HTML Parser
    participant CSS as CSS File
    participant JS as JavaScript
    participant Render as Renderer

    Browser->>HTML: Start parsing HTML
    HTML->>CSS: Discover <link rel="stylesheet">
    Note over HTML: PAUSE parsing
    CSS->>CSS: Download CSS
    CSS->>CSS: Parse CSS
    CSS-->>HTML: CSS ready
    Note over HTML: RESUME parsing

    HTML->>JS: Discover <script> (no defer/async)
    Note over HTML: PAUSE parsing
    JS->>JS: Download JS
    JS->>JS: Execute JS
    JS-->>HTML: Script complete
    Note over HTML: RESUME parsing

    HTML->>Render: Parsing complete
    Note over Render: Can start rendering
    Render->>Render: Layout + Paint
    Render-->>Browser: First Contentful Paint (FCP)

    Note over Browser,Render: User sees content

Loading

After: the interactive demo

Verification (runtime, next dev + production next build)

• Render-blocking scenario: 7 steps + summary badge, all items revealed. Optimized: 6 steps + badge, all revealed.
• No stray script elements (raw tags in demo data are escaped).
• Auto-height via demoHeight: 454 to 465px, above the 400px minimum; full width without horizontal overflow on desktop.
• next build passes; MDX compiles and the Demo import resolves.

Not included

llms.txt / llms-full.txt are not regenerated here (deferred to the counts/artifacts phase).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webperf-snippets	Ready	Preview	Aug 2, 2026 9:36am
webperf-snippets-u6am	Ready	Preview	Aug 2, 2026 9:36am