WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 6 months ago

#49175 new enhancement

Optimize font-loading techniques for all WordPress Twenty themes

Reported by: mvanturnhoutziggonl Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.3.2
Component: Bundled Theme Keywords:
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 (1)

#1 @joyously
6 months 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/

Note: See TracTickets for help on using tickets.