How to keep CSS from render-blocking my website?


Tags: javascript,html,css,render,google-font-api

Problem :

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

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?



Solution :

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 invalid HTML, but A) I've never met a browser that cared, and B) Looking into it, it looks like the nightlies of the HTML5 spec will allow this if you add the scoped attribute:

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

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...)


    CSS Howto..

    How to offset div columns in CSS grid system

    How to start css animation on speciefic height of webpage

    how to disable width: 100%; and box-sizing: border-box;

    How to override default CSS in modern GWT applications?

    How to have fluid height in css?

    How to create vertical text using only CSS?

    How to set Height of a table in a Bootstrap as the value of Width using CSS?

    How to set css attribute for pseudo element in Dart

    How to apply a CSS class to a SVG Text element

    How to fit number within defined div in css

    How To Insert Some Content Before An HTML Element In The Runtime Using CSS

    How to replace HTML text with images using CSS content cross browser

    CSS how to get a div to the right side and a div exactly in the middle?

    How to apply Javascript conditionally on a specific css-class only?

    How to use CSS to show rotated text in a table cell

    How to avoid loading CSS file for ipad sized devices ('between' mobile and full-sized)?

    How to generate css using google chrome inspector to further use them?

    How to add class CSS after ng-click to parent element?

    how to use
    for navigation purpose

    How to make a bullet list align with text in css?

    How to Generate All Possible CSS 2 Selector Combinations?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to make a background-color transition that eventually covers div to center? [closed]

    How to get table to overflow within a flex div?

    Any ideas about how to use CSS to emulate a messy stamp?

    how to display only 100 rows of 1000 from a database with options to go to next 100 and previous 100 in html/php/css/js [closed]

    background image also header image cc trick how to do it? [closed]

    GridView Non-Visible Row Showing up in Empty Data Row

    How would I create global scripts within HTML Pages so I don't need to constantly change the location?

    How to add classes to div using jquery in sequence like animation