{
  "id": "bbg-p0091-frontend-architecture-performance-frontend-architecture",
  "title": "Frontend Performance Control Map",
  "chapter": "frontend-architecture-performance",
  "batch": "27",
  "rank": 262,
  "sourcePage": 91,
  "sourcePointer": "p. 91",
  "status": "accepted",
  "reviewerStatus": "reviewed",
  "fidelityScore": 0.9,
  "canvas": {
    "width": 960,
    "height": 640
  },
  "fireworksTechGraph": {
    "style": "style-1-flat-icon",
    "diagramType": "architecture",
    "topologyNotes": [
      "source page render inspected",
      "extracted page text inspected",
      "source page render inspected",
      "preserve cheatsheet topology: network transfer, rendering work, loading sequence, bundle size, and preload/prefetch/dynamic import controls",
      "omit source branding, copied radial layout, and long checklist prose"
    ],
    "publicBoundary": [
      "original vector output",
      "no source pixels",
      "no source mark or long wording"
    ]
  },
  "callouts": [],
  "sourceReview": {
    "conceptAnchors": [
      "concept: compression",
      "concept: selective rendering",
      "concept: code splitting",
      "concept: priority loading",
      "concept: preload prefetch dynamic imports"
    ],
    "labelSource": "curated",
    "semanticStatus": "reviewed"
  },
  "groups": [
    {
      "id": "network",
      "label": "Network and assets",
      "x": 58,
      "y": 130,
      "w": 238,
      "h": 286
    },
    {
      "id": "runtime",
      "label": "Runtime rendering",
      "x": 360,
      "y": 130,
      "w": 238,
      "h": 286
    },
    {
      "id": "loading",
      "label": "Loading strategy",
      "x": 662,
      "y": 130,
      "w": 238,
      "h": 286
    }
  ],
  "shapes": [
    {
      "id": "request",
      "kind": "actor",
      "label": "Visitor",
      "detail": "first load",
      "x": 92,
      "y": 178,
      "w": 78,
      "h": 82,
      "tone": "blue"
    },
    {
      "id": "compress",
      "kind": "rect",
      "label": "Compression",
      "detail": "smaller files",
      "x": 174,
      "y": 180,
      "w": 108,
      "h": 58,
      "tone": "orange"
    },
    {
      "id": "split",
      "kind": "rect",
      "label": "Code splitting",
      "detail": "smaller bundles",
      "x": 174,
      "y": 312,
      "w": 108,
      "h": 58,
      "tone": "purple"
    },
    {
      "id": "window",
      "kind": "rect",
      "label": "Windowing",
      "detail": "visible items",
      "x": 424,
      "y": 180,
      "w": 108,
      "h": 58,
      "tone": "green"
    },
    {
      "id": "shake",
      "kind": "rect",
      "label": "Tree shaking",
      "detail": "dead code",
      "x": 424,
      "y": 312,
      "w": 108,
      "h": 58,
      "tone": "teal"
    },
    {
      "id": "priority",
      "kind": "rect",
      "label": "Priority load",
      "detail": "above fold",
      "x": 710,
      "y": 156,
      "w": 118,
      "h": 54,
      "tone": "blue"
    },
    {
      "id": "preload",
      "kind": "rect",
      "label": "Preload",
      "detail": "needed soon",
      "x": 710,
      "y": 246,
      "w": 118,
      "h": 54,
      "tone": "orange"
    },
    {
      "id": "dynamic",
      "kind": "rect",
      "label": "Dynamic import",
      "detail": "on action",
      "x": 710,
      "y": 336,
      "w": 118,
      "h": 54,
      "tone": "purple"
    },
    {
      "id": "experience",
      "kind": "diamond",
      "label": "Fast page",
      "detail": "less wait",
      "x": 414,
      "y": 454,
      "w": 132,
      "h": 78,
      "tone": "red"
    }
  ],
  "connectors": [
    {
      "from": "request",
      "to": "compress",
      "label": "fetch",
      "flow": "main"
    },
    {
      "from": "compress",
      "to": "split",
      "label": "ship less",
      "flow": "data"
    },
    {
      "from": "split",
      "to": "window",
      "label": "render",
      "flow": "main"
    },
    {
      "from": "window",
      "to": "shake",
      "label": "trim",
      "flow": "data"
    },
    {
      "from": "priority",
      "to": "experience",
      "label": "first",
      "flow": "control"
    },
    {
      "from": "preload",
      "to": "experience",
      "label": "early",
      "flow": "data"
    },
    {
      "from": "dynamic",
      "to": "experience",
      "label": "lazy",
      "flow": "async"
    },
    {
      "from": "shake",
      "to": "experience",
      "label": "less JS",
      "flow": "data"
    }
  ]
}