Delayed loading of typekit scripts vs Flicker-free loading

  Follow me: Follow Bruce Kirkpatrick by email subscription Bruce Kirkpatrick on Twitter Bruce Kirkpatrick on Facebook
Mon, Feb 13, 2012 at 11:52PM

Today, I realized that typekit.com substantially slows down my sites when it first loads.   To help combat this, I tried the delayed execution example they provide.

Example:

<script type="text/javascript">
/* <![CDATA[ */ TypekitConfig = {
kitId: 'lvr7nwu'
};
(function() {
var tk = document.createElement('script');
tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
tk.type = 'text/javascript';
tk.async = 'true';
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
try { Typekit.load(TypekitConfig); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tk, s);
})(); /* ]]> */
</script>

 

But then I see the flicker of the old fonts and then the new fonts.   I realize that there is another way where you hide the fonts until typekit is done, but what if typekit never finishes loading?  Plus this approach takes more programming to implement.   So instead, I decided to load typekit asyncronously on the first page view and then for all the following pageviews, I load the flicker-free script.   This works out quite well since all of the files have been cached on the first page view and you should have no more flicker.

All our web site are using this approach now and the first time visit is 1+ seconds faster to load.


Bookmark & Share



Popular tags on this blog

Performance |