font-display, image priority & content-visibility

Pages that load fast

Lesson 19 of 20 · 11 min · Module 6: Fast pages and the capstone

Speed is part of the design. Visitors leave slow pages, and search engines rank them lower. A few attributes and CSS properties make the browser fetch the important things first and postpone the rest.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Load web fonts without invisible text
Prioritise the main image and postpone the rest
Skip rendering off-screen content

The idea

font-display: swap in @font-face shows text in a fallback font immediately and swaps in the web font when it arrives. fetchpriority="high" moves the main image to the front of the queue, while loading="lazy" postpones images further down. content-visibility: auto lets the browser skip rendering sections that are off screen, and contain-intrinsic-size gives them an estimated height meanwhile.

@font-face {
  font-family: "Brand";
  src: url("brand.woff2") format("woff2");
  font-display: swap;
}

01Never hide text

Without font-display: swap, some browsers show invisible text for up to three seconds while a font downloads. With swap, people can start reading at once in the fallback font.

02Tell the browser what matters

The largest image at the top usually decides how fast a page feels. fetchpriority="high" requests it early; loading="lazy" on images further down frees bandwidth for it.

<img src="hero.jpg" fetchpriority="high" alt="…">
<img src="avatar.jpg" loading="lazy" alt="">

03Render on demand

content-visibility: auto skips layout and painting for sections far below the screen until people scroll near them. contain-intrinsic-size keeps an estimated height, so the scrollbar does not jump.

Your turn

1) Add @font-face for "Brand" with src: url("brand.woff2") format("woff2") and font-display: swap, and set body to font-family: "Brand", system-ui, sans-serif. 2) The hero image is the most important picture: remove its loading="lazy" and add fetchpriority="high". 3) Add loading="lazy" to the three comment avatars. 4) Give .comments content-visibility: auto and contain-intrinsic-size: auto 600px.

What the checks look for

The brand font swaps in without hiding text
The page uses the brand font with fallbacks
The hero image loads first, not lazily
Comment avatars load lazily
Comments are only rendered when needed
They reserve an estimated height

Try it in the editor →

Take this with you

Load the important things first and postpone the rest.

Go a little further

Add <link rel="preload" href="brand.woff2" as="font" type="font/woff2" crossorigin> to the head of a real page, so the font starts downloading even earlier.