Possible to defer webfonts?

that would go in your (child-)theme’s functions.php or in a seperate small plugin. to be clear; this does not make autoptimize act on external webfonts, it just loads the fonts late(r) (the resulting HTML is placed in the footer instead of head). This will, one should be warned, lead to the page being rendered with native fonts (available in browser without download) after which the webfonts are downloaded and the text switches.

frank

Are you able to implement this in your plugin, maybe in future update?

This might not be the correct way according to : https://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/

In which it will show FOUT like what you’ve mentioned. But this could be a good thing to defer. With so many themes nowadays include webfonts, I see this as a need to defer more than the CSS. At times the webfonts create so many connection, it is by far more blocking than all the CSS.

well, the correct approach (in my opinion) is not to use webfonts. there’s are a couple of plugins that try to remove (google font) webfonts from being loaded. this one seems the most popular.

I tend to agree with what you say on the blog. I’ve also considered using no webfont at all. But, like all things, it’s a sacrifice of performance for gains of [slightly] better styling.

I’m just thinking, “don’t use webfont”, is like saying “don’t use css”. That’s unlikely going to happen with things going forward.

Well said wjwc.

Absolutely love the plugin. PageSpeed is saying “Your page has 1 blocking CSS resources. This causes a delay in rendering your page.” and only shows the font for me as well:

https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900|Oswald:100,200,300,400,500,600,700,800,900|Bitter:100,200,300,400,500,600,700,800,900|Acme:400|Oswald:400,700|Open+Sans:400,700,800&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese

In my case my theme actually uses Open Sans, Oswald, and Bitter so I can’t block these fonts. Blocking them would give me about an 8 point gain to PageSpeed on mobile devices but it would break the look of my site if I did it.