From eac763b32717f06cae6435371d4dc4a1185c6b05 Mon Sep 17 00:00:00 2001 From: Joan Leon Date: Sun, 2 Aug 2026 11:07:24 +0200 Subject: [PATCH] feat(docs): interactive render-blocking demo on Find render-blocking resources Add an interactive render-blocking-timeline demo (self-contained page under public/demos/ following the documented embed contract) that lets the reader compare a render-blocking setup against an optimized one and step through when First Contentful Paint can happen in each. Embed it in Loading/Find-render-blocking-resources in place of the mermaid sequenceDiagram, which rendered too wide to fit the viewport and could not convey the temporal behaviour it described. The resource-type table and the optimization decision-tree flowchart stay as-is. --- .../Find-render-blocking-resources.mdx | 36 +- public/demos/render-blocking-timeline.html | 445 ++++++++++++++++++ 2 files changed, 451 insertions(+), 30 deletions(-) create mode 100644 public/demos/render-blocking-timeline.html diff --git a/pages/Loading/Find-render-blocking-resources.mdx b/pages/Loading/Find-render-blocking-resources.mdx index 44bc8b3..628e478 100644 --- a/pages/Loading/Find-render-blocking-resources.mdx +++ b/pages/Loading/Find-render-blocking-resources.mdx @@ -1,5 +1,6 @@ import snippet from '../../snippets/Loading/Find-render-blocking-resources.js?raw' import { Snippet } from '../../components/Snippet' +import { Demo } from '../../components/Demo' # Find render-blocking resources @@ -26,36 +27,11 @@ Render-blocking resources are the primary cause of slow initial page renders. Us ### Render-blocking timeline -```mermaid -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 - 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 + +