pagespeed - pagespeed 见解推迟未使用的 CSS 和屏幕图像

Question

我已经推迟了我所有的 CSS 使用

media="none" onload="if(media!='all')media='all'"

和使用yall.min.js的图像

但是 PageSpeed Insights 继续声称它（并且图像也是可见的）

我该如何优化呢？

谢谢，阿里

Answer 1

我正在使用 JavaScript 异步加载外部 CSS 文件。与将脚本放在结束</body>标签之前的旧解决方案类似，我现在引入数据属性来创建<link>标签，因此它们会自动异步：

HTML

<div data-dom="link" data-href="@asyncCssBundle" data-media="screen"></div>
<div data-dom="link" data-href="@printBundle" data-media="print"></div>

jQuery

/**
  * Loads an array object of CSS files in async mode
  * stops render blocking CSS loading
  * good for fonts and @imports
  * @prop {object} asyncLinkTag data representation of a link tag on a div element
  */
function loadCssAsync() {
    var arr = [];

    $.each($('[data-dom="link"]'), function () {
        var el = $(this),
            link = $('<link />').prop({
                href: el.data('href'),
                rel: el.data('rel') || 'stylesheet',
                media: el.data('media') || 'screen'
            });

        arr.push(link);
    });

    $(document.head).append(arr);
}

$(function(){
    loadCssAsync();
});

此外，我在 SCSS 中区分折叠 CSS 和背景、字体、打印......

如果你真的想努力，上面的折叠 CSS 可以内联。但我发现在一个更大的项目中实现这一点相当棘手。所以我对异步加载背景和字体很好。但是，对于字体，现在很清楚它们是在之后加载的，类似于 FOUC 或称之为“加载字体的 Flash”。对可靠的替代字体进行一些研究是很好的，这样它就不会过多地改变你的布局。