Autoptimize 2.5.1 (out earlier this week) does not have an option to enforce font-display on Google Fonts just yet, but this little code snippet does exactly that;
add_filter('autoptimize_filter_extra_gfont_fontstring','add_display');
function add_display($in) {
return $in.'&display=swap';
}I just pushed out an update of the Autoptimize 2.4 beta branch on GitHub, with this in the changelog;
We’re still looking for beta-testers and some of these new features might convince you to jump on board? You can download the zip-file here, installing it a simple one-time process:
In case of any problem; we’re actively looking for feedback in the GitHub Issue queue 🙂
With the last release almost 6 month
s in the past, it’s high time for a new Autoptimize release. And what a release that will be my friends!
Here are the most important features/ improvements (most new options are on a separate tab, “Extra” to keep things organized as seen in the screenshot);
If you want to test AO 2.3, you can download the zipfile from GitHub here. I would love your feedback!
Happy end-of-year to all, who knows we can wrap up AO 2.3 nicely, ribbon and all, for New Years? 🙂
I just committed what I consider the last feature to be added to AO Extra; the optimization of Google Fonts, with the choice between:
Next step before merging AO Extra with Autoptimize to become AO 2.3; testing. And that’s where I need your help;
If all goes well Autoptimize 2.3 could be release before we have to wave 2017 goodbye 🙂
I’m not only into optimizing the speed of sites with for the benefit of their visitors, but also into speeding up all sites in my browser, to satisfy my own impatience. I already blocked Facebook, Twitter and Google+ widgets using NoScript’s ABE and now added this little snippet in ABE’s user ruleset to stop Google Fonts from being loaded;
# no google fonts
Sites fonts.googleapis.com
Deny INCLUSION(CSS,SCRIPT)
Result: less requests, less to download and faster rendering without that ugly FOUT. Because let’s face it, your fancy fonts slow down the web and they are of no interest to me.
Earlier today I got this question on the wordpress.org support forum for Autoptimize;
Will there be Google fonts support in the future? I now include the google font’s like this:
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,600|Varela+Round' );
Is it possible to add this css to the combined and minified by this plugin file?
The basic question if Autoptimize can aggregate external resources has been asked before and I felt it was time to dig in.
I did a little test, requesting the same Google Font CSS, changing browser user agents. For my good ole Firefox on Ubuntu Linux I got (snippet);
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Whereas the exact same request with an MSIE7 useragent gives (again, extract);
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
}
It’s not surprising Google has specific CSS based on browser useragent (probably browser-version), but this is a simple example of how dynamic remote CSS or JS can be (the scala of variables that could lead to 3rd parties serving up different CSS/JS is huge, really).
So although theoretically it would be possible to have AO cache remote JS/CSS (such as Google Font’s) and include it in the aggregated CSS- or JS-file (and that way removing render blocking resources), the problem is that AO will never be able to apply whatever logic the 3rd party applies when getting requests. Hence the design decision (made by the original developer, Turl, a long long time ago) not to aggregate & minify external resources. This is how it should be.
Although it was possible to embed fonts in web pages even during the dark ages of the internet, 2010 was the year when the pieces of the web typography puzzle really fell into place, Designers, Marketeers and especially “brand identity guards” are ecstatic about this evolution.
But there’s little to be found on the performance impact of web fonts. Because you’re downloading extra files, so there must be some impact, no? I created 4 identical pages; one without non-browser-native fonts, one with Cufon (which I already knew I wasn’t fond of), one with the hosted Google Font solution and one with local fonts (from fontsquirrel.com). Those 4 pages were analyzed by webpagetest.org (3 runs on IE8 from the Amsterdam node). These are the results:
| doc complete (s) | # requests | download size (Kb) | diff with basic (s) | full testresult url | |
|---|---|---|---|---|---|
| basic | 1.507 | 21 | 135 | – | http://www.webpagetest.org/result/110106_1Y_7S9K/3/details/ |
| cufon | 2.452 | 26 | 176 | 0.95 | http://www.webpagetest.org/result/110106_F8_7S9P/1/details/ |
| webfont (local) | 1.807 | 23 | 189 | 0.30 | http://www.webpagetest.org/result/110106_V3_7SBD/1/details/ |
| webfont (google) | 1.771 | 23 | 162 | 0.26 | http://www.webpagetest.org/result/110106_S4_7SM2/3/details/ |
As was to be expected and confirmed in the Google Webfonts FAQ, even the fastest method (hosted Google Fonts) is 0,26s slower then the version without web fonts. Locally hosted fonts are marginally slower, but that’s because (for reasons I don’t fully understand) 2 font-files were loaded instead of only 1 in the Google Fonts-powered page. Cufon isn’t really worth mentioning here, it’s dead-slow and has become rather irrelevant I guess. I did not test a version with images instead of web fonts, but that would probably yield approximately the same result (5 image files, each somewhere between 4 and 8Kb?) and is sub-optimal form a SEO and accessibility point of view.
So 0,3 seconds, that’s not too bad, no? Or is it? If you’re creating an online shop, Amazon’s experience might be of particular interest here; every 100ms delay costs them 1% in sales. So are you willing to lose 3% revenue just to have those nice fonts, which your visitors probably couldn’t care about less?
My advice; don’t use web fonts if you value performance. And you should consider performance a top priority, not just for sales’ sake, but because raw website performance also impacts usability and search engine ranking.
If your brand identity manager insists on using the right fonts, performance be damned, then try to at least follow these basic best practices:
AddType font/ttf .ttf
AddType font/x-woff .woff
AddType image/svg+xml .svg
AddType application/vnd.ms-fontobject .eot
ExpiresByType font/ttf “access plus 30 days”
ExpiresByType font/x-woff “access plus 30 days”
ExpiresByType image/svg+xml “access plus 30 days”
ExpiresByType application/vnd.ms-fontobject “access plus 30 days”
AddOutputFilterByType DEFLATE font/ttf application/vnd.ms-fontobject image/svg+xml