A Practical Guide to Image and Font Loading Strategy
Controlling when images and fonts are fetched and how the page behaves while waiting.
Marcus Adeyemi
The key figures
- loading attribute
- lazy defers offscreen images
- fetchpriority
- hints relative priority to the browser
- font-display
- controls the block, swap and fallback periods
- Preload
- for resources discovered late but needed early
- Subsetting
- reduces font file size to the glyphs in use
Why this is worth getting right
Images and fonts are the two resource types most likely to delay rendering or shift layout, and both are controllable with well-specified attributes.
Do this, not that
Do
- Lazy-load below the fold and never above it
- Preload the LCP image and critical fonts
- Subset fonts to the glyph ranges in use
- Set font-display so text is not invisible while loading
- Match fallback metrics to prevent shift on swap
Don’t
- Lazy-loading the hero image
- Preloading everything, which removes the prioritization benefit
- Full-glyph fonts on a Latin-only site
- Invisible text during font loading on content pages
When to bring in help
Our advice Bring in help when loading strategy is causing layout shift, when a CMS controls image markup, or when font licensing restricts subsetting.
Where this comes from
- web.dev — Optimize resource loading
- MDN Web Docs — Lazy loading and font-display
- Chrome for Developers — Resource priorities
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
