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

Question

我的页面速度抱怨 'Optimize CSS Delivery' 仅在移动选项卡上有 3 个样式表（然后是 typekit），桌面选项卡不会因为这些文件而哭泣，我正在像 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 文件没有缩小。

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

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

javascript

pagespeed

mod-pagespeed

google-pagespeed