ricardozea
9/23/2016 - 1:58 PM

Improve performance by calling your CSS the right way.-- Add these two lines on the <head> to preload the CSS. Then use the loadCSS and rel=

Improve performance by calling your CSS the right way.-- Add these two lines on the to preload the CSS. Then use the loadCSS and rel=preload JavaScript polyfill for browsers that don't support the rel=preload property.More info here: https://github.com/filamentgroup/loadCSS/blob/master/README.md

<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md -->
<link rel="preload" href="path/to/file.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/file.css"></noscript>

<!-- Full page example -->
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
    <meta name="description" content="description">
    <meta name="author" content="author">
    <meta http-equiv="cleartype" content="on">
    <link rel="stylesheet" href="css/cssFileName.css">
    <!-- Add these two lines on the <head> to preload the CSS. 
         Then use the loadCSS and rel=preload JavaScript polyfill for browsers that don't support the rel=preload property. 
         More info here: https://github.com/filamentgroup/loadCSS/blob/master/README.md -->
    <link rel="preload" href="path/to/file.css" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="path/to/file.css"></noscript>
</head>
<body>
    <main role="main">
    	content…
    </main>
    <script>
    /*! loadCSS: load a CSS file asynchronously. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT */
	!function(a){"use strict";var b=function(b,c,d){function j(a){return e.body?a():void setTimeout(function(){j(a)})}function l(){f.addEventListener&&f.removeEventListener("load",l),f.media=d||"all"}var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",j(function(){g.parentNode.insertBefore(f,c?g:g.nextSibling)});var k=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){k(a)})};return f.addEventListener&&f.addEventListener("load",l),f.onloadcssdefined=k,k(l),f};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
	/*! CSS rel=preload polyfill. Depends on loadCSS function. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT  */
	!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(a){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
    </script>
</body>
</html>