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或称其为“加载字体的闪光”。最好对纯色替代字体进行一些研究，以免布局发生太大变化。

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

1 个答案: