Change font-display: fallback to font-display: swap to improve percieved performance

[Nooshu]

Hypothesis

Changing font-display: fallback to font-display: swap will improve perceived performance for users.

Reasons for Hypothesis

According to the specification:

swap - Gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period.

fallback - Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (3s is recommended in most cases).

So for swap, the browser will draw the text immediately (within 100ms) with a fallback font, then the browser has infinite time to swap the font out for the web font once loaded.

With fallback the browser will draw the text immediately (within 100ms) with the fallback font. But the browser only has a finite period of time to swap to the web font once loaded. If the font isn't loaded in 3 seconds, the fallback font will be used for the lifetime of the page.

Others have suggested changing font-display from fallback to swap too. To quote from Addy Osmani:

...self-hosted Web Fonts have a zero second block period and an infinite swap period. Browsers would draw text immediately with a fallback used if the font face isn't loaded, but swap as soon as it does load.

More discussion about this can be seen here, here and here.

Cloudflare Results

I tested both font-display settings using under different conditions, browsers and devices. All tests were run using WebPageTest, and the visual output of each test observed to see which completed in a way that is best for the user.

Note: Tests on the govuk-frontend-review-pr-* domains link to third-party resources (CSS, JS) from Cloudflare and sometimes Google Fonts. The reliance on this third-party CSS could be the cause of some of the fluctuations in performance due to network congestion at the time the test is run.

Chrome - 3G - Announcements

Observations

Fallback renders pixels to the page 32ms before swap, FOIT occurs. Swap shows the web font at the same time as the page renders. In this case fallback has better perceived performance.

Fallback

• First Paint (FP): 4134ms
• First Contentful Paint (FCP): 4168ms
• Web font shown at: 4168ms

Swap

• First Paint (FP): 4168ms
• First Contentful Paint (FCP): 4168ms
• Web font shown at: 4168ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Chrome - 3G - Applicant

Observations

fallback renders pixels to the page before swap, FOIT occurs. fallback shows content before swap. swap loads and displays the web font 700ms quicker than fallback

Fallback

• First Paint (FP): 4067ms
• First Contentful Paint (FCP): 4101ms
• Web font shown at: 5835ms

Swap

• First Paint (FP): 4334ms
• First Contentful Paint (FCP): 4401ms
• Web font shown at: 5134ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Chrome - 3G - Bank Holidays

Observations

fallback renders pixels to the page before swap, FOIT occurs. fallback renders content to the page quicker than swap (300ms). Web font for swap loads 300ms slower than fallback.

Fallback

• First Paint (FP): 4067ms
• First Contentful Paint (FCP): 4168ms
• Web font shown at: 5068ms

Swap

• First Paint (FP): 4401ms
• First Contentful Paint (FCP): 4401ms
• Web font shown at: 5401ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Firefox - 3G - Announcements

Observations

fallback renders pixels to the viewport, content to the page, and loads the web font 200ms quicker than swap.

Fallback

• First Paint (FP): 4268ms
• First Contentful Paint (FCP): 4368ms
• Web font shown at: 4834ms

Swap

• First Paint (FP): 4434ms
• First Contentful Paint (FCP): 4534ms
• Web font shown at: 5001ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Firefox - 3G - Applicant

Observations

FOIT observed when using fallback. It renders pixels and content to the viewport quicker (100ms). Web font also loads 100ms quicker.

Fallback

• First Paint (FP): 5301ms
• First Contentful Paint (FCP): 5334ms
• Web font shown at: 6701ms

Swap

• First Paint (FP): 5434ms
• First Contentful Paint (FCP): 5434ms
• Web font shown at: 6801ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Firefox - 3G - Bank Holidays

Observations

FOIT visible for 100ms for both. fallback renders pixels to the viewport 200ms quicker. Font loads and displays quicker for fallback.

Fallback

• First Paint (FP): 4434ms
• First Contentful Paint (FCP): 4534ms
• Web font shown at: 5268ms

Swap

• First Paint (FP): 4668ms
• First Contentful Paint (FCP): 4737ms
• Web font shown at: 5468ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Moto G4 - Chrome - 3G - Announcements

Tested on a real device, based in Dulles, VA.

Observations

swap page rendered extremely quickly once resources were loaded, within a single frame (~16ms). FOIT only visible for the fallback for 100ms.

Fallback

• First Paint (FP): 5218ms
• First Contentful Paint (FCP): 5384ms
• Web font shown at: 5384ms

Swap

• First Paint (FP): 5168ms
• First Contentful Paint (FCP): 5168ms
• Web font shown at: 5168ms

Perceived performance winner

swap

Full results

Full comparison results can be found here.

Moto G4 - Chrome - 3G - Applicant

Tested on a real device, based in Dulles, VA.

Observations

FOIT seen for first 100ms in both cases. swap renders pixels to the page some 500ms before fallback in this case. Page completion delayed due to the loading of the crown icon (not relevant).

Fallback

• First Paint (FP): 5618ms
• First Contentful Paint (FCP): 5701ms
• Web font shown at: 5701ms

Swap

• First Paint (FP): 5168ms
• First Contentful Paint (FCP): 5301ms
• Web font shown at: 5301ms

Perceived performance winner

swap

Full results

Full comparison results can be found here.

Moto G4 - Chrome - 3G - Bank Holidays

Tested on a real device, based in Dulles, VA.

Observations

FOIT visible for around 200ms with fallback, and it renders pixels to the screen before swap. Content is rendered to the viewport at a similar time for both cases. Same applies for the actual web font download.

Fallback

• First Paint (FP): 5168ms
• First Contentful Paint (FCP): 5318ms
• Web font shown at: 5318ms

Swap

• First Paint (FP): 5351ms
• First Contentful Paint (FCP): 5351ms
• Web font shown at: 5351ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Fastly Results

Sample pages taken from GOV.UK were tested to understand what the results were without the third-party dependencies. In this case the assets domain has also been removed which will remove the performance bottleneck when using HTTP/2.

HTTP/1.1 and HTTP/2 were tested to see how the protocol effected the results.

GOV.UK Homepage - HTTP/1.1 - 3G - Chrome

Observations

FOIT seen in the fallback version for 100ms, but not for swap. Initial page render contains the fallback font for swap, so perceived performance is better for this case. Actual font load is slower for swap by 100ms.

Fallback

• First Paint (FP): 3434ms
• First Contentful Paint (FCP): 3567ms
• Webfont shown at: 4601ms

Swap

• First Paint (FP): 3501ms
• First Contentful Paint (FCP): 3501ms
• Web font shown at: 4734ms

Perceived performance winner

swap

Full results

Full comparison results can be found here.

GOV.UK Homepage - HTTP/2 - 3G - Chrome

Observations

FOIT seen with fallback but not swap. Pixels rendered to the viewport 100ms quicker with fallback, actual content rendered at the same time. Font loads in a similar time.

Fallback

• First Paint (FP): 3434ms
• First Contentful Paint (FCP): 3534ms
• Web font shown at: 4501ms

Swap

• First Paint (FP): 3534ms
• First Contentful Paint (FCP): 3534ms
• Web font shown at: 4534ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Start Page - HTTP/1.1 - 3G - Moto G4 - Chrome

Tested on a real device, based in Dulles, VA.

Observations

fallback renders pixels to the viewport quicker, but FOIT is seen for 100ms. Content rendered 200ms quicker for swap, but the web font loads 400ms slower.

Fallback

• First Paint (FP): 4017ms
• First Contentful Paint (FCP): 4301ms
• Web font shown at: 5218ms

Swap

• First Paint (FP): 4184ms
• First Contentful Paint (FCP): 4184ms
• Web font shown at: 5618ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Start Page - HTTP/2 - 3G - Moto G4 - Chrome

Tested on a real device, based in Dulles, VA.

Observations

fallback renders pixels to the viewport quicker, but FOIT is seen for 300ms. swap renders the fallback at the same time as it draws the page. Web font loads slightly quicker for swap.

Fallback

• First Paint (FP): 3651ms
• First Contentful Paint (FCP): 3984ms
• Web font shown at: 4834ms

Swap

• First Paint (FP): 3751ms
• First Contentful Paint (FCP): 3751ms
• Web font shown at: 4618ms

Perceived performance winner

fallback

Full results

Full comparison results can be found here.

Conclusion

From the test results above, many of the tests look to show better perceived performance when fallback is used. This is assuming that painting any pixel to the viewport is perceived as quicker (open to interpretation). From the tests run, fallback was better for 10 out of 13 tests.

Recommendation

Off the back of the results above my recommendation would be to keep the font-display setting at fallback rather than swap, since it allows any type of pixels to be rendered to the viewport quicker.

We should do a similar test to see if font-display: optional may be a better alternative for older devices, since it allows a browser to cancel the web font download completely if the connection is very slow.

[NickColley]

@Nooshu are there any limitations with the fact that our review application is poorly optimised?

[Nooshu]

@Nooshu are there any limitations with the fact that our review application is poorly optimised?

Yes I saw that there's a number of third-party CSS / JS references in the head so that could have been having some influence on results. Because of that I did a few of the tests hosted on Netlify, with Fastly sitting in front as the CDN (to mimic the GOV.UK setup) which has no third-party code being loaded. This setup showed the same result. In hindsight we could have just blocked the third-party domains in WPT.

Since we have mimicked the same setup for both fallback and swap (including the type of Heroku dyno's used), I'd hope we have fairly consistent results.

[NickColley]

@Nooshu interesting thanks for the clarification, I wonder if we should share these results with the Chrome Developer advocates who are pushing for swap?

[Nooshu]

@Nooshu interesting thanks for the clarification, I wonder if we should share these results with the Chrome Developer advocates who are pushing for swap?

Agreed, I would like to understand what is happening. Maybe an issue in our testing, or misinterpreting the results? It certainly is the opposite of what I was expecting.