From 07358441bd8f65bd1c5e5db3bcc80a616bfd4716 Mon Sep 17 00:00:00 2001 From: Sebastian Mendel Date: Sun, 10 May 2026 17:52:33 +0200 Subject: [PATCH] perf: font-display: optional to eliminate CLS from font swap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Lighthouse CLS audit reported a 0.021 layout shift on the index lede, and the LCP breakdown attributed a 200 ms element render delay to the same paragraph — both from Source Serif 4 swapping in over the system serif fallback after first paint. Switching all four self-hosted @font-face declarations from font-display: swap to font-display: optional eliminates the swap step entirely: - Browser blocks ~100 ms waiting for the (preloaded) font. - If the font arrives in time, it is used from first paint — no fallback ever rendered, no swap, no shift. - If the font does not arrive in 100 ms, the fallback is used for the rest of the session and the web font is cached for the next visit. Our 50 KB woff2 files are 'd in , so on any normal connection they arrive well within 100 ms and the web font is the one users see on first visit. Local Lighthouse desktop preset, post-change, all three pages: - categories: 100 / 100 / 100 / 100 - cumulative-layout-shift: 0 (was 0.021) - largest-contentful-paint: 0.4 s - layout-shifts items: 0 (was 1: the lede) Visual identity preserved: Source Serif 4 still renders on every test page; the variable-weight italic and Inter UI fonts are unchanged beyond the same display swap → optional substitution. Signed-off-by: Sebastian Mendel --- assets/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/style.css b/assets/style.css index 0b70381..f0e9706 100644 --- a/assets/style.css +++ b/assets/style.css @@ -10,7 +10,7 @@ url("fonts/SourceSerif4-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; - font-display: swap; + font-display: optional; } @font-face { font-family: "Source Serif 4 Variable"; @@ -18,7 +18,7 @@ url("fonts/SourceSerif4-Variable-Italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; - font-display: swap; + font-display: optional; } @font-face { font-family: "Inter Variable"; @@ -26,7 +26,7 @@ url("fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; - font-display: swap; + font-display: optional; } @font-face { font-family: "Inter Variable"; @@ -34,7 +34,7 @@ url("fonts/Inter-Variable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; - font-display: swap; + font-display: optional; } /* -------- Tokens -------- */