diff --git a/.github/workflows/docs-preview-deploy.yml b/.github/workflows/docs-preview-deploy.yml
index 36fa3ccc..3a1bbe64 100644
--- a/.github/workflows/docs-preview-deploy.yml
+++ b/.github/workflows/docs-preview-deploy.yml
@@ -97,11 +97,13 @@ jobs:
                 '.github/workflows/docs-preview-deploy.yml',
                 'requirements-docs.txt',
                 'scripts/build-docs.sh',
+                'scripts/optimize-site.py',
                 'scripts/publish-agent-markdown.py',
                 'scripts/render-dev-notes.py',
                 'scripts/stage-project-docs.py',
                 'tests/test_agent_markdown.py',
                 'tests/test_docs_404.py',
+                'tests/test_optimize_site.py',
                 'tests/test_render_dev_notes.py',
                 'tests/test_dev_note_headers.py',
                 'tests/test_dev_notes_layout.py',
diff --git a/.github/workflows/docs-preview.yml b/.github/workflows/docs-preview.yml
index 8b3487d5..72adf492 100644
--- a/.github/workflows/docs-preview.yml
+++ b/.github/workflows/docs-preview.yml
@@ -45,11 +45,13 @@ jobs:
               '.github/workflows/docs-preview-deploy.yml',
               'requirements-docs.txt',
               'scripts/build-docs.sh',
+              'scripts/optimize-site.py',
               'scripts/publish-agent-markdown.py',
               'scripts/render-dev-notes.py',
               'scripts/stage-project-docs.py',
               'tests/test_agent_markdown.py',
               'tests/test_docs_404.py',
+              'tests/test_optimize_site.py',
               'tests/test_render_dev_notes.py',
               'tests/test_dev_note_headers.py',
               'tests/test_dev_notes_layout.py',
diff --git a/docs/dev-notes/index.md b/docs/dev-notes/index.md
index 0b48d7e9..be6ad9b2 100644
--- a/docs/dev-notes/index.md
+++ b/docs/dev-notes/index.md
@@ -24,7 +24,7 @@ hide:
 <!-- dev-notes:posts:start -->
 <!-- Generated by scripts/render-dev-notes.py; edit posts and authors.json. -->
 <div class="dev-notes-toolbar">
-      <form class="dev-notes-filters" aria-label="Filter Dev Notes" hidden>
+      <form class="dev-notes-filters" aria-label="Filter Dev Notes" inert>
         <label for="dev-notes-category">Category
           <select id="dev-notes-category" name="category" aria-controls="dev-notes-results">
             <option value="">All categories</option>
diff --git a/docs/development/index.md b/docs/development/index.md
index 40109930..3edf9aa2 100644
--- a/docs/development/index.md
+++ b/docs/development/index.md
@@ -78,6 +78,9 @@ featured; the remaining matches keep their chronological order. Filters use
 Back/Forward navigation. Article byline names and categories link to these
 filtered views. Empty combinations show a message and a clear-filters action.
 Keep the full index readable when JavaScript is unavailable.
+Reserve the filter controls' layout space while their inert form initializes,
+so revealing the controls does not move the posts on first load or reload.
+The no-JavaScript fallback omits the toolbar entirely.
 
 An optional `card_variant` must have matching card and
 artwork CSS modifiers in `docs/stylesheets/dev-notes.css`. Set `hero_image` to
@@ -127,6 +130,23 @@ viewport. Heroes fill that available space up to the reading-column width and
 560px height, preserving their native proportions without cropping. Longer text
 leaves less room for the hero; authors should keep titles and subtitles concise.
 The index continues to use compact thumbnails.
+The clean build runs `scripts/optimize-site.py` over rendered HTML. Local PNG,
+JPEG, and static WebP images receive content-addressed WebP `srcset` variants
+from 320 to 1920 pixels wide, intrinsic dimensions, and asynchronous decoding.
+SVG images keep their vector sources and receive dimensions from their viewBox
+so heroes, logos, and diagrams reserve space before downloading.
+Original image URLs and full-size links stay intact, as do published Markdown
+sources. Do not commit the generated `site/assets/responsive/` files. Authored
+responsive pictures and animated images are preserved. Card `sizes` follow their
+featured or archive role, including after filtering. Hidden light/dark variants
+use native lazy loading so only the visible theme downloads. Body images load
+lazily, and video posters use compressed variants. The site uses system fonts
+without external font stylesheets.
+The transcript viewer defers its JSON download and DOM construction until it
+approaches the viewport; transcript source fragment links initialize it directly.
+Its responsive frame reserves space while loading and keeps a constant height
+when switching models. Filtered index links reveal their cards after applying
+the URL filters; the toolbar reserves room for its clear button.
 Clicking a hero opens the original image, so a diagram can remain compact without
 losing access to its details. Index images use bounded frames with the full image
 visible. Do not add per-post title/hero sizing or force an image into a different
diff --git a/docs/javascripts/dev-notes.js b/docs/javascripts/dev-notes.js
index 9ae873f4..0da8c4d7 100644
--- a/docs/javascripts/dev-notes.js
+++ b/docs/javascripts/dev-notes.js
@@ -62,6 +62,10 @@
       matches.forEach((card, index) => {
         card.element.classList.toggle("dev-note-card--featured", index === 0);
         card.element.classList.toggle("dev-note-card--recent", index !== 0);
+        card.element.querySelectorAll("img[data-featured-sizes]").forEach(image => {
+          image.sizes = index === 0 ? image.dataset.featuredSizes : image.dataset.recentSizes;
+          image.fetchPriority = index === 0 ? "high" : "auto";
+        });
         if (index === 0) featured.insertBefore(card.element, empty);
         else recentList.append(card.element);
       });
@@ -105,7 +109,7 @@
     clear.addEventListener("click", clearFilters);
     window.addEventListener("popstate", applyFilters);
     applyFilters();
-    form.hidden = false;
+    form.inert = false;
     cleanup = () => {
       form.removeEventListener("change", updateUrl);
       form.removeEventListener("submit", updateUrl);
diff --git a/docs/javascripts/pi-traces.js b/docs/javascripts/pi-traces.js
index 8a89bef9..ca2ca72a 100644
--- a/docs/javascripts/pi-traces.js
+++ b/docs/javascripts/pi-traces.js
@@ -298,8 +298,34 @@
     }
   }
 
+  let cleanupPending = () => {};
   function enhance() {
-    document.querySelectorAll(".pi-traces").forEach(initialize);
+    cleanupPending();
+    const pending = new Set(document.querySelectorAll(".pi-traces:not([data-initialized])"));
+    if (!pending.size) return;
+    // The transcript payload and its DOM are substantial. Prepare them just
+    // before the reader reaches the viewer, or immediately for source links.
+    const observer = "IntersectionObserver" in window
+      ? new IntersectionObserver(entries => {
+        entries.filter(entry => entry.isIntersecting).forEach(entry => start(entry.target));
+      }, { rootMargin: "600px" })
+      : null;
+    const start = viewer => {
+      pending.delete(viewer);
+      observer?.unobserve(viewer);
+      initialize(viewer);
+      if (!pending.size) cleanupPending();
+    };
+    const followPendingSource = () => {
+      if (/^#trace-source-/.test(window.location.hash)) [...pending].forEach(start);
+    };
+    cleanupPending = () => {
+      observer?.disconnect();
+      window.removeEventListener("hashchange", followPendingSource);
+    };
+    window.addEventListener("hashchange", followPendingSource);
+    followPendingSource();
+    pending.forEach(viewer => observer ? observer.observe(viewer) : start(viewer));
   }
   if (window.document$?.subscribe) window.document$.subscribe(enhance);
   else if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", enhance, { once: true });
diff --git a/docs/stylesheets/dev-notes.css b/docs/stylesheets/dev-notes.css
index d4bdf66d..afd162f9 100644
--- a/docs/stylesheets/dev-notes.css
+++ b/docs/stylesheets/dev-notes.css
@@ -32,6 +32,8 @@
   --openshell-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
   --openshell-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --openshell-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  --md-text-font: var(--openshell-sans);
+  --md-code-font: var(--openshell-mono);
   --md-default-bg-color: var(--openshell-paper);
   --md-default-fg-color: var(--openshell-ink);
   --md-primary-fg-color: var(--openshell-paper-raised);
@@ -781,8 +783,18 @@ body:has(.openshell-home-page) .md-path {
   border-bottom: 1px solid var(--openshell-rule);
 }
 
-.dev-notes-toolbar:not(:has(.dev-notes-filters:not([hidden]))) {
-  display: none;
+.dev-notes-filters[inert] {
+  /* Reserve the controls' responsive height before enhancement completes. */
+  visibility: hidden;
+}
+
+html[data-dev-notes-filtered] .dev-notes-page:has(.dev-notes-filters[inert]) :is(.dev-notes-featured, .dev-notes-recent) {
+  visibility: hidden;
+}
+
+.dev-notes-page .dev-notes-filters__clear[hidden] {
+  display: block !important;
+  visibility: hidden;
 }
 
 .dev-notes-filters {
diff --git a/docs/stylesheets/pi-traces.css b/docs/stylesheets/pi-traces.css
index 0fde32a6..bccbeaf9 100644
--- a/docs/stylesheets/pi-traces.css
+++ b/docs/stylesheets/pi-traces.css
@@ -37,6 +37,14 @@
   --trace-canvas: #12181b;
 }
 .pi-traces [hidden] { display: none !important; }
+/* Keep the viewer's footprint stable while data arrives and tabs change.
+   The conversation uses the space left below its responsive controls. */
+.pi-traces__content { display: flow-root; height: calc(min(38rem, 80svh) + 17rem); }
+.pi-traces__app { height: 100%; }
+.pi-traces__app, .pi-traces__model-panel, .pi-traces__panel { display: flex; flex-direction: column; min-height: 0; }
+.pi-traces__model-panel, .pi-traces__panel { flex: 1; }
+.pi-traces__app > *, .pi-traces__model-panel > *, .pi-traces__panel > * { flex-shrink: 0; }
+.pi-traces .pi-traces__collapse[hidden] { display: block !important; visibility: hidden; }
 .md-typeset .pi-traces button { cursor: pointer; font-family: inherit; }
 .pi-traces button:focus-visible, .pi-traces summary:focus-visible,
 .pi-traces a:focus-visible,
@@ -97,7 +105,7 @@
 .pi-traces__expand { position: absolute; top: calc(100% + .3rem); right: 0; z-index: 5; display: grid; gap: .4rem; width: 13rem; max-width: calc(100vw - 3rem); padding: .6rem; border: 1px solid var(--openshell-rule); border-radius: .4rem; background: var(--trace-surface); box-shadow: 0 .3rem 1rem #00000020; color: var(--openshell-ink); font-size: .6rem; }
 .pi-traces__display-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
 .pi-traces__display-row .pi-traces__button { min-width: 4.5rem; }
-.pi-traces__conversation { height: 38rem; max-height: 80vh; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: .7rem 1.2rem 1.4rem; border-block: 1px solid var(--openshell-rule); background: var(--trace-canvas); }
+.pi-traces__conversation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: .7rem 1.2rem 1.4rem; border-block: 1px solid var(--openshell-rule); background: var(--trace-canvas); }
 .pi-traces__prompt { display: flex; align-items: center; gap: .65rem; margin: .8rem 0 1.1rem; color: var(--openshell-muted); font: .5rem var(--openshell-mono); text-transform: uppercase; letter-spacing: .08em; }
 .pi-traces__prompt::before, .pi-traces__prompt::after { content: ""; height: 1px; flex: 1; background: var(--openshell-rule); }
 .pi-chat { --role-color: var(--trace-assistant); --role-bg: var(--trace-assistant-bg); max-width: 92%; margin: 0 0 1.1rem; font-size: .68rem; line-height: 1.65; }
@@ -153,7 +161,8 @@
   .pi-traces__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .pi-traces__modes { margin-inline: .7rem; }
   .pi-traces__legend, .pi-traces__run, .pi-traces__toolbar { padding-inline: .7rem; }
-  .pi-traces__conversation { padding-inline: .55rem; height: 34rem; max-height: 75vh; }
+  .pi-traces__content { height: calc(min(34rem, 75svh) + 22rem); }
+  .pi-traces__conversation { padding-inline: .55rem; }
   .pi-chat { max-width: 97%; }
   .pi-chat--user { max-width: 94%; }
   .pi-chat--call, .pi-chat--result { margin-left: .3rem; max-width: calc(100% - .3rem); }
diff --git a/overrides/main.html b/overrides/main.html
index 873517a2..e3ea215e 100644
--- a/overrides/main.html
+++ b/overrides/main.html
@@ -4,6 +4,10 @@
 {% block extrahead %}
   {{ super() }}
   {% include "partials/seo.html" %}
+  <noscript><style>
+    .dev-notes-toolbar, .pi-traces__loading { display: none; }
+    .pi-traces__content { height: auto; }
+  </style></noscript>
   {% if page.meta and page.meta.reset_scroll_on_reload %}
     <script>
       // Run before the theme follows fragment links or the browser restores scroll.
@@ -22,6 +26,11 @@
     </script>
   {% endif %}
   <script>
+    // Shared filter links should never flash the unfiltered card list.
+    const noteFilters = new URLSearchParams(location.search);
+    if (noteFilters.has("category") || noteFilters.has("author")) {
+      document.documentElement.dataset.devNotesFiltered = "true";
+    }
     try {
       document.documentElement.dataset.navigationDrawer =
         window.sessionStorage.getItem("openshell.navigationDrawerOpen") === "true"
diff --git a/overrides/partials/header.html b/overrides/partials/header.html
index 7d373ad0..67024173 100644
--- a/overrides/partials/header.html
+++ b/overrides/partials/header.html
@@ -42,6 +42,18 @@
     {% endif %}
     {% if not config.theme.palette is mapping %}
       {% include "partials/javascripts/palette.html" %}
+      <script>
+        // Apply the first-visit system theme before images enter the document.
+        // The theme bundle otherwise selects it after the initial image fetches.
+        (() => {
+          let savedPalette;
+          try { savedPalette = __md_get("__palette"); } catch {}
+          if (!savedPalette?.color) {
+            document.body.dataset.mdColorScheme =
+              matchMedia("(prefers-color-scheme: dark)").matches ? "slate" : "default";
+          }
+        })();
+      </script>
     {% endif %}
     {% if config.extra.alternate %}
       {% include "partials/alternate.html" %}
diff --git a/requirements-docs.txt b/requirements-docs.txt
index ecaaf088..9069e7c7 100644
--- a/requirements-docs.txt
+++ b/requirements-docs.txt
@@ -1,2 +1,4 @@
 pytest==8.4.2
+beautifulsoup4==4.14.3
+Pillow==12.1.1
 zensical==0.0.62
diff --git a/scripts/build-docs.sh b/scripts/build-docs.sh
index 6c4e642b..9761ee32 100755
--- a/scripts/build-docs.sh
+++ b/scripts/build-docs.sh
@@ -33,6 +33,8 @@ python -m pip install -r requirements-docs.txt
 python scripts/stage-project-docs.py
 python scripts/render-dev-notes.py
 zensical build --clean --strict
+python scripts/optimize-site.py
+python -m pytest -q tests/test_optimize_site.py
 python scripts/publish-agent-markdown.py
 REQUIRE_RENDERED_AGENT_MARKDOWN=1 python tests/test_agent_markdown.py
 REQUIRE_RENDERED_404=1 python tests/test_docs_404.py
diff --git a/scripts/optimize-site.py b/scripts/optimize-site.py
new file mode 100644
index 00000000..1c6eff32
--- /dev/null
+++ b/scripts/optimize-site.py
@@ -0,0 +1,137 @@
+#!/usr/bin/env python3
+# SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+# SPDX-License-Identifier: Apache-2.0
+
+"""Add responsive images to the built site without changing published sources."""
+
+from __future__ import annotations
+
+import hashlib
+import os
+from pathlib import Path
+from urllib.parse import quote, unquote, urlsplit
+from xml.etree import ElementTree
+
+from bs4 import BeautifulSoup
+from PIL import Image, ImageOps
+
+
+ROOT = Path(__file__).resolve().parents[1]
+WIDTHS = (320, 640, 960, 1440, 1920)
+THEME_CLASSES = {
+    "dev-note-image--light", "dev-note-image--dark",
+    "openshell-home-brand__light", "openshell-home-brand__dark",
+}
+FEATURED_SIZES = "(max-width: 44rem) min(100vw - 32px, 26rem), 640px"
+RECENT_SIZES = "(max-width: 44rem) 5rem, 10rem"
+ARTICLE_SIZES = "(max-width: 800px) calc(100vw - 32px), 900px"
+
+
+def local_asset(site: Path, page: Path, url: str) -> Path | None:
+    parsed = urlsplit(url)
+    # Site-relative URLs work identically at /, a project prefix, and PR previews.
+    if parsed.scheme or parsed.netloc or not parsed.path or parsed.path.startswith("/"):
+        return None
+    asset = (page.parent / unquote(parsed.path)).resolve()
+    if not asset.is_relative_to(site) or not asset.is_file():
+        return None
+    return asset
+
+
+def image_variants(asset: Path, site: Path) -> tuple[int, int, list[tuple[Path, int]]] | None:
+    if asset.is_relative_to(site / "assets" / "responsive"):
+        return None
+    if asset.suffix.lower() == ".svg":
+        # Keep vectors intact; their viewBox supplies the ratio before download.
+        view_box = ElementTree.parse(asset).getroot().get("viewBox")
+        if view_box:
+            _, _, width, height = map(float, view_box.replace(",", " ").split())
+            return round(width), round(height), []
+        return None
+    if asset.suffix.lower() not in {".png", ".jpg", ".jpeg", ".webp"}:
+        return None
+    with Image.open(asset) as original:
+        if getattr(original, "is_animated", False):
+            return None
+        transparent = "A" in original.getbands() or "transparency" in original.info
+        image = ImageOps.exif_transpose(original).convert("RGBA" if transparent else "RGB")
+        width, height = image.size
+        digest = hashlib.sha256(asset.read_bytes()).hexdigest()[:16]
+        output = site / "assets" / "responsive"
+        output.mkdir(parents=True, exist_ok=True)
+        variants = []
+        for size in sorted({min(width, candidate) for candidate in WIDTHS}):
+            target = output / f"{digest}-{size}.webp"
+            if not target.exists():
+                resized = image.resize((size, max(1, round(height * size / width))), Image.Resampling.LANCZOS)
+                resized.save(target, "WEBP", quality=88, method=6)
+            variants.append((target, size))
+        return width, height, variants
+
+
+def relative_url(asset: Path, page: Path) -> str:
+    return quote(Path(os.path.relpath(asset, page.parent)).as_posix())
+
+
+def optimize_site(site: Path) -> int:
+    site = site.resolve()
+    if not (site / "index.html").is_file():
+        raise ValueError(f"Build the site before optimizing it: {site}")
+    cache = {}
+    count = 0
+    for page in sorted(site.rglob("*.html")):
+        soup = BeautifulSoup(page.read_text(), "html.parser")
+        before = str(soup)
+        for image in soup.select("img[src]"):
+            classes = set(image.get("class", [])) | set(image.parent.get("class", []))
+            image.attrs.setdefault("decoding", "async")
+            # Native lazy loading leaves display:none theme variants unfetched,
+            # including when a saved palette differs from the system preference.
+            if classes & THEME_CLASSES:
+                image["loading"] = "lazy"
+            elif not image.has_attr("loading") and image.find_parent("article"):
+                image["loading"] = "lazy"
+            asset = local_asset(site, page, image["src"])
+            if asset is None or image.has_attr("srcset") or image.find_parent("picture"):
+                continue
+            if asset not in cache:
+                cache[asset] = image_variants(asset, site)
+            if not cache[asset]:
+                continue
+            width, height, variants = cache[asset]
+            # Preserve authored sizing while completing its intrinsic ratio.
+            if not image.has_attr("width") and not image.has_attr("height"):
+                image["width"], image["height"] = str(width), str(height)
+            elif image.get("width", "").isdigit() and not image.has_attr("height"):
+                image["height"] = str(round(int(image["width"]) * height / width))
+            elif image.get("height", "").isdigit() and not image.has_attr("width"):
+                image["width"] = str(round(int(image["height"]) * width / height))
+            if not variants:
+                continue
+            image["srcset"] = ", ".join(f"{relative_url(path, page)} {size}w" for path, size in variants)
+            card = image.find_parent(class_="dev-note-card")
+            image["sizes"] = (
+                FEATURED_SIZES if card and "dev-note-card--featured" in card.get("class", [])
+                else RECENT_SIZES if card else ARTICLE_SIZES
+            )
+            if card:
+                image["data-featured-sizes"] = FEATURED_SIZES
+                image["data-recent-sizes"] = RECENT_SIZES
+            count += 1
+        for video in soup.select("video[poster]"):
+            asset = local_asset(site, page, video["poster"])
+            if asset is not None:
+                if asset not in cache:
+                    cache[asset] = image_variants(asset, site)
+                if cache[asset] and cache[asset][2]:
+                    variants = cache[asset][2]
+                    poster = next((path for path, size in variants if size >= 960), variants[-1][0])
+                    video["poster"] = relative_url(poster, page)
+        after = str(soup)
+        if after != before:
+            page.write_text(after, encoding="utf-8")
+    return count
+
+
+if __name__ == "__main__":
+    print(f"Optimized {optimize_site(ROOT / 'site')} image placements with responsive WebP variants.")
diff --git a/scripts/render-dev-notes.py b/scripts/render-dev-notes.py
index f1773936..2d3863ad 100644
--- a/scripts/render-dev-notes.py
+++ b/scripts/render-dev-notes.py
@@ -337,7 +337,7 @@ def render_browse_filters(posts: list[dict[str, Any]]) -> str:
         f'          <option value="{html.escape(author_id, quote=True)}">{html.escape(author["name"])}</option>'
         for author_id, author in sorted(authors.items(), key=lambda item: item[1]["name"].casefold())
     )
-    return f"""      <form class="dev-notes-filters" aria-label="Filter Dev Notes" hidden>
+    return f"""      <form class="dev-notes-filters" aria-label="Filter Dev Notes" inert>
         <label for="dev-notes-category">Category
           <select id="dev-notes-category" name="category" aria-controls="dev-notes-results">
             <option value="">All categories</option>
diff --git a/tests/docs-preview.test.js b/tests/docs-preview.test.js
index 0966961c..530fefc8 100644
--- a/tests/docs-preview.test.js
+++ b/tests/docs-preview.test.js
@@ -28,6 +28,8 @@ for (const workflow of ["docs-preview.yml", "docs-preview-deploy.yml"]) {
       "docs/dev-notes/posts/example.md",
       "overrides/main.html",
       "scripts/stage-project-docs.py",
+      "scripts/optimize-site.py",
+      "tests/test_optimize_site.py",
       "tests/docs-preview.test.js",
       "tests/test_dev_note_headers.py",
       "tests/test_dev_notes_layout.py",
diff --git a/tests/test_dev_notes_layout.py b/tests/test_dev_notes_layout.py
index 245ba923..7438be36 100644
--- a/tests/test_dev_notes_layout.py
+++ b/tests/test_dev_notes_layout.py
@@ -32,6 +32,11 @@
 VIDEO_POSTS = [post for post in POSTS if "<video" in post.read_text()]
 VIEWPORTS = [(1366, 768), (1440, 900), (768, 1024), (390, 844), (320, 740)]
 SCREENSHOTS = ROOT / ".cache/dev-notes-layout"
+SITE_PAGES = [
+    path.relative_to(ROOT / "site").as_posix()
+    for path in sorted((ROOT / "site").rglob("*.html"))
+    if 'http-equiv="refresh"' not in path.read_text()
+]
 
 
 class QuietHandler(SimpleHTTPRequestHandler):
@@ -167,6 +172,185 @@ def test_index_reading_proportions(page, site_url, viewport):
     assert_index_proportions(page, viewport)
 
 
+def test_site_images_reserve_layout_space(page, site_url):
+    page.emulate_media(reduced_motion="no-preference")
+    page.add_init_script("""
+        window.siteLayoutShifts = [];
+        if (PerformanceObserver.supportedEntryTypes.includes('layout-shift')) {
+            new PerformanceObserver(list => {
+                for (const entry of list.getEntries()) {
+                    if (!entry.hadRecentInput) window.siteLayoutShifts.push(entry.value);
+                }
+            }).observe({type: 'layout-shift', buffered: true});
+        }
+    """)
+    shifts = []
+    errors = []
+    page.on("pageerror", lambda error: errors.append(str(error)))
+    page.on("response", lambda response: errors.append(f"{response.status}: {response.url}")
+            if response.url.startswith(site_url) and response.status >= 400 else None)
+    held = []
+    holding = False
+
+    def route_image(route):
+        if route.request.resource_type == "image" and route.request.url.startswith(site_url):
+            if holding:
+                held.append(route)
+                return
+        route.fallback()
+
+    page.route("**/*", route_image)
+    for path in SITE_PAGES:
+        holding = True
+        page.goto(f"{site_url}/{path}", wait_until="domcontentloaded")
+        images = page.locator(".md-content img")
+        images.evaluate_all("images => images.forEach(image => image.loading = 'eager')")
+        before = images.evaluate_all("""images => images.map(image => ({
+            src: image.getAttribute('src'), width: image.getBoundingClientRect().width,
+            height: image.getBoundingClientRect().height,
+        }))""")
+        holding = False
+        while held:
+            held.pop().continue_()
+        page.wait_for_load_state("networkidle")
+        assert_no_horizontal_overflow(page)
+        layout_shifts = page.evaluate("window.siteLayoutShifts")
+        assert sum(layout_shifts) < 0.01, (path, layout_shifts)
+        after = images.evaluate_all("""images => images.map(image => ({
+            width: image.getBoundingClientRect().width,
+            height: image.getBoundingClientRect().height,
+        }))""")
+        for initial, loaded in zip(before, after, strict=True):
+            if abs(initial["height"] - loaded["height"]) > 1 or abs(initial["width"] - loaded["width"]) > 1:
+                shifts.append({"page": path, "before": initial, "after": loaded})
+    assert not shifts, json.dumps(shifts, indent=2)
+    assert not errors, errors
+
+
+def test_transcript_loading_keeps_content_in_place(page, site_url):
+    pending = []
+    page.route("**/viewer.json", lambda route: pending.append(route))
+    open_page(page, f"{site_url}/dev-notes/posts/2026-09-26-network-redaction-is-not-enough/")
+    viewer = page.locator(".pi-traces")
+    before = viewer.bounding_box()
+    viewer.scroll_into_view_if_needed()
+    expect(viewer.locator(".pi-traces__loading")).to_be_visible()
+    page.wait_for_function("document.querySelector('.pi-traces').dataset.initialized === 'true'")
+    assert pending
+    pending.pop().continue_()
+    expect(viewer.locator(".pi-traces__app")).to_be_visible()
+    after = viewer.bounding_box()
+    assert abs(before["height"] - after["height"]) <= 1, (before, after)
+    for model in viewer.locator(".pi-traces__tab").all():
+        model.click()
+        for mode in viewer.locator(".pi-traces__mode-tab:visible").all():
+            mode.click()
+            assert abs(viewer.bounding_box()["height"] - after["height"]) <= 1
+            conversation = viewer.locator(".pi-traces__conversation:visible").bounding_box()
+            frame = viewer.bounding_box()
+            assert conversation["height"] >= 200
+            assert conversation["y"] + conversation["height"] <= frame["y"] + frame["height"]
+
+
+@pytest.mark.parametrize("query", ["", "?category=research", "?category=examples"])
+def test_index_reload_keeps_content_in_place(page, site_url, query):
+    before = []
+
+    def capture_before_initialization(route):
+        expect(page.locator(".dev-notes-filters")).to_be_hidden()
+        before.append(page.locator(".dev-notes-featured").bounding_box())
+        if query:
+            expect(page.locator(".dev-note-card:visible")).to_have_count(0)
+        route.continue_()
+
+    # Hold the page's enhancement script to expose its first-render geometry.
+    page.route("**/javascripts/dev-notes.js", capture_before_initialization)
+    open_page(page, f"{site_url}/dev-notes/{query}")
+    page.reload(wait_until="networkidle")
+    after = page.locator(".dev-notes-featured").bounding_box()
+    assert len(before) == 2
+    for initial in before:
+        assert abs(initial["y"] - after["y"]) <= 1, (initial, after)
+        assert abs(initial["width"] - after["width"]) <= 1, (initial, after)
+
+
+def test_index_image_budget_and_theme_loading(page, site_url):
+    images = []
+    page.on("response", lambda response: images.append({
+        "name": response.url, "bytes": int(response.headers.get("content-length", 0)),
+    }) if response.request.resource_type == "image" and response.url.startswith(site_url) else None)
+    open_page(page, f"{site_url}/dev-notes/")
+    featured = page.locator(".dev-note-card--featured img.dev-note-card__visual-image")
+    # Do not force hidden images eager: these assertions exercise real loading.
+    for image in featured.all():
+        if image.is_visible():
+            image.evaluate("image => image.decode()")
+    resources = page.evaluate("""performance.getEntriesByType('resource').map(entry => ({
+        name: entry.name, type: entry.initiatorType, bytes: entry.encodedBodySize
+    }))""")
+    assert sum(entry["bytes"] for entry in images) < 300_000, images
+    assert not any(urlparse(entry["name"]).path.endswith(".png") for entry in images), images
+    assert not any("fonts.googleapis.com" in entry["name"] for entry in resources)
+    for image in featured.all():
+        if not image.is_visible():
+            # WebKit selects currentSrc even while the image remains unfetched.
+            assert image.evaluate("image => image.currentSrc") not in {entry["name"] for entry in images}
+            assert image.evaluate("image => image.naturalWidth") == 0
+    page.evaluate("""document.body.dataset.mdColorScheme =
+        document.body.dataset.mdColorScheme === 'slate' ? 'default' : 'slate'""")
+    for image in featured.all():
+        if image.is_visible():
+            page.wait_for_function("image => image.complete && image.naturalWidth > 0", arg=image.element_handle())
+            assert "/assets/responsive/" in image.evaluate("image => image.currentSrc")
+
+
+def test_transcripts_wait_for_viewport_and_follow_source_links(page, site_url):
+    url = f"{site_url}/dev-notes/posts/2026-09-26-network-redaction-is-not-enough/"
+    requests = []
+    page.on("request", lambda request: requests.append(request.url))
+    open_page(page, url)
+    assert not any(request.endswith("viewer.json") for request in requests)
+    viewer = page.locator(".pi-traces")
+    viewer.scroll_into_view_if_needed()
+    expect(viewer.locator(".pi-traces__app")).to_be_visible()
+    assert sum(request.endswith("viewer.json") for request in requests) == 1
+    open_page(page, f"{site_url}/dev-notes/")
+    open_page(page, url + "#trace-source-kimi-on")
+    expect(page.locator("#trace-panel-kimi-on")).to_be_visible()
+    expect(page.locator("#trace-panel-kimi-off")).to_be_hidden()
+    page.locator("#trace-tab-kimi-off").click()
+    expect(page.locator("#trace-panel-kimi-off")).to_be_visible()
+    page.locator("#trace-model-tab-kimi").focus()
+    page.keyboard.press("ArrowRight")
+    expect(page.locator("#trace-model-tab-glm")).to_be_focused()
+    expect(page.locator("#trace-panel-glm-off")).to_be_visible()
+    viewer.locator(".pi-traces__collapse").click()
+    expect(viewer.locator(".pi-traces__content")).to_be_hidden()
+    viewer.locator(".pi-traces__collapse").click()
+    expect(page.locator("#trace-panel-glm-off")).to_be_visible()
+
+
+def test_saved_theme_loads_only_its_hero_on_retina_screen(browser, site_url):
+    page = browser.new_page(viewport={"width": 390, "height": 844}, device_scale_factor=2, color_scheme="light")
+    page.route("**/*", lambda route: route.continue_() if route.request.url.startswith(site_url) else route.abort())
+    page.add_init_script("""localStorage.setItem('/.__palette', JSON.stringify({
+        color: {scheme: 'slate', media: '(prefers-color-scheme: dark)', primary: 'black', accent: 'green'}
+    }))""")
+    requests = []
+    page.on("request", lambda request: requests.append(request.url))
+    try:
+        page.goto(f"{site_url}/dev-notes/", wait_until="networkidle")
+        assert page.locator("body").get_attribute("data-md-color-scheme") == "slate"
+        hero = page.locator(".dev-note-card--featured .dev-note-image--dark")
+        hero.evaluate("image => image.decode()")
+        assert "/assets/responsive/" in hero.evaluate("image => image.currentSrc")
+        hidden = page.locator(".dev-note-card--featured .dev-note-image--light")
+        assert hidden.evaluate("image => image.currentSrc") not in requests
+        assert hidden.evaluate("image => image.naturalWidth") == 0
+    finally:
+        page.close()
+
+
 def test_featured_image_also_works_as_a_thumbnail(page, site_url, viewport):
     open_page(page, f"{site_url}/dev-notes/")
     if page.locator(".dev-note-card--recent").count() == 0:
@@ -265,6 +449,7 @@ def test_index_remains_readable_without_javascript(browser, site_url):
         response = page.goto(f"{site_url}/dev-notes/?category=research")
         assert response.ok
         expect(page.locator(".dev-notes-filters")).to_be_hidden()
+        expect(page.locator(".dev-notes-toolbar")).to_be_hidden()
         expect(page.locator(".dev-note-card:visible")).to_have_count(len(POSTS))
         page.locator(".dev-note-card__link").first.click()
         expect(page.locator(".dev-note-header h1")).to_be_visible()
@@ -343,6 +528,7 @@ def test_post_reading_proportions(page, site_url, viewport, post):
 
 
 def test_shared_documentation_navigation(page, site_url, viewport):
+    page.emulate_media(reduced_motion="no-preference")
     open_page(page, f"{site_url}/documentation/openshell-agent-runner/reviews/")
     assert_no_horizontal_overflow(page)
     assert_footer_navigation_visible(page)
@@ -370,6 +556,53 @@ def test_shared_documentation_navigation(page, site_url, viewport):
         ), "Closing the drawer should restore focus"
 
 
+def test_search_and_saved_navigation(page, site_url, viewport):
+    page.emulate_media(reduced_motion="no-preference")
+    open_page(page, f"{site_url}/documentation/")
+    if viewport["width"] < 1024:
+        page.locator('label[for="__search"]').click()
+    else:
+        page.get_by_role("button", name=re.compile(r"^Search")).click()
+    search = page.get_by_placeholder("Search", exact=True)
+    expect(search).to_be_focused()
+    search.fill("OpenShell Agent Runner")
+    results = page.locator(f'a[href^="{site_url}/documentation/openshell-agent-runner/"]:visible')
+    expect(results.first).to_be_visible()
+    results.first.click()
+    expect(page.locator("h1")).to_contain_text("OpenShell Agent Runner")
+    page.get_by_role("button", name="Open navigation", exact=True).click()
+    if viewport["width"] >= 1024:
+        before = []
+
+        def capture_navigation_startup(route):
+            before.append(page.locator(".md-content").bounding_box())
+            route.continue_()
+
+        page.route("**/javascripts/navigation-drawer.js", capture_navigation_startup)
+        page.reload(wait_until="networkidle")
+        expect(page.get_by_role("button", name="Close navigation", exact=True)).to_be_visible()
+        after = page.locator(".md-content").bounding_box()
+        assert abs(before[0]["x"] - after["x"]) <= 1, (before, after)
+        assert abs(before[0]["width"] - after["width"]) <= 1, (before, after)
+    else:
+        page.keyboard.press("Escape")
+        expect(page.get_by_role("button", name="Open navigation", exact=True)).to_be_focused()
+
+
+def test_homepage_brand_and_navigation(page, site_url):
+    open_page(page, site_url + "/")
+    assert_no_horizontal_overflow(page)
+    brand = page.locator(".openshell-home-brand img:visible")
+    assert brand.count() == 1
+    brand.evaluate("image => image.decode()")
+    assert "/assets/responsive/" in brand.evaluate("image => image.currentSrc")
+    page.locator(".openshell-home-link").filter(has=page.get_by_text("Dev Notes", exact=True)).click()
+    expect(page.locator(".dev-notes-page")).to_be_visible()
+    page.go_back(wait_until="networkidle")
+    page.locator(".openshell-home-link").filter(has=page.get_by_text("Documentation", exact=True)).click()
+    expect(page.locator("h1")).to_contain_text("Documentation")
+
+
 @pytest.mark.parametrize("post", VIDEO_POSTS, ids=lambda post: post.stem)
 def test_embedded_video_playback(page, site_url, post):
     open_page(page, f"{site_url}/dev-notes/posts/{post.stem}/")
diff --git a/tests/test_optimize_site.py b/tests/test_optimize_site.py
new file mode 100644
index 00000000..1ffe6b62
--- /dev/null
+++ b/tests/test_optimize_site.py
@@ -0,0 +1,114 @@
+# SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+# SPDX-License-Identifier: Apache-2.0
+
+import importlib.util
+from pathlib import Path
+
+from bs4 import BeautifulSoup
+from PIL import Image
+
+
+ROOT = Path(__file__).resolve().parents[1]
+SPEC = importlib.util.spec_from_file_location("optimize_site", ROOT / "scripts/optimize-site.py")
+optimizer = importlib.util.module_from_spec(SPEC)
+SPEC.loader.exec_module(optimizer)
+
+
+def test_responsive_images_preserve_originals_and_preview_paths(tmp_path):
+    site = tmp_path / "pr-preview/pr-123"
+    asset = site / "assets/diagram.png"
+    asset.parent.mkdir(parents=True)
+    Image.new("RGB", (1600, 800), "green").save(asset)
+    original = asset.read_bytes()
+    (site / "index.html").write_text("<!doctype html><html><body></body></html>")
+    page = site / "dev-notes/posts/example/index.html"
+    page.parent.mkdir(parents=True)
+    page.write_text('''<!doctype html><html><body><article>
+      <a class="dev-note-image--dark" href="../../../assets/diagram.png">
+        <img src="../../../assets/diagram.png" alt="Diagram" loading="eager" fetchpriority="high">
+      </a>
+      <img src="https://example.com/avatar.png" width="32" height="32">
+      <video poster="../../../assets/diagram.png" preload="none"></video>
+      <script>const value = "<hello>&world";</script>
+    </article></body></html>''')
+    assert optimizer.optimize_site(site) == 1
+    soup = BeautifulSoup(page.read_text(), "html.parser")
+    image = soup.select_one("a img")
+    assert image["src"] == soup.a["href"]
+    assert image["alt"] == "Diagram"
+    assert image["loading"] == "lazy"
+    assert image["fetchpriority"] == "high"
+    assert (image["width"], image["height"]) == ("1600", "800")
+    for entry in image["srcset"].split(", "):
+        url, width = entry.split()
+        variant = (page.parent / url).resolve()
+        assert variant.is_relative_to(site)
+        with Image.open(variant) as resized:
+            assert resized.width == int(width[:-1])
+            assert resized.width == resized.height * 2
+    assert asset.read_bytes() == original
+    assert "srcset" not in soup.select("img")[1].attrs
+    assert (page.parent / soup.video["poster"]).is_file()
+    assert soup.video["preload"] == "none"
+    assert soup.script.string == 'const value = "<hello>&world";'
+    before = page.read_bytes()
+    assert optimizer.optimize_site(site) == 0
+    assert page.read_bytes() == before
+
+
+def test_asset_resolution_stays_inside_site(tmp_path):
+    site = tmp_path / "site"
+    site.mkdir()
+    page = site / "index.html"
+    outside = tmp_path / "private.png"
+    outside.write_bytes(b"not an image")
+    (site / "linked.png").symlink_to(outside)
+    for url in ("../private.png", "linked.png", "https://example.com/x.png", "//example.com/x.png", "data:image/png;base64,abc"):
+        assert optimizer.local_asset(site, page, url) is None
+
+
+def test_existing_picture_sources_and_animated_images_are_preserved(tmp_path):
+    Image.new("RGB", (20, 10), "red").save(tmp_path / "still.png")
+    Image.new("RGB", (20, 10), "red").save(
+        tmp_path / "animated.webp", save_all=True,
+        append_images=[Image.new("RGB", (20, 10), "blue")], duration=100, loop=0,
+    )
+    page = tmp_path / "index.html"
+    page.write_text('''<picture><source srcset="custom.webp"><img src="still.png"></picture>
+      <img src="animated.webp"><img src="still.png" srcset="custom.png 2x">''')
+    assert optimizer.optimize_site(tmp_path) == 0
+    soup = BeautifulSoup(page.read_text(), "html.parser")
+    assert not soup.picture.img.has_attr("srcset")
+    assert not soup.select("img")[1].has_attr("srcset")
+    assert soup.select("img")[2]["srcset"] == "custom.png 2x"
+
+
+def test_palette_transparency_survives_compression(tmp_path):
+    asset = tmp_path / "transparent.png"
+    original = Image.new("P", (20, 10), 0)
+    original.putpalette([0, 0, 0, 255, 0, 0] + [0] * 762)
+    original.info["transparency"] = 0
+    original.putpixel((10, 5), 1)
+    original.save(asset)
+    width, height, variants = optimizer.image_variants(asset, tmp_path)
+    assert (width, height) == (20, 10)
+    with Image.open(variants[0][0]) as converted:
+        assert converted.getpixel((0, 0))[3] == 0
+        assert converted.getpixel((10, 5))[3] == 255
+
+
+def test_svg_space_is_reserved_without_converting_vectors(tmp_path):
+    asset = tmp_path / "diagram.svg"
+    original = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="350 220 1060 420"></svg>'
+    asset.write_text(original)
+    page = tmp_path / "index.html"
+    page.write_text('''<img src="diagram.svg"><img src="diagram.svg" width="530">
+      <img src="diagram.svg" height="210"><img src="diagram.svg" width="100" height="100">''')
+    optimizer.optimize_site(tmp_path)
+    images = BeautifulSoup(page.read_text(), "html.parser").select("img")
+    assert [(image["width"], image["height"]) for image in images] == [
+        ("1060", "420"), ("530", "210"), ("530", "210"), ("100", "100"),
+    ]
+    assert all(not image.has_attr("srcset") for image in images)
+    assert asset.read_text() == original
+    assert not (tmp_path / "assets/responsive").exists()
diff --git a/zensical.toml b/zensical.toml
index 902282ee..4fbf3cf6 100644
--- a/zensical.toml
+++ b/zensical.toml
@@ -68,6 +68,7 @@ pygments_lang_class = true
 alternate_style = true
 
 [project.theme]
+font = false
 custom_dir = "overrides"
 favicon = "assets/brand/favicon.svg"
 logo = "assets/brand/openshell-mark.svg"