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

@lfrancke lfrancke 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

netlify Bot commented Jul 16, 2026

Copy link
Copy Markdown

Deploy Preview for stackable-docs ready!

Name Link
🔨 Latest commit b322948
🔍 Latest deploy log https://app.netlify.com/projects/stackable-docs/deploys/6a5f34568fb3040008937975
😎 Deploy Preview https://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
lfrancke force-pushed the perf/fonts-and-caching branch 3 times, most recently from 1b9508a to 455d079 Compare July 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
lfrancke force-pushed the perf/fonts-and-caching branch from 455d079 to b322948 Compare July 21, 2026 08:56
@lfrancke lfrancke moved this to Development: Waiting for Review in Stackable Engineering Jul 21, 2026
@lfrancke lfrancke self-assigned this Jul 21, 2026
@xeniape xeniape moved this from Development: Waiting for Review to Development: In Review in Stackable Engineering Jul 28, 2026
@lfrancke
lfrancke added this pull request to the merge queue Jul 28, 2026
Merged via the queue into main with commit 81aa2d8 Jul 28, 2026
8 checks passed
@lfrancke
lfrancke deleted the perf/fonts-and-caching branch July 28, 2026 06:55
@sbernauer sbernauer moved this from Development: In Review to Development: Done in Stackable Engineering Jul 29, 2026
@lfrancke lfrancke moved this from Development: Done to Done in Stackable Engineering Aug 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

3 participants