Make WordPress Core

Opened 11 months ago

Closed 9 months ago

Last modified 9 months ago

#58454 closed enhancement (fixed)

script-loader.php doesn't support font-display: optional, that is recommended for performance

Reported by: asafm7's profile asafm7 Owned by: joemcgill's profile joemcgill
Milestone: 6.4 Priority: normal
Severity: normal Version: 6.0
Component: Script Loader Keywords: has-patch commit early
Focuses: performance Cc:

Description (last modified by sabernhardt)

script-loader.php doesn't support font-display: optional, which is recommended by Google to reduce Cumulative Layout Shift.

Current code:

        // Check the font-display.
        if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'swap' ), true ) ) {
            $webfont['font-display'] = 'fallback';
        }

font-display: optional combined with rel="preload" is recommended by Google to reduce CLS:
https://web.dev/preload-optional-fonts/

Change History (17)

#1 @sabernhardt
11 months ago

  • Component changed from General to Script Loader
  • Description modified (diff)

#2 @merel1988
11 months ago

I looked in to this one and adding the optional issn't that hard, but to add preload is. It requires some changes in the preload function and because of changes coming up in the webfont api it is not a good idea to do this now.

#3 follow-up: @asafm7
11 months ago

Thanks @merel1988 .

While adding the preload might be a good enhancement, as you said, it might require further consideration. Anyway, this can be done with custom code.

My intention, for now, was only to add the 'optional' as a valid value (so it won't be replaced with 'fallback' by the check). This currently can't be done without overriding core code.

Last edited 11 months ago by asafm7 (previous) (diff)

This ticket was mentioned in PR #4576 on WordPress/wordpress-develop by @merel1988.


11 months ago
#4

  • Keywords has-patch added

Added font-display optional

Trac ticket: https://core.trac.wordpress.org/ticket/58454

#5 in reply to: ↑ 3 @merel1988
11 months ago

Hi @asafm7,

I just made a PR for that.

Replying to asafm7:

Thanks @merel1988 .

While adding the preload might be a good enhancement, as you said, it might require further consideration. Anyway, this can be done with custom code.

My intention, for now, was only to add the 'optional' as a valid value (so it won't be replaced with 'fallback' by the check). This currently can't be done without overriding core code.

#6 @asafm7
11 months ago

Perfect @merel1988 , thanks!

#7 @asafm7
10 months ago

Hi @merel1988

Is it supposed to be merged into the next WordPress release?

#8 @sabernhardt
10 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.3

#9 @joemcgill
10 months ago

The PR from @merel1988 looks good to me. @asafm7 can you (or someone else) confirm that this addresses the issue?

#10 @asafm7
10 months ago

@joemcgill, yes, it does. Thanks @merel1988.

#11 @mukesh27
9 months ago

  • Keywords needs-testing-info added

@asafm7 and @merel1988, could you please share the steps for testing so that others can also try it out? Thank you in advance!

#12 @asafm7
9 months ago

Hi @mukesh27:

  • Set "fontDisplay": "optional" for a font on theme.json
  • Use DevTools to verify the font was actually loaded as optional, and not as font-display: fallback

Thanks for testing.

#13 @mukesh27
9 months ago

  • Keywords commit added; needs-testing needs-testing-info removed
  • Owner set to joemcgill
  • Status changed from new to assigned

Thanks @asafm7 for testing steps.

I tested the changes and it working fine in my testing.

commit added for consideration. Assign to @joemcgill, feel free to remove assignment. Thanks!

#14 @swissspidy
9 months ago

This is clearly an enhancement, even if it's a simple one we shouldn't try to shoehorn this kinda stuff into the release that late into the cycle.

#15 @spacedmonkey
9 months ago

  • Keywords early added
  • Milestone changed from 6.3 to 6.4
  • Type changed from defect (bug) to enhancement
  • Version set to 6.0

I agree with @swissspidy this is an enhancement. I have changed to enhancement and punted to WP 6.4. I also added early, so this should be committed early.

#16 @joemcgill
9 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 56314:

Script Loader: Add support for font-display: optional.

This adds optional to the list of valid font-display values that can be used when validating webfonts.

Props merel1988, asafm7, mukesh27.
Fixes #58454.

joemcgill commented on PR #4576:


9 months ago
#17

Merged in https://core.trac.wordpress.org/changeset/56314. Thanks @Merel1988!

Note: See TracTickets for help on using tickets.