页面速度洞察 延迟未使用的 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 或称之为"加载字体的闪光"。最好对可靠的替代字体进行一些研究，这样它就不会对您的布局进行太多更改。