Load Page CSS 🔥

The Code

Very useful bit of code for loading in css after the main page has loaded. this will increases the load speed of the site and decrease the time to first paint, both of which google likes very much

function load_page_css(css_file_name) {
    var element = document.createElement("link");
    element.rel = "stylesheet";
    element.href = css_file_name;
    element.type = 'text/css';
    var current_element = document.getElementsByTagName("link")[0];
    current_element.parentNode.insertBefore( element, current_element);
}
Usage

Simply call the function after the main page has been loaded by putting it in a defered script, it will load the css style sheet you give to it after the initial paint of the page.

$(function(){
    createElement("http://fonts.googleapis.com/css?family=Raleway:500,600,800,100,700,900,400,200,300");
});