joep joep - 18 days ago 5
Javascript Question

Optimize CSS Delivery... but I am loading in styles with JS

I'm getting page speed moaning about 'Optimize CSS Delivery' for 3 stylesheets only on the mobile tab (and then typekit too), the desktop tab doesn't cry about any of these files and I'm getting like 95/100, though on mobile tab it's more like 60/100.

I am loading typekit in with google's webfont loader (async) then, loading the CSS into the head with this JS method (wrapped in a function so it shouldn't load until the bottom of the page where the JS is):

<script>
(function(){
var stylesheets = [
"/resources/third_party/slick/1.3.6/css/slick.css",
"/resources/site/css/main.css",
"/resources/third_party/animate.css/css/animate.min.css"
];
for(var i = 0; i < stylesheets.length; i++){
var stylesheet = document.createElement('link');
stylesheet.href = stylesheets[i];
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
}());
</script>


Has anyone else experienced this, or, could suggest what I could do to improve this further?

Thanks

Answer

I think the issue here was the third party css files were not minified.