11

I'm weighing up the pros and cons of using a particular web font combination, and am looking to see exactly how much weight it'll add to this site for first time visitors. It's a Google font, and they have this SVG meter labelled Page load, subtitled Impact on page load time (example):

enter image description here

So, this combination of web fonts will have 118... impacts on page load time? That number appears to be completely unlabelled.

What is it? 118 kilobytes? 118 miliseconds based on an average connection? 118 days removed from a user's lifespan from the stress of sitting gnashing their teeth waiting for the text to show?

I can't see any clue. I've even snooped around in the SVG code of the graphic looking for a descriptive label or element ID. The closest is on the svg tag itself - aria-label="A chart.", and a weird hidden tag saying GViz is great.

The actual tff files for the two weights I was looking at are 251kb combined uncompressed, so it's possible it's the compressed weight in KBs.

  • 1
    You might guess that it's the added duration of time for the page to load, but, given the amount of varying connection speeds, that duration would more accurately be a range – Zach Saucier Aug 13 '15 at 12:23
  • 2
    It means only 118 people actually know what the number indicates. :) – Scott Aug 13 '15 at 21:44
7

This is a good question the GUI has no indication on what that means. However your hunch that its size in compressed KB does seem to be quite close. I would tip this is the correct answer.

How do i reach this conclusion? Well if I unpack 2 fonts and save them and zip the result I get windows to say that the two fonts zipped use up:

119 KB versus Google's 118

lets try a few others just one at a time turn out to be

60-56 KB versus Google's 58

All fonts:

523 KB vs 531

These are all very close. However the compression algorithms used are a bit different in some aspects they for one have different header requirements. So this may just be Google either rounding combos so each font looks as expensive in the set or just differences in format. One could use tools like firebug to see if the actual sent files match in size.

This is all certainly within what I would expect form a experiment to have as a answer. So the hypothesis seems to be valid.

PS: Bad Google, better docs please.

  • I believe this is correct. In the FAQ it mentions "you should keep an eye on the size of the font files you are serving" – Zach Saucier Aug 13 '15 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.