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>
2026-06-02 13:46:45 +01:00
parent a7ab624a01
commit 62eeee5f7c
14 changed files with 349 additions and 207 deletions
@@ -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;
@@ -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"
@@ -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} />}
      />
    );
  }
@@ -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;
@@ -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;
@@ -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';
@@ -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>
+  );
+}
@@ -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 : ''}`}>
@@ -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>
+  );
+}
@@ -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';

@@ -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,
@@ -27,7 +27,7 @@ const nextConfig = {
      { protocol: 'https', hostname: 'cdnjs.cloudflare.com' },
    ],
    formats: ['image/avif', 'image/webp'],
-    minimumCacheTTL: 60,
+    minimumCacheTTL: 31536000,
  },

  // Performance optimizations
@@ -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"
      }