I'm currently trying to improve the page speed of my website.
The most important css, most of the stuff above the fold, is inlined in a style tag in the head.
The rest is served, using javascript provided by the filament group on github, source is below. To defer it, if you will and send things across the wire more quickly.
The complete function can be https://github.com/filamentgroup/loadCSS
Yet I still get complaints from pagespeed insights, that I have 3 css resources, above mentioned ones, blocking my page. I don't understand, why that is. Can anyone shed any light on this?
The most important css, most of the stuff above the fold, is inlined in a style tag in the head.
The rest is served, using javascript provided by the filament group on github, source is below. To defer it, if you will and send things across the wire more quickly.
Code:
function loadCSS(e,t,n){"use strict";var i=window.document.createElement("link");var o=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet";i.href=e;i.media="only x";o.parentNode.insertBefore(i,o);setTimeout(function(){i.media=n||"all"})}
loadCSS('//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css');
loadCSS('http://fonts.googleapis.com/css?family=Carrois+Gothic|Yanone+Kaffeesatz:700');
loadCSS('css/screen.css');
Yet I still get complaints from pagespeed insights, that I have 3 css resources, above mentioned ones, blocking my page. I don't understand, why that is. Can anyone shed any light on this?