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

[superpoincare]

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>

[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>

[superpoincare]

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.

[swissspidy]

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.

[superpoincare]

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.

[dd32]

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).

[superpoincare]

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.

[dd32]

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.

[peterwilsoncc]

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

[leobaiano]

Adds preconnect to google fonts in themes

[superpoincare]

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.

[peterwilsoncc]

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 :)

[leobaiano]

@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

[superpoincare]

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]

Including preconnect through wp_resource_hints()

[leobaiano]

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.

[superpoincare]

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.

[superpoincare]

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.

[leobaiano]

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.

[peterwilsoncc]

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.

[leobaiano]

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

[grapplerulrich]

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

[leobaiano]

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

[leobaiano]

@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]

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

[grapplerulrich]

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.

[peterwilsoncc]

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.

[leobaiano]

@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?

[jorbin]

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

[swissspidy]

Sure. Already owning #38121 anyway.

[swissspidy]

#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

[peterwilsoncc]

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.

[jorbin]

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

[peterwilsoncc]

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.

[peterwilsoncc]

Behaves as expected for 4 themes against 4.6.1.

[peterwilsoncc]

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.

[superpoincare]

Don't the themes need version bumps?

[swissspidy]

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

[westonruter]

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.