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>

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>
+  );
+}