Webfonts and page load time

I’m creating a 13 page website. The site uses one Google web font throughout. Some pages uses 300, 400, 400italic and 700 weights. Other pages only use 400 weight.

To reduce page load time, should I go through every pages source code and only link to the weights that are used on that page?

Or if that weight isn’t used, it isn’t called for by the browser and so I don’t need to worry about it?

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think that once you link to the font in the page head, the font is loaded. Whether it gets used or not, the network request goes out for that font. I am not at all certain how different weights are packaged inside a Web font, whether there is a single monolithic file containing all weights, or whether each one is treated like a different font file within a suitcase (remember those?).

I imagine you could test this. Most browsers have a developer console, and Safari’s has a great Network pane that shows the timing in milliseconds for each element of the page to load. Remember to clear your caches before each reload, as each subsequent request for the font will be satisfied by the cache.

Come to think of it, that’s what’s going to happen for most of your pages – assuming people don’t just pogo right out of the first page they come to. Any second, third, fourth page will most likely result in a cache hit for the font file, and you won’t have to worry about a second download time. Which leads me to speculate that if you just load all the fonts on all pages equally, you will only really have to worry about the first page load time – all others will be requesting the same resource, so they won’t hit the server again.

Walter

On Jan 3, 2014, at 7:18 AM, Mark wrote:

I’m creating a 13 page website. The site uses one Google web font throughout. Some pages uses 300, 400, 400italic and 700 weights. Other pages only use 400 weight.

To reduce page load time, should I go through every pages source code and only link to the weights that are used on that page?

Or if that weight isn’t used, it isn’t called for by the browser and so I don’t need to worry about it?

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter’s post got me curious, so I did a bit of research regarding Google web fonts and performance.

First, each variant of a font is served as a separate file. Open Sans 700 is an entirely separate font file from Open Sans 300 Italic. However, don’t start changing to requests to only serve the fonts used by the page just yet! Modern browsers are smart enough to not download the font files that are not being used by the page.

On a related note, if your machine has the font installed locally, it will use that and will not download the font files from Google. Yay!

Side note: if you do have the fonts installed locally, be sure to disable them to test the website. I’ve seen some odd bugs caused by the web fonts that we not present in the local files, especially if you are using the &text= attribute, see below.

Also, you should only be sending one request to Google for the fonts you need on a given page. In this request, I’m asking for two entirely separate font families, Source Code Pro and Source Sans Pro.

<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro:500|Source+Sans+Pro:400,700,400italic,900" rel="stylesheet" type="text/css">

You can ask for a specific subset of a font by using &text=yourTextHere. Don’t forget that you will need to URL encode any entities. Here is an example that will only fetch the characters for “Hello world”:

http://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20world

There’s a bunch of other cool stuff that you can do with Google Web Fonts (fire animation, anyone?), so do check out their docs.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think that once you link to the font in the page head, the font is loaded. Whether it gets used or not, the network request goes out for that font.

Actually, you are linking to a CSS stylesheet that uses @font-face rules to bring in the font files. Depending on the user-agent, Google will automagically serve different versions of that file to provide the correct font formats across the board.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Guys

Thanks for the responses.

“First, each variant of a font is served as a separate file. Open Sans 700 is an entirely separate font file from Open Sans 300 Italic. However, don’t start changing to requests to only serve the fonts used by the page just yet! Modern browsers are smart enough to not download the font files that are not being used by the page.”

So if I link to all four weights on the homepage, but that particular page is only using one, the browser will only download that one. Hence my homepage won’t be taking a big hit in terms of download speed.

Presumably that font weight will then be in the cache for subsequent use on other pages.

Great. Thanks for the help.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So if I link to all four weights on the homepage, but that particular page is only using one, the browser will only download that one. Hence my homepage won’t be taking a big hit in terms of download speed.

Presumably that font weight will then be in the cache for subsequent use on other pages.

Yes. There would actually be a slight performance improvement working this way as the CSS file that Google serves will be cached across your entire website.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

But to clarify your assumption – the font itself would not be cached until it was first used. So given a page with one css file loading all 4 weights, and using only one weight, on the next page, which uses two weights, one font file would be loaded from cache, the css file would be loaded from cache, and the next font file would be requested from the server.

Caleb, thanks for your detective work on this, I was working from supposition and hadn’t actually traced the activity involved in a Web font loading.

Walter

On Jan 6, 2014, at 8:58 AM, Caleb Grove wrote:

So if I link to all four weights on the homepage, but that particular page is only using one, the browser will only download that one. Hence my homepage won’t be taking a big hit in terms of download speed.

Presumably that font weight will then be in the cache for subsequent use on other pages.

Yes. There would actually be a slight performance improvement working this way as the CSS file that Google serves will be cached across your entire website.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for everything.

Caleb: I’m wondering if you’ve seen my post on responsive v’s viewport scaling? http://www.freewaytalk.net/thread/view/142760

Any thoughts? I need to research to see if all devices use viewport scaling - if not my arguement doesn’t stand up.

Cheers

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options