WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 17 months ago

#37171 closed feature request (fixed)

Implement preconnect to Google fonts in themes twenty eleven, twelve, thirteen, fourteen, fifteen, sixteen

Reported by: superpoincare Owned by: peterwilsoncc
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.6
Component: Bundled Theme Keywords: good-first-bug has-patch
Focuses: performance Cc:
PR Number:

Description (last modified by westonruter)

This ticket https://core.trac.wordpress.org/ticket/34292#comment:31 adds support for preconnect to WordPress.

It might be useful to use it for Google Fonts in themes shipped with Wordpress (twenty eleven, twelve, thirteen, fourteen, fifteen, sixteen)

The code can be added in the functions.php of these themes. The HTML output should look like:

<link href='https://fonts.gstatic.com' rel='preconnect' crossorigin>

Attachments (7)

patch_37171.diff (4.3 KB) - added by leobaiano 3 years ago.
Adds preconnect to google fonts in themes
37171.diff (4.8 KB) - added by leobaiano 3 years ago.
Including preconnect through wp_resource_hints()
37171.2.diff (4.5 KB) - added by leobaiano 3 years ago.
Opens and closes in brackets IF according to Coding Standards and removes Review source queuing at twentytwelve theme.
37171.3.diff (4.5 KB) - added by leobaiano 3 years ago.
Correcting the type of parameter $relation_type in the function documentation.
37171.4.diff (4.6 KB) - added by peterwilsoncc 3 years ago.
37171.5.diff (5.3 KB) - added by swissspidy 3 years ago.
37171.6.diff (5.0 KB) - added by peterwilsoncc 3 years ago.

Download all attachments as: .zip

Change History (52)

#1 follow-up: @lordspace
3 years ago

Why not use / / instead of instead of specifying the protocol? (I used spaces in between because trac would not visualize the 2 slashes.

<link href='//fonts.gstatic.com' rel='preconnect' crossorigin>

#2 in reply to: ↑ 1 @superpoincare
3 years ago

Replying to lordspace:

Why not use / / instead of instead of specifying the protocol? (I used spaces in between because trac would not visualize the 2 slashes.

<link href='//fonts.gstatic.com' rel='preconnect' crossorigin>

I think Wordpress links to Google fonts are https.

This loads the css file in https:

https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwelve/functions.php#L123

which has font-face declarations to fonts.gstatic.com in https.

#3 @knutsp
3 years ago

  • Component changed from Themes to Bundled Theme

#4 @swissspidy
3 years ago

It's not really useful to add a preconnect entry if the font is going to be loaded 5 lines further down in the source code anyway.

Regarding the //, I think all default themes use https:// URLs for Google Fonts. In that case, https:// should be prefered.

#5 @superpoincare
3 years ago

There's a reason why it's needed.

The google fonts css loaded via <link href="..." ...> connects to https://fonts.googleapis.com

But the fonts it links to - via @fontface rules fetch the fonts from another domain, which is https://fonts.gstatic.com

There's no way the browser knows this till it sees the @fontface rules. This information arrives only after the css is loaded and the rules parsed. So to fetch fonts early we have to preconnect to https://fonts.gstatic.com.

#6 @dd32
3 years ago

I can see an argument for the extra dns-prefetch but I think preconnect is probably overkill.

Chances are the font will be cached already and pre-connecting would be a waste of resources (obviously, for the first page load ever seeing that combination of Google Fonts, it would be a benefit though).

#7 @superpoincare
3 years ago

Don't think it's an overkill. preconnecting to fonts.gstatic.com over https can save a lot of time.

Ilya Grigorik recommends it for Google Fonts while obviously knowing about costs:

https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/

Second, the css header already has instruction to preconnect. So the browser will preconnect anyway whether or not fonts cached. It's just that it's a bit late and preconnect in html is much better.

#8 @dd32
3 years ago

Hm, I take my previous comment back then. I appear to have read the caching specifiers incorrectly - on a second look, you're correct, the Google Fonts doesn't appear to serve from cache without a server round trip and it definitely does specify a preconnect on the CSS for the .

I was thinking of the case where the preconnect would be an overzealous optimization and go unused in many situations (or cause undue load on a 3rd party), but this doesn't appear to be the case.

This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.


3 years ago

#10 @peterwilsoncc
3 years ago

  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to 4.7

MIlestoning, worth preconnecting to the font file server fonts.gstatic.com.

@leobaiano
3 years ago

Adds preconnect to google fonts in themes

#11 follow-ups: @leobaiano
3 years ago

  • Keywords needs-patch removed

#12 in reply to: ↑ 11 @superpoincare
3 years ago

Replying to leobaiano:

I think the way to do it is using wp_resource_hints() introduced in Worpress 4.6.

This is because it gives the optionality of dequeueing it. An example scenario would be: someone using the Twenty Twelve theme and decides to not use Open Sans and use system fonts instead.

But the way to undo it using your patch would be to add a header.php in the child theme and remove the lines, which people may not like, since many times people just use child style.css and functions.php.

So the best way to preconnect is in functions.php of the bundled themes with a condition that if the fonts are in the queue, add a preconnect.

This way someone who is using say a Twenty Twelve theme and has dequeued Google fonts in his/her child theme is unaffected.

#13 @superpoincare
3 years ago

  • Keywords needs-patch added

#14 in reply to: ↑ 11 @peterwilsoncc
3 years ago

Replying to leobaiano:

Thanks for your first patch!

In addition to @superpoincare's comments above, some documentation that might help you is the hook reference and the field guide.

Looking forward to seeing the core contributor badge going up on your profile :)

#15 follow-up: @leobaiano
3 years ago

@superpoincare @peterwilsoncc

Thank you, I did not know the wp_resource_hints() function, I am still updating me about some new features of version 4.6. I will make the change and send a new patched.

I am also looking forward to the badge: D

#16 in reply to: ↑ 15 @superpoincare
3 years ago

Replying to leobaiano:

Great. You might be interested in wp_style_is as well. So for example twentytwelve adds a body class custom-font-enabled like this (lines 446-448):

https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwelve/functions.php#L446-L448

// Enable custom font class only if the font CSS is queued to load.
if ( wp_style_is( 'twentytwelve-fonts', 'queue' ) )
		$classes[] = 'custom-font-enabled';

You could then add the resource hint for preconnect similarly.

@leobaiano
3 years ago

Including preconnect through wp_resource_hints()

#17 @leobaiano
3 years ago

Thank you for your help @superpoincare and @peterwilsoncc !

I searched google sources records on issues Twenty Eleven and Twenty Ten and not found, then not added the preconnect these issues, I correct?

In other issues I did the inclusion in functions through the filter wp_resource_hints, and testing to ensure that wp_style_is will only include preconnect for google fonts if the font needs to be charged as example: https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwelve/functions.php#L446-L448

I tested on my local installation and preconnect was correctly added hope that this time is correct and if not please guide me where I can adjust.

Thanks again, I'm learning a lot from this experience.

Last edited 3 years ago by leobaiano (previous) (diff)

#18 @leobaiano
3 years ago

  • Keywords needs-patch removed

#19 follow-up: @superpoincare
3 years ago

Looks fine @leobaiano

You might want to do it for Twenty Sixteen as well as from 4.7 it will be bundled with Wordpress.

There's one thing however. Might require a different ticket. wp_resource_hints doesn't add a crossorigin attribute. It seems to me that this is strictly needed for preconnect to work. One way to see it is the requests in webpagetest with and without it. I might open another ticket for it after setting up a demo at codepen or something.

#20 @superpoincare
3 years ago

Here's a result of a [page test]https://www.webpagetest.org/video/compare.php?tests=160921_P0_2GSV,160921_QP_2GSW.

You can move the slider between crossorigin and no-crossorigin to see that the crossorigin attribute is required for preconnect to work. (Item 8, which is the woff2 file).

Will open a ticket.

#21 @leobaiano
3 years ago

  • Keywords has-patch added

I think it would be a case of opening another ticket, thank you, I learned a lot from this experience to send my primeito patch.

#22 @peterwilsoncc
3 years ago

Related #38121 (Thanks for opening @superpoincare)

@leobaiano I'll add full feedback for your patch over the course of the weekend, mainly related to coding standards. Reading the WordPress Coding Standards is a good spot to start.

This patch can continue to be worked up while the other ticket is addressed.

#23 @leobaiano
3 years ago

I know Coding Standards but I have failed at some point, thank you very much if you can spend a feedback.

#24 @grapplerulrich
3 years ago

@leobaiano Looking at patch there should be opening and closing brackets. In twentytwelve the enqueuing of the font is commented out.

@leobaiano
3 years ago

Opens and closes in brackets IF according to Coding Standards and removes Review source queuing at twentytwelve theme.

#25 follow-up: @leobaiano
3 years ago

@grapplerulrich Thanks again and sorry if my lack of attention made him lose time. I'm sorry. :(

I commented queuing source to test and forgot to remove. If it acts something else I can improve please let me know.

@leobaiano
3 years ago

Correcting the type of parameter $relation_type in the function documentation.

#26 @grapplerulrich
3 years ago

No worries, One thing that I only saw when looking at your Twenty Seventeen PR is the spaces vs tabs for the code comment.

Maybe wait for feedback from others before updating the patch again.

#27 in reply to: ↑ 25 @peterwilsoncc
3 years ago

Replying to leobaiano:

@grapplerulrich Thanks again and sorry if my lack of attention made him lose time. I'm sorry. :(

Please don't apologise for contributing. My first patch had badly formatted comments, trailing whitespace all in under 50 characters of code :)

I ought to apologise for not getting a chance to review last weekend. The only things I can see is the spaces mentioned above, I've switched these for tabs in 37171.4.diff.

I am also considering whether this ought to go in or wait until #38121. Looking at the webpagetests above, I can see the browser falls back to a dns-prefetch for the font domain without the cross-origin attribute. It has a benefit.

#28 @leobaiano
3 years ago

@peterwilsoncc I understand, good, I will continue to follow the ticket and help as I can!

You need me to solve the issue of tabs and climb a new patch or .4 can keep you up?

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


3 years ago

#30 @jorbin
3 years ago

@swissspidy @peterwilsoncc - Does one of you want to own this? I would consider #38121 a blocker for this.

#31 @swissspidy
3 years ago

Sure. Already owning #38121 anyway.

#32 @swissspidy
3 years ago

  • Owner set to swissspidy
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by desrosj. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-themes by davidakennedy. View the logs.


3 years ago

@swissspidy
3 years ago

#36 follow-up: @swissspidy
3 years ago

#38121 is now in. 37171.5.diff is a refreshed patch that allows adding the crossorigin attribute. Since passing an array throws an array in WordPRess 4.6, I added version checks everywhere.

For Twenty Seventeen there's already an updated PR available: https://github.com/WordPress/twentyseventeen/pull/491

#37 in reply to: ↑ 36 @peterwilsoncc
3 years ago

Replying to swissspidy:

#38121 is now in. 37171.5.diff is a refreshed patch that allows adding the crossorigin attribute.

Thanks, I'll test this over the weekend and put it in if it behaves as expected.

#38 @jorbin
3 years ago

  • Owner changed from swissspidy to peterwilsoncc

Changing the owner to reflect that the next step is from @peterwilsoncc

#39 @peterwilsoncc
3 years ago

In 37171.6.diff:

  • Replaced @since tags with now + 0.1 to reflect version bumps with release.
  • Removed some 2015 cruft that made it's way into the older themes in an earlier patch.

Checked 4 themes against trunk, will use patch file above to check against 4.6.1.

#40 @peterwilsoncc
3 years ago

Behaves as expected for 4 themes against 4.6.1.

#41 @peterwilsoncc
3 years ago

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

In 38870:

Bundled theme: Add preconnect to fonts.gstatic.com in 2012-15 themes.

Add preconnect hinting for https://fonts.gstatic.com in the bundled themes using Google fonts. WordPress versions 4.7+ include a crossorigin attribute, earlier versions will not.

Props leobaiano, swissspidy, peterwilsoncc.
Fixes #37171.

#42 @superpoincare
3 years ago

Don't the themes need version bumps?

#43 @swissspidy
3 years ago

@superpoincare Already happened in a separate ticket, see #38858.

This ticket was mentioned in Slack in #core-comments by leobaiano. View the logs.


3 years ago

#45 in reply to: ↑ 19 @westonruter
17 months ago

  • Description modified (diff)

Replying to superpoincare:

You might want to do it for Twenty Sixteen as well as from 4.7 it will be bundled with WordPress.

FYI: This got missed from Twenty Sixteen. See #44668.

Note: See TracTickets for help on using tickets.