Make WordPress Core

Opened 4 years ago

Last modified 13 months ago

#49175 new enhancement

Optimize font-loading techniques for all WordPress Twenty themes

Reported by: mvanturnhoutziggonl's profile mvanturnhoutziggonl Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3.2
Component: Bundled Theme Keywords: 2nd-opinion
Focuses: performance Cc:

Description

Right now, I'm using the Twenty Seventeen theme for several websites and the Google Font Libre Franklin, included in that theme, is loaded like this:

<link rel=stylesheet id=twentyseventeen-fonts-css  href='https://fonts.googleapis.com/css?family=Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i&#038;subset=latin%2Clatin-ext' type=text/css media=all>

For performance reasons, given as this is a font which already has fallbacks defined in the body property, it'd be better to add display=swap and rel=preload

to this link. Few links:
https://developers.google.com/web/updates/2016/02/font-display
https://developers.google.com/web/updates/2016/03/link-rel-preload
https://addyosmani.com/blog/google-fonts-font-display/

These small steps will massively increase performance and PageSpeed scores for every core theme implementing these changes for their Google Fonts.

Change History (2)

#1 @joyously
4 years ago

See ticket #47282 for the swap.

And take a look at this support topic for the preload: https://wordpress.org/support/topic/preload-font-site-speed-issue/

#2 @sabernhardt
13 months ago

  • Keywords 2nd-opinion added

#55985 replaces Google Fonts URLs, which would make preload less valuable than before.

Choosing precisely which font files everyone would need could be tricky, both with different character subsets and with browser support of WOFF2 vs. WOFF. I opened #57807 in case the (previously) existing translations could be valuable to developers who want to use preload in individual sites or plugins. However, I'm not sure it's worth trying that in the themes now.

For the font-display property, I agree with the decision on #47282 to make fallback the default choice (at least for Twenty Twelve to Twenty Seventeen). The swap value is better for something where the font is highly important, such as a logo, and site owners did not select these fonts themselves.

Note: See TracTickets for help on using tickets.