Load Google Fonts Asynchronously For Page Speed

Any file that the browser needs to render the page, where it will not show the page without it, is known as part of the critical path. Normally, any CSS file is part of this critical rendering path.

Though Page Speed Insights is a good tool, remember that Google still uses what real users see as a metric for judging page speed and user experience.

The Web Font Loader uses a little sleight-of-hand to make site visitors feel like the page is rendering faster.

CSS blocks the rendering of the page, which gives impression of slower page speed. What the Web Font Loader does is defer the loading of Google Fonts until after other parts of the page have started to render.

How To Use the Web Font Loader

In your page, include a link to the Web Font Loader script. You can set this link to load the latest version, but for performance, it is better if you link to a specific version of the script.

Then, indicate what font families you would like to load from which font service.This is what the code looks like on this very site (We’re using Google Fonts.)


<span class="token markup"><span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span><span class="token markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></span>
<span class="token markup"><span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span></span>
 WebFont<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    google<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      families<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'Source Sans Pro:400,600,700,400italic,700italic'</span><span class="token punctuation">,</span> <span class="token string">'Roboto Condensed:400,700'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></span>

There are different methods for Typekit, Fontdeck, and Fonts.com. You can consult the documentation on Git Hub for the Web Font Loader project for specific instructions.

Another way you can use the Web Font Loader is in the head of your pages. This method uses JavaScript to load fonts ansynchronously. Google will show you this method when you go to use Google Fonts if you click on the JavaScript tab.

JavaScript Google Fonts Asynchronous Code

This is what this script looks like. (It is similar to the previous script, but utilized a different way.)


<span class="token markup"><span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
  WebFontConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
    google<span class="token punctuation">:</span> <span class="token punctuation">{</span> families<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'Roboto+Condensed:400,700:latin'</span><span class="token punctuation">,</span> <span class="token string">'Source+Sans+Pro:400,600,400italic,700italic,700:latin'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> wf <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    wf<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token string">'https:'</span> <span class="token operator">==</span> document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>protocol <span class="token operator">?</span> <span class="token string">'https'</span> <span class="token punctuation">:</span> <span class="token string">'http'</span><span class="token punctuation">)</span> <span class="token operator">+</span>
      '<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';</span>
    wf<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">'text/javascript'</span><span class="token punctuation">;</span>
    wf<span class="token punctuation">.</span>async <span class="token operator">=</span> <span class="token string">'true'</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> s <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    s<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>wf<span class="token punctuation">,</span> s<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></span>

In my own testing, this method seemed a little slower than what I am using, putting the former script in the footer. Either way is a compromise. You must test for yourself and decide what works for your site.

More: JavaScript Font Loader Code

 

Optimize Font Awesome to ridiculously low size of 10KB!

Font awesome makes a web designers life easy. Adding icons is as simple as adding a <h1> tag. Resizing is done through attributes, flipping, stacking, spinning is all possible with font awesome. But apart from those 10 icons and some styles, all other icons are of no use to us. They load along with the ones we need.

Though font awesome is cached by browsers since many websites use it, we have to give attention to first-time visitors who may have a browser without cached font awesome css. Moreover, font awesome version updation is done every time when new icons are added and you should also keep version of the CDN link up to date.

Why should we optimize font awesome?

I like my website to load faster on desktops as well as on mobile devices. It is one of the main reasons why I switched from WordPress to Jekyll.

Read: Why did I choose Jekyll over WordPress?!

If we are using only 10 icons then why should we load 100 other icons?

Since fontawesome is a huge file, we have to trim it down to our needs. If we are using only 10 icons then why should we load 100 other icons? The size of font awesome web font is 90KB. Added to that, minified font awesome css is 30KB. So overall 120KB! What I’m trying is to reduce this to below 12KB which is more than 90% compression!!

This will decrease the load time multiple folds! My website scored 89% on Google pagespeed insights after implementing this. It used to be 52%!

How can we optimize font awesome?

Basic idea is to edit the font file to make it as small as possible. Removing unwanted glyphs will reduce the size drastically. But we should analyze our website to make sure we note down all the font awesome icons that are in use.

In my case, removing unused glyphs reduced the woff file size from 90KB to 8.5KB. This size depends on how many icons you need. The size increase with the increase in the number of icons. Removing unwanted css from fontawesome.min.css reduced the size from 30KB to 2KB. The overall size of font awesome after optimizing is around 11KB!

There are two ways to do this.