perf: cache aggressively and trim client bundle

Frontend
- Dynamic-import Chart.js components on detail/compare views so Chart.js
  no longer ships in initial JS.
- Drop force-dynamic on home, compare, rankings so internal data fetches
  reuse Next.js's per-call revalidate cache.
- Switch /school/[slug] to ISR with a 7-day revalidate window (school
  data updates annually).
- Preconnect to analytics + postcodes.io; remove redundant defer on the
  Umami Script tag (afterInteractive already covers it).
- Bump images.minimumCacheTTL to 1 year.
- Extract HowItWorks and Editorial sections as server components passed
  to HomeView via slot props so their JSX stays out of the client bundle.

Backend
- Add GZipMiddleware (min 512 bytes).
- Add CacheAndETagMiddleware: per-path Cache-Control with long s-maxage
  + stale-while-revalidate, ETag generation, and 304 on If-None-Match.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

backend/app.py

@@ -4,6 +4,7 @@ Serves primary and secondary school performance data for comparing schools.
 Uses real data from UK Government Compare School Performance downloads.
 """
 
+import hashlib
 import re
 from contextlib import asynccontextmanager
 from typing import Optional
@@ -12,6 +13,7 @@ import numpy as np
 import pandas as pd
 from fastapi import FastAPI, HTTPException, Query, Request, Depends, Header
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.middleware.gzip import GZipMiddleware
 from fastapi.responses import FileResponse, Response
 from fastapi.staticfiles import StaticFiles
 from slowapi import Limiter, _rate_limit_exceeded_handler
@@ -165,6 +167,69 @@ class SecurityHeadersMiddleware(BaseHTTPMiddleware):
         return response
 
 
+# Per-path Cache-Control rules. Keys are matched as path prefixes (longest wins).
+# Values: (max_age, s_maxage, stale_while_revalidate)
+CACHE_RULES: list[tuple[str, tuple[int, int, int]]] = [
+    ("/api/filters",            (300,  86400, 604800)),
+    ("/api/metrics",            (300,  86400, 604800)),
+    ("/api/national-averages",  (300,  86400, 604800)),
+    ("/api/la-averages",        (300,  86400, 604800)),
+    ("/api/data-info",          (300,  86400, 604800)),
+    ("/api/schools/",           (300,  3600,  86400)),  # /api/schools/{urn}
+    ("/api/rankings",           (60,   600,   3600)),
+    ("/api/compare",            (60,   600,   3600)),
+    ("/api/schools",            (30,   300,   1800)),   # search list
+]
+
+
+def _cache_control_for_path(path: str) -> Optional[str]:
+    # Longest-prefix match
+    best: Optional[tuple[int, tuple[int, int, int]]] = None
+    for prefix, vals in CACHE_RULES:
+        if path.startswith(prefix) and (best is None or len(prefix) > best[0]):
+            best = (len(prefix), vals)
+    if best is None:
+        return None
+    max_age, s_maxage, swr = best[1]
+    return f"public, max-age={max_age}, s-maxage={s_maxage}, stale-while-revalidate={swr}"
+
+
+class CacheAndETagMiddleware(BaseHTTPMiddleware):
+    """Set Cache-Control on cacheable API responses and serve 304s via ETag."""
+
+    async def dispatch(self, request: Request, call_next):
+        response = await call_next(request)
+
+        # Only cache GETs that succeeded.
+        if request.method != "GET" or response.status_code != 200:
+            return response
+
+        cache_header = _cache_control_for_path(request.url.path)
+        if cache_header is None:
+            return response
+
+        # Drain body so we can hash it for ETag.
+        body_chunks = []
+        async for chunk in response.body_iterator:
+            body_chunks.append(chunk)
+        body = b"".join(body_chunks)
+
+        etag = '"' + hashlib.md5(body).hexdigest() + '"'
+        headers = dict(response.headers)
+        headers["Cache-Control"] = cache_header
+        headers["ETag"] = etag
+        headers["Vary"] = ", ".join(filter(None, [headers.get("Vary"), "Accept-Encoding"]))
+
+        inm = request.headers.get("if-none-match")
+        if inm and inm == etag:
+            # Strip content headers on 304.
+            for h in ("Content-Length", "content-length", "Content-Type", "content-type"):
+                headers.pop(h, None)
+            return Response(status_code=304, headers=headers)
+
+        return Response(content=body, status_code=200, headers=headers, media_type=response.media_type)
+
+
 class RequestSizeLimitMiddleware(BaseHTTPMiddleware):
     """Limit request body size to prevent DoS attacks."""
 
@@ -253,9 +318,12 @@ app = FastAPI(
 app.state.limiter = limiter
 app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler)
 
-# Security middleware (order matters - these run in reverse order)
+# Middleware (Starlette runs the last-added middleware first on the way out,
+# so list outermost-last: GZip wraps everything and compresses the final body).
+app.add_middleware(CacheAndETagMiddleware)
 app.add_middleware(SecurityHeadersMiddleware)
 app.add_middleware(RequestSizeLimitMiddleware)
+app.add_middleware(GZipMiddleware, minimum_size=512)
 
 # CORS middleware - restricted for production
 app.add_middleware(

nextjs-app/app/compare/page.tsx

@@ -20,8 +20,8 @@ export const metadata: Metadata = {
   keywords: 'school comparison, compare schools, KS2 comparison, primary school performance',
 };
 
-// Force dynamic rendering
-export const dynamic = 'force-dynamic';
+// Dynamic via searchParams; remove force-dynamic so internal data fetches
+// can still use Next.js's per-call revalidate cache.
 
 export default async function ComparePage({ searchParams }: ComparePageProps) {
   const { urns: urnsParam, metric: metricParam } = await searchParams;

nextjs-app/app/layout.tsx

@@ -74,8 +74,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
+        <link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
+        <link rel="preconnect" href="https://api.postcodes.io" />
         <Script
-          defer
           src="https://analytics.schoolcompare.co.uk/script.js"
           data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
           data-performance="true"

nextjs-app/app/page.tsx

@@ -5,6 +5,8 @@
 
 import { fetchSchools, fetchFilters, fetchDataInfo } from '@/lib/api';
 import { HomeView } from '@/components/HomeView';
+import { HowItWorksSection } from '@/components/HowItWorksSection';
+import { EditorialSection } from '@/components/EditorialSection';
 
 interface HomePageProps {
   searchParams: Promise<{
@@ -27,8 +29,9 @@ export const metadata = {
   description: 'Search and compare school performance across England',
 };
 
-// Force dynamic rendering (no static generation at build time)
-export const dynamic = 'force-dynamic';
+// The page reads searchParams, which makes rendering dynamic by default.
+// We don't use `force-dynamic` here so the internal filter/data-info fetches
+// can still hit Next.js's data cache (configured per-call in lib/api.ts).
 
 export default async function HomePage({ searchParams }: HomePageProps) {
   // Await search params (Next.js 15 requirement)
@@ -75,22 +78,28 @@ export default async function HomePage({ searchParams }: HomePageProps) {
       schoolsData = { schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 };
     }
 
+    const resolvedFilters = filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
+    const total = dataInfo?.total_schools ?? null;
     return (
       <HomeView
         initialSchools={schoolsData}
-        filters={filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
-        totalSchools={dataInfo?.total_schools ?? null}
+        filters={resolvedFilters}
+        totalSchools={total}
+        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
+        editorial={hasSearchParams ? null : <EditorialSection totalSchools={total} localAuthorityCount={resolvedFilters.local_authorities.length} />}
       />
     );
   } catch (error) {
     console.error('Error fetching data for home page:', error);
 
-    // Return error state with empty data
+    const emptyFilters = { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
     return (
       <HomeView
         initialSchools={{ schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 }}
-        filters={{ local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
+        filters={emptyFilters}
         totalSchools={null}
+        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
+        editorial={hasSearchParams ? null : <EditorialSection totalSchools={null} localAuthorityCount={0} />}
       />
     );
   }

nextjs-app/app/rankings/page.tsx

@@ -22,8 +22,8 @@ export const metadata: Metadata = {
   keywords: 'school rankings, top schools, best schools, KS2 rankings, KS4 rankings, school league tables',
 };
 
-// Force dynamic rendering
-export const dynamic = 'force-dynamic';
+// Dynamic via searchParams; remove force-dynamic so internal data fetches
+// can still use Next.js's per-call revalidate cache.
 
 export default async function RankingsPage({ searchParams }: RankingsPageProps) {
   const { metric: metricParam, local_authority, year: yearParam, phase: phaseParam } = await searchParams;

nextjs-app/app/school/[slug]/page.tsx

@@ -4,13 +4,48 @@
  * URL format: /school/138267-school-name-here
  */
 
-import { fetchSchoolDetails } from '@/lib/api';
+import { fetchSchoolDetails, fetchSchools } from '@/lib/api';
 import { notFound, redirect } from 'next/navigation';
 import { SchoolDetailView } from '@/components/SchoolDetailView';
 import { SecondarySchoolDetailView } from '@/components/SecondarySchoolDetailView';
 import { parseSchoolSlug, schoolUrl } from '@/lib/utils';
 import type { Metadata } from 'next';
 
+/**
+ * Enumerate every school for static generation at build time.
+ *
+ * Set PRERENDER_SCHOOLS=1 in the build environment to enable. When disabled
+ * (or when the API can't be reached), we return an empty list and the route
+ * falls back to ISR on first request — `dynamicParams = true` covers it.
+ */
+export async function generateStaticParams(): Promise<Array<{ slug: string }>> {
+  if (process.env.PRERENDER_SCHOOLS !== '1') return [];
+
+  const params: Array<{ slug: string }> = [];
+  const PAGE_SIZE = 500;
+  let page = 1;
+  let totalPages = 1;
+
+  try {
+    do {
+      const res = await fetchSchools({ page, page_size: PAGE_SIZE });
+      for (const s of res.schools) {
+        const path = schoolUrl(s.urn, s.school_name);
+        const slug = path.replace('/school/', '');
+        params.push({ slug });
+      }
+      totalPages = res.total_pages || 1;
+      page += 1;
+    } while (page <= totalPages);
+  } catch (error) {
+    console.warn('generateStaticParams: API unreachable, falling back to on-demand ISR.', error);
+    return [];
+  }
+
+  console.log(`generateStaticParams: prebuilding ${params.length} school pages.`);
+  return params;
+}
+
 interface SchoolPageProps {
   params: Promise<{ slug: string }>;
 }
@@ -75,8 +110,10 @@ export async function generateMetadata({ params }: SchoolPageProps): Promise<Met
   }
 }
 
-// Force dynamic rendering
-export const dynamic = 'force-dynamic';
+// ISR: regenerate at most once a week per slug. School data updates annually,
+// so a 7-day cache is plenty and gives sub-100ms TTFB on cache hits.
+export const revalidate = 604800;
+export const dynamicParams = true;
 
 export default async function SchoolPage({ params }: SchoolPageProps) {
   const { slug } = await params;

nextjs-app/components/ComparisonView.tsx

@@ -7,8 +7,13 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import dynamic from 'next/dynamic';
 import { useComparison } from '@/hooks/useComparison';
-import { ComparisonChart } from './ComparisonChart';
+
+const ComparisonChart = dynamic(
+  () => import('./ComparisonChart').then((m) => m.ComparisonChart),
+  { ssr: false },
+);
 import { SchoolSearchModal } from './SchoolSearchModal';
 import { EmptyState } from './EmptyState';
 import { LoadingSkeleton } from './LoadingSkeleton';

nextjs-app/components/EditorialSection.tsx

@@ -0,0 +1,59 @@
+// Server component: pure markup, no client state.
+
+import styles from './HomeView.module.css';
+
+interface EditorialSectionProps {
+  totalSchools: number | null;
+  localAuthorityCount: number;
+}
+
+export function EditorialSection({ totalSchools, localAuthorityCount }: EditorialSectionProps) {
+  return (
+    <section className={styles.editorial}>
+      <div className={styles.editorialGrid}>
+        <div className={styles.editorialText}>
+          <div className={styles.editorialKicker}>About school data</div>
+          <h2 className={styles.editorialHeading}>Making UK school performance data actually readable</h2>
+          <p>
+            School performance data in England is rich but fragmented. The Department for Education publishes
+            Key Stage 2 SATs, GCSE attainment, Ofsted outcomes, progress scores, admissions figures and
+            demographics — each in its own table, each with its own jargon.
+          </p>
+          <p>
+            SchoolCompare brings it all into one place. Every school page shows performance against the national
+            average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
+            parents, governors, journalists, and anyone who wants to understand a school without reading a
+            40-page inspection report.
+          </p>
+        </div>
+        <div className={styles.factbox}>
+          <h3 className={styles.factboxHeading}>Coverage at a glance</h3>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Schools covered</span>
+            <span className={styles.factVal}>{totalSchools ? `${totalSchools.toLocaleString()}` : '24,000+'}</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Local authorities</span>
+            <span className={styles.factVal}>{localAuthorityCount > 0 ? localAuthorityCount : 152}</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Phases</span>
+            <span className={styles.factVal}>Primary &amp; Secondary</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Latest results year</span>
+            <span className={styles.factVal}>2024/25</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Historical data</span>
+            <span className={styles.factVal}>2016–2025</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Metrics per school</span>
+            <span className={styles.factVal}>40+</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

nextjs-app/components/HomeView.tsx

@@ -23,6 +23,11 @@ interface HomeViewProps {
   initialSchools: SchoolsResponse;
   filters: Filters;
   totalSchools?: number | null;
+  // Slot props for static markup the server pre-renders so it stays out of
+  // the client bundle. Server passes null when the landing sections shouldn't
+  // show (e.g. an active search).
+  howItWorks?: React.ReactNode;
+  editorial?: React.ReactNode;
 }
 
 function daysUntil(month: number, day: number): number {
@@ -58,7 +63,7 @@ const ADMISSIONS_CHIPS: CountdownChipData[] = [
   { type: 'offer',    track: 'Secondary · Offer Day',      milestone: 'Secondary National Offer Day',   month: 3,  day: 1  },
 ];
 
-export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProps) {
+export function HomeView({ initialSchools, filters, totalSchools, howItWorks, editorial }: HomeViewProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
@@ -370,170 +375,9 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
         </div>
       )}
 
-      {/* How it works — only on landing page */}
-      {!isSearchActive && (
-        <section className={styles.howItWorks}>
-          <div className={styles.hiwHeader}>
-            <h2 className={styles.hiwHeading}>What you&apos;ll see on every school</h2>
-            <span className={styles.hiwSub}>Primary or secondary — the page adapts to the phase</span>
-          </div>
-          <div className={styles.hiwGrid}>
-
-            {/* Card 1 — Performance */}
-            <div className={styles.hiwCard}>
-              <div className={styles.hiwVisual}>
-                {/* Primary: mini cascade */}
-                <div className={styles.hiwPhaseBlock}>
-                  <div className={styles.hiwPhaseLabel}>Primary · Year 6 · <strong>Key Stage 2 SATs</strong></div>
-                  <div className={styles.miniCascade}>
-                    {[
-                      { subj: 'Reading', exp: 96, exc: 73, nat: 75 },
-                      { subj: 'Writing', exp: 81, exc: 15, nat: 72 },
-                      { subj: 'Maths', exp: 85, exc: 47, nat: 74 },
-                    ].map(({ subj, exp, exc, nat }) => (
-                      <div key={subj} className={styles.miniCascadeCol}>
-                        <div className={styles.miniSubj}>{subj}</div>
-                        <div className={styles.miniRowHead}><span>Expected</span><strong>{exp}%</strong></div>
-                        <div className={styles.miniTrack}>
-                          <div className={styles.miniNatPill} style={{ left: `${nat}%` }}>{nat}%</div>
-                          <div className={styles.miniBarExp} style={{ width: `${exp}%` }} />
-                        </div>
-                        <div className={styles.miniRowHead}><span>Exceeding</span><strong>{exc}%</strong></div>
-                        <div className={styles.miniTrack}>
-                          <div className={styles.miniBarExc} style={{ width: `${exc}%` }} />
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-                {/* Secondary: Attainment 8 */}
-                <div className={styles.hiwPhaseBlock}>
-                  <div className={styles.hiwPhaseLabel}>Secondary · Year 11 · <strong>GCSE Attainment 8</strong></div>
-                  <div className={styles.att8Row}>
-                    <div className={styles.att8BarWrap}>
-                      <div className={styles.att8BarHead}><span>This school</span><span>National avg 50.2</span></div>
-                      <div className={styles.att8Track}>
-                        <div className={styles.att8Fill} style={{ width: '62%' }} />
-                        <div className={styles.att8NatLine} style={{ left: '50%' }} />
-                      </div>
-                    </div>
-                    <div className={styles.att8Score}>
-                      <div className={styles.att8Value}>62.4</div>
-                      <div className={styles.att8Delta}>+12.2 vs national</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className={styles.hiwCardBody}>
-                <div className={styles.hiwStep}>Performance</div>
-                <div className={styles.hiwTitle}>Results against the national average</div>
-                <p className={styles.hiwDesc}>For primary schools, each subject&apos;s Expected and Exceeding percentages side by side. For secondary schools, GCSE Attainment 8 with the national benchmark overlaid.</p>
-              </div>
-            </div>
-
-            {/* Card 2 — Ofsted */}
-            <div className={styles.hiwCard}>
-              <div className={styles.hiwVisual}>
-                <div className={styles.ofstedPreview}>
-                  <div className={styles.ofstedHead}>
-                    <span className={styles.ofstedBullet} />
-                    <span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
-                  </div>
-                  <span className={styles.ofstedBadge}>OUTSTANDING</span>
-                  <div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
-                  <div className={styles.ofstedMeta}>Full inspection · March 2024</div>
-                </div>
-              </div>
-              <div className={styles.hiwCardBody}>
-                <div className={styles.hiwStep}>Judgement</div>
-                <div className={styles.hiwTitle}>Ofsted at a glance</div>
-                <p className={styles.hiwDesc}>Current grade, inspection date, and a plain-English headline — without opening a 40-page report.</p>
-              </div>
-            </div>
-
-            {/* Card 3 — Compare */}
-            <div className={styles.hiwCard}>
-              <div className={styles.hiwVisual}>
-                <div className={styles.comparePreview}>
-                  <div className={styles.compareHead}>
-                    <div className={`${styles.compareHeadCell} ${styles.compareHeadLabel}`}>Metric</div>
-                    <div className={styles.compareHeadCell}>Our Lady<br />Queen of Heaven</div>
-                    <div className={styles.compareHeadCell}>St Mary&apos;s<br />Catholic Primary</div>
-                  </div>
-                  {[
-                    { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
-                    { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
-                    { label: 'Reading progress', a: '+2.1', b: '+0.4', aHi: true },
-                  ].map(({ label, a, b, aHi }) => (
-                    <div key={label} className={styles.compareRow}>
-                      <span className={styles.compareRowLabel}>{label}</span>
-                      <span className={`${styles.compareRowVal} ${aHi ? styles.compareRowValHi : ''}`}>{a}</span>
-                      <span className={styles.compareRowVal}>{b}</span>
-                    </div>
-                  ))}
-                  <div className={styles.compareFoot}>+ pin up to 5 schools</div>
-                </div>
-              </div>
-              <div className={styles.hiwCardBody}>
-                <div className={styles.hiwStep}>Compare</div>
-                <div className={styles.hiwTitle}>Side-by-side shortlists</div>
-                <p className={styles.hiwDesc}>Pin up to five schools and every metric aligns in the same columns — works for primary and secondary alike.</p>
-              </div>
-            </div>
-
-          </div>
-        </section>
-      )}
-
-      {/* Editorial — only on landing page */}
-      {!isSearchActive && (
-        <section className={styles.editorial}>
-          <div className={styles.editorialGrid}>
-            <div className={styles.editorialText}>
-              <div className={styles.editorialKicker}>About school data</div>
-              <h2 className={styles.editorialHeading}>Making UK school performance data actually readable</h2>
-              <p>
-                School performance data in England is rich but fragmented. The Department for Education publishes
-                Key Stage 2 SATs, GCSE attainment, Ofsted outcomes, progress scores, admissions figures and
-                demographics — each in its own table, each with its own jargon.
-              </p>
-              <p>
-                SchoolCompare brings it all into one place. Every school page shows performance against the national
-                average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
-                parents, governors, journalists, and anyone who wants to understand a school without reading a
-                40-page inspection report.
-              </p>
-            </div>
-            <div className={styles.factbox}>
-              <h3 className={styles.factboxHeading}>Coverage at a glance</h3>
-              <div className={styles.factRow}>
-                <span className={styles.factKey}>Schools covered</span>
-                <span className={styles.factVal}>{totalSchools ? `${totalSchools.toLocaleString()}` : '24,000+'}</span>
-              </div>
-              <div className={styles.factRow}>
-                <span className={styles.factKey}>Local authorities</span>
-                <span className={styles.factVal}>{filters.local_authorities.length > 0 ? filters.local_authorities.length : 152}</span>
-              </div>
-              <div className={styles.factRow}>
-                <span className={styles.factKey}>Phases</span>
-                <span className={styles.factVal}>Primary &amp; Secondary</span>
-              </div>
-              <div className={styles.factRow}>
-                <span className={styles.factKey}>Latest results year</span>
-                <span className={styles.factVal}>2024/25</span>
-              </div>
-              <div className={styles.factRow}>
-                <span className={styles.factKey}>Historical data</span>
-                <span className={styles.factVal}>2016–2025</span>
-              </div>
-              <div className={styles.factRow}>
-                <span className={styles.factKey}>Metrics per school</span>
-                <span className={styles.factVal}>40+</span>
-              </div>
-            </div>
-          </div>
-        </section>
-      )}
+      {/* How it works + Editorial — server-rendered slots, only on landing */}
+      {!isSearchActive && howItWorks}
+      {!isSearchActive && editorial}
 
       {/* Results Section */}
       <section className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''}`}>

nextjs-app/components/HowItWorksSection.tsx

@@ -0,0 +1,120 @@
+// Server component: pure markup, no client state.
+// Rendered into HomeView via a slot prop so its JSX doesn't bloat the
+// HomeView client bundle.
+
+import styles from './HomeView.module.css';
+
+export function HowItWorksSection() {
+  const miniCascade = [
+    { subj: 'Reading', exp: 96, exc: 73, nat: 75 },
+    { subj: 'Writing', exp: 81, exc: 15, nat: 72 },
+    { subj: 'Maths', exp: 85, exc: 47, nat: 74 },
+  ];
+  const compareRows = [
+    { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
+    { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
+    { label: 'Reading progress', a: '+2.1', b: '+0.4', aHi: true },
+  ];
+
+  return (
+    <section className={styles.howItWorks}>
+      <div className={styles.hiwHeader}>
+        <h2 className={styles.hiwHeading}>What you&apos;ll see on every school</h2>
+        <span className={styles.hiwSub}>Primary or secondary — the page adapts to the phase</span>
+      </div>
+      <div className={styles.hiwGrid}>
+        {/* Card 1 — Performance */}
+        <div className={styles.hiwCard}>
+          <div className={styles.hiwVisual}>
+            <div className={styles.hiwPhaseBlock}>
+              <div className={styles.hiwPhaseLabel}>Primary · Year 6 · <strong>Key Stage 2 SATs</strong></div>
+              <div className={styles.miniCascade}>
+                {miniCascade.map(({ subj, exp, exc, nat }) => (
+                  <div key={subj} className={styles.miniCascadeCol}>
+                    <div className={styles.miniSubj}>{subj}</div>
+                    <div className={styles.miniRowHead}><span>Expected</span><strong>{exp}%</strong></div>
+                    <div className={styles.miniTrack}>
+                      <div className={styles.miniNatPill} style={{ left: `${nat}%` }}>{nat}%</div>
+                      <div className={styles.miniBarExp} style={{ width: `${exp}%` }} />
+                    </div>
+                    <div className={styles.miniRowHead}><span>Exceeding</span><strong>{exc}%</strong></div>
+                    <div className={styles.miniTrack}>
+                      <div className={styles.miniBarExc} style={{ width: `${exc}%` }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className={styles.hiwPhaseBlock}>
+              <div className={styles.hiwPhaseLabel}>Secondary · Year 11 · <strong>GCSE Attainment 8</strong></div>
+              <div className={styles.att8Row}>
+                <div className={styles.att8BarWrap}>
+                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 50.2</span></div>
+                  <div className={styles.att8Track}>
+                    <div className={styles.att8Fill} style={{ width: '62%' }} />
+                    <div className={styles.att8NatLine} style={{ left: '50%' }} />
+                  </div>
+                </div>
+                <div className={styles.att8Score}>
+                  <div className={styles.att8Value}>62.4</div>
+                  <div className={styles.att8Delta}>+12.2 vs national</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.hiwCardBody}>
+            <div className={styles.hiwStep}>Performance</div>
+            <div className={styles.hiwTitle}>Results against the national average</div>
+            <p className={styles.hiwDesc}>For primary schools, each subject&apos;s Expected and Exceeding percentages side by side. For secondary schools, GCSE Attainment 8 with the national benchmark overlaid.</p>
+          </div>
+        </div>
+
+        {/* Card 2 — Ofsted */}
+        <div className={styles.hiwCard}>
+          <div className={styles.hiwVisual}>
+            <div className={styles.ofstedPreview}>
+              <div className={styles.ofstedHead}>
+                <span className={styles.ofstedBullet} />
+                <span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
+              </div>
+              <span className={styles.ofstedBadge}>OUTSTANDING</span>
+              <div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
+              <div className={styles.ofstedMeta}>Full inspection · March 2024</div>
+            </div>
+          </div>
+          <div className={styles.hiwCardBody}>
+            <div className={styles.hiwStep}>Judgement</div>
+            <div className={styles.hiwTitle}>Ofsted at a glance</div>
+            <p className={styles.hiwDesc}>Current grade, inspection date, and a plain-English headline — without opening a 40-page report.</p>
+          </div>
+        </div>
+
+        {/* Card 3 — Compare */}
+        <div className={styles.hiwCard}>
+          <div className={styles.hiwVisual}>
+            <div className={styles.comparePreview}>
+              <div className={styles.compareHead}>
+                <div className={`${styles.compareHeadCell} ${styles.compareHeadLabel}`}>Metric</div>
+                <div className={styles.compareHeadCell}>Our Lady<br />Queen of Heaven</div>
+                <div className={styles.compareHeadCell}>St Mary&apos;s<br />Catholic Primary</div>
+              </div>
+              {compareRows.map(({ label, a, b, aHi }) => (
+                <div key={label} className={styles.compareRow}>
+                  <span className={styles.compareRowLabel}>{label}</span>
+                  <span className={`${styles.compareRowVal} ${aHi ? styles.compareRowValHi : ''}`}>{a}</span>
+                  <span className={styles.compareRowVal}>{b}</span>
+                </div>
+              ))}
+              <div className={styles.compareFoot}>+ pin up to 5 schools</div>
+            </div>
+          </div>
+          <div className={styles.hiwCardBody}>
+            <div className={styles.hiwStep}>Compare</div>
+            <div className={styles.hiwTitle}>Side-by-side shortlists</div>
+            <p className={styles.hiwDesc}>Pin up to five schools and every metric aligns in the same columns — works for primary and secondary alike.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

nextjs-app/components/SchoolDetailView.tsx

@@ -7,8 +7,8 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
 import { useComparison } from '@/hooks/useComparison';
-import { PerformanceChart } from './PerformanceChart';
 import { SchoolMap } from './SchoolMap';
 import { MetricTooltip } from './MetricTooltip';
 import type {
@@ -22,7 +22,12 @@ import {
   buildOfstedHeroChip,
 } from '@/lib/utils';
 import { DeltaChip } from './DeltaChip';
-import SatsChart from './SatsChart';
+
+const PerformanceChart = dynamic(
+  () => import('./PerformanceChart').then((m) => m.PerformanceChart),
+  { ssr: false },
+);
+const SatsChart = dynamic(() => import('./SatsChart'), { ssr: false });
 import { track, getNavigationSource } from '@/lib/analytics';
 import styles from './SchoolDetailView.module.css';
 

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -8,10 +8,15 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
 import { useComparison } from '@/hooks/useComparison';
-import { PerformanceChart } from './PerformanceChart';
 import { MetricTooltip } from './MetricTooltip';
 import { SchoolMap } from './SchoolMap';
+
+const PerformanceChart = dynamic(
+  () => import('./PerformanceChart').then((m) => m.PerformanceChart),
+  { ssr: false },
+);
 import type {
   School, SchoolResult, AbsenceData,
   OfstedInspection, OfstedParentView, SchoolCensus,

nextjs-app/next.config.js

@@ -27,7 +27,7 @@ const nextConfig = {
       { protocol: 'https', hostname: 'cdnjs.cloudflare.com' },
     ],
     formats: ['image/avif', 'image/webp'],
-    minimumCacheTTL: 60,
+    minimumCacheTTL: 31536000,
   },
 
   // Performance optimizations

nextjs-app/package-lock.json

@@ -90,7 +90,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -641,7 +640,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -665,7 +663,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2295,6 +2292,7 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -2383,7 +2381,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2564,7 +2563,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2574,7 +2572,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2652,7 +2649,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -3128,7 +3124,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3596,7 +3591,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3745,7 +3739,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -4145,7 +4138,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
@@ -4411,7 +4405,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4589,7 +4582,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -7137,7 +7129,6 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -7267,8 +7258,7 @@
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/leven": {
       "version": "3.1.0",
@@ -7348,6 +7338,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -8094,6 +8085,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -8109,6 +8101,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8121,7 +8114,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
@@ -8185,7 +8179,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8205,7 +8198,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -9219,7 +9211,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9448,7 +9439,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10023,7 +10013,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }