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

Question

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 1

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