How to keep CSS from render-blocking my website?

Question

I am trying to optimize the loading speed of my mobile webpage, and for that effect I am using the website:

• https://developers.google.com/speed/pagespeed/insights

This website evaluates my source and tells me what I can improve. In my website I download a font:

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

and aparently this is blocking the rendering of my page. Now, if this was JavaScript I could use the async word in the tag and it would fix the problem, but this is not a javascript file I am loading!

Is there anyway to keep this resource from blocking my browser and force it to wait until it is downloaded?

Answer 1

You can do it with JavaScript:

<script>
(function() {
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "//fonts.googleapis.com/css?family=Open+Sans:400,700";
    document.querySelector("head").appendChild(link);
})();
</script>

The font will be loaded out-of-band with the main rendering. Of course, that means there will be a visual change when the font finishes loading...and if the user has JavaScript disabled, it won't load the font at all.

---

Or, as dandavis points out, you could just use a style element at the end of body, just before the closing </body> tag:

<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

That's valid HTML now (as of the 20170808 draft of HTML 5.2), but I'd never met a browser that cared about it if you placed style in body even before it was made valid.

The advantages to this over using JavaScript are:

1. In theory, the browser's prefetch scanner might find the style element and start the download earlier (although this isn't particularly likely if you put the JavaScript in head), and

2. It works even if the user has JavaScript disabled.

Alternately, you could just move your link element to the end of body, but at present, that's invalid and the scoped attribute doesn't (yet?) seem to apply. (Why make it apply to style and not link[rel=stylesheet]? I have no idea, and perhaps it's simply a matter of not having got there yet...)

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,700,400italic,700italic']
    }
  });
</script>