优化 CSS 交付...但我正在使用 JS 加载样式

Question

我在页面速度上抱怨“优化 CSS 交付”仅在移动选项卡上（然后是 typekit）上的 3 个样式表，桌面选项卡不会为这些文件中的任何一个哭泣，我变得像 95 /100，虽然在移动标签上它更像是 60/100。

我正在使用 google 的 webfont 加载器（异步）加载 typekit，然后使用此 JS 方法将 CSS 加载到头部（包装在一个函数中，因此它不应该加载到 JS 所在的页面底部）：

<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>

有没有其他人经历过这种情况，或者，可以建议我可以做些什么来进一步改进它？

谢谢

Answer 1

我认为这里的问题是第三方 css 文件没有被缩小。