Speed with(out) webfonts

TLDR: Scroll down to see sites load 2-5 times faster when Javascript and web-fonts are disabled.

For many Norwegians, Easter holiday means going to a cabin in the mountains. Which means poor network speed. To see how modern sites full of Javascript and fonts work with slow connections, I started playing around with the fantastic tool webpagetest.org

I configured a custom connection of 300Kbit down, 150Kbit up, and 300ms latency. That is worse than 3G, but far better than the GPRS/EDGE connection that many people still get in remote areas. I also checked the “mobile useragent / resolution” checkbox to render the sites in small resolutions.

I picked five sites:

  • filamentgroup.com as a reference, I assume they do it all right.
  • boosterconf.no I know this site loads quite a bit of JS early in the page.
  • dn.no a norwegian financial newspaper that recently launched a new responsive site. I noticed they havd 500KB of fonts, and a bit of early JS.
  • gjensidige.no. Launched their responsive site a couple of years ago. A UI without much heavy graphics, should/could load fast.
  • kreftforeningen.no. Launched their responsive site 1.5 years ago with great success.

Edit: I also tested two norwegian sites that load really fast

And did three tests:

  1. Regular Chrome
  2. Chrome Canary
  3. Chrome canary and blocking all requests containing “.js, .woff, .ttf”.
Not bulletproof, but seemed to work for these sites.

Not bulletproof, but seemed to work for these sites.

The idea with test 3 is to see how much faster these sites load if we strip away Javascript and fonts. Test 2 uses Chrome Canary, which will fallback to a system font if the web-font is not downloaded in three seconds.

 

You can see the results in the animated GIF below (0.5x speed). I know, the irony of using a 20MB GIF in a blogpost about performance…

Top: Chrome, Middle: Canary, Bottom: Canary with JS and fonts disabled. Click for larger image.

  • Filamentgroup.com is readable in under 3 seconds in all cases.
  • Boosterconf.no is more than five times slower with Javascript. As far as I can tell, that is all the Javascript does.
  • dn.no is readable after 9 seconds with no fonts/js, vs 33 seconds with fonts/js. Chrome Canary helps by show the default-font in stead of nothing.
  • gjensidige.no is readable after 12 seconds vs 26 seconds.  Note that this site uses https which adds a couple of seconds in webpagetest.
  • kreftforeningen.no has a 400KB css file that for some reason is not gzipped, so it is pretty slow no matter what. Too bad. Still, disabling JS/fonts cuts 5 seconds of the loading time.

Putting Javascript at the bottom of the page when possible is one of the oldest performance rules, but still many new sites fail to do so. These sites doesn’t even need Javascript to for their main purpose. And while I understand that web-fonts is a good thing, do you really need half a megabyte of them? Following the almost eight year old performance-rules, and having a performance budget would have made these four sites load way faster.

-@mrcalzone

About these ads
5 comments
  1. Jack said:

    Get faster and more reliable connections to the network. It’s not a web design issue.

  2. You can’t always tell customers to get a more reliable connection. Amazon has a number of studies they have done on website speed and conversion rate. Living in an area where top of the line internet connections are not possible you make every effort to speed up your websites. That being said I know I have more work to do on mine but you have to start somewhere :)

  3. michael said:

    is a web design issue, if you are going to be dirty in a project that is required to show the content, when content matters.
    there’s also times when a webpage is made to show off some designs, in that case, its ok i guess

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: