Skip to content

perf: Load fonts with font-display swap, preloads and caching - #889

Merged
lfrancke merged 1 commit into
mainfrom
perf/fonts-and-caching
Jul 28, 2026
Merged

perf: Load fonts with font-display swap, preloads and caching#889
lfrancke merged 1 commit into
mainfrom
perf/fonts-and-caching

Conversation

@lfrancke

@lfranckelfrancke commented Jul 16, 2026

Copy link
Copy Markdown
Member

Description

I did run a Google Lighthouse/PageSpeed check over the docs site and had Claude help me with fixing some of the issues, namely these two:

image
  • Font display by using font-display: swap: text renders immediately in the fallback font instead of waiting for webfonts (Lighthouse estimates ~400 ms).
  • Partially: Network depenency tree: By preloading the two important fonts, so the swapping (above) should usually not even hit
  • Use efficient cache lifetimes: Cache-Control: max-age=3600. One hour only: the bundle file names aren't content-hashed yet, so I didn't want to go any higher. My plan is to use content-hashing in the future. Especially now with bunny in front that should make things easier.

@netlify

netlifyBot commented Jul 16, 2026

Copy link
Copy Markdown

Deploy Preview for stackable-docs ready!

NameLink
🔨 Latest commitb322948
🔍 Latest deploy loghttps://app.netlify.com/projects/stackable-docs/deploys/6a5f34568fb3040008937975
😎 Deploy Previewhttps://deploy-preview-889--stackable-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@lfrancke
lfranckeforce-pushed the perf/fonts-and-caching branch 3 times, most recently from 1b9508a to 455d079CompareJuly 21, 2026 08:51
Mobile Lighthouse attributes ~400 ms of first-paint delay to the fonts
blocking text rendering:
- font-display: swap on all six faces, so text renders in the fallback
font until the webfonts arrive.
- Preload the two above-the-fold fonts (body Noto Sans 400 and heading
IBM Plex Mono 600), so they usually arrive before first paint anyway.
- Cache the UI bundle assets for a day via netlify.toml headers (the
Lighthouse cache-lifetimes finding; a day keeps a stale-css window
after deploys short since the file names are not content-hashed).
@lfrancke
lfranckeforce-pushed the perf/fonts-and-caching branch from 455d079 to b322948CompareJuly 21, 2026 08:56
@lfranckelfrancke moved this to Development: Waiting for Review in Stackable EngineeringJul 21, 2026
@lfranckelfrancke self-assigned this Jul 21, 2026
@xeniapexeniape moved this from Development: Waiting for Review to Development: In Review in Stackable EngineeringJul 28, 2026
@lfrancke
lfrancke added this pull request to the merge queueJul 28, 2026
Merged via the queue into main with commit 81aa2d8Jul 28, 2026
8 checks passed
@lfrancke
lfrancke deleted the perf/fonts-and-caching branch July 28, 2026 06:55
@sbernauersbernauer moved this from Development: In Review to Development: Done in Stackable EngineeringJul 29, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Development: Done

Development

Successfully merging this pull request may close these issues.

3 participants

@lfrancke@xeniape@sbernauer