openpolitics.com

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.

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