Cache validator for Google Webfonts

Question

So I'm creating an ultra optimized site, and my page load speed with https://developers.google.com/speed/pagespeed/ is 99 (out of 100).

The only thing keeping me away from full hundred is this:

By specifying a cache validator - a Last-Modified or ETag header - you ensure that the validity of cached resources can efficiently be determined.

What?! I don't know what should I do. How do I set a cache validator for google webfonts?

I've the webfont like this: <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>.

I'm on ubuntu with apache2 if that matters.

Downloading the webfont to server and using it from there drops the score to 96 so that won't help either.

Answer 1

You can't do anything about it. You can't control what headers google server sends.

I would even go so far as to say it is reporting a false positive that you should fix.

http://redbot.org/?uri=http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DOpen%2BSans%3A400%2C800

As you can see the resource is cached, has a max age header and is even compressed.

You site is fast enough! I wouldn't worry about getting 100. You can probably stop optimizing it.

But if you want to tinker some more, here's a few ideas on improving things, I ran a report: http://www.webpagetest.org/result/130703_H7_15KM/

• I would have your server send a 204 No Content header for your non-existent favicon.ico file OR make one and add it so there's no 404 on the resource.
• Use a CDN for your resources
• Use progressive jpegs and optimize the ones you're using

Answer 2

Here is a nice and clean solution.

That 99 score is really good. However, if you are concerned about that remaining 1 score, you can load Open Sans font from Easy Fonts library that fixes this issue.

<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />

Complete fonts reference is available on Easy Fonts website. There are several more benefits of using Easy Fonts library in production. See this stackoverflow answer: https://stackoverflow.com/a/57073920/369005.

Answer 3

Actualy you can with <link rel="prefetch" type="text/css" onload="this.rel='stylesheet'" href="fonturl">