Asynchronous loading with Web Font Loader
Loading your webfont asynchronously can be done with the Typekit webfontloader which was developed by Typekit and Google. Doing so is pretty easy. Just remove the
The beauty of asynchronously loading these fonts is that your browser can render the page before your Raleway webfont is fully loaded. First it displays the page with a fallback font, in this case something like Helvetica or Arial. This dramatically reduces the time that it takes to render the first elements on your website. This increases the (perceived) speed of your website.
So, while your webfont is not loaded the browser will display the fallback font. When the webfont is loaded all texts that use this font will be updated and redrawn. This leads to a visible flash. Texts are shown a little different, possibly with somewhat different spacing and line heights.
There are different ways of dealing with this. Some people apply IMO ridiculous strategies to avoid this behavior. The reason for doing this is not to make the website good-looking, it is meant to make it as fast as possible.
If you don't want this little flash just don't load your fonts asynchronously, stick with the
@import statement in your CSS. And remember, browsers will cache the font at the first request, so there will be no more flashes on subsequent pages.
Old scores: Mobile: 71/100. Desktop: 89/100.
New scores: Mobile: 98/100. Desktop: 99/100.
Apparently Google makes a very big deal out of this :) The last thing I could improve on is making analytics.js cacheable for a longer period. Google is serving it with a 2-hour expiration header. It's true that this is quite short, but since so many websites use Google Analytics I think it will be in the browser cache already...
- Web Fonts Performance by Ilya Grigorik.
- How to use web fonts responsibly
Thanks for your explanation of how to use Google Webfonts asynchronously.
I've built two WordPress plugins, one of which allows you to host Google Webfonts locally. I've used this article as inspiration to implement the asynchronous loading using Typekit's Web Font Loader.
Btw, you could host analytics.js locally as well. This way you could increase the expiration header. I've done it in my WordPress plugin, called CAOS.