Question

我有一个关键的CSS流程，可以防止页面的首屏内容出现未样式化内容（FOUC）。

我被Google PageSpeed见解（灯塔）和/或Chrome的性能审核突出显示了“推迟未使用的CSS”这一点。

我看过其他文章，但它们无效。

总结一下，到目前为止我已经尝试过了。

loadCSS（）
使用requestAnimationFrame的脚本

参考：CSS delivery optimization: How to defer css loading?

如果我将通过setTimeout的脚本加载延迟了3秒钟的固定时间，则“推迟未使用的CSS”问题就消失了。 Google PageSpeed Insights测试（移动设备）需要3秒，因为它们是较慢的设备，而台式机通常需要3秒，而台式机通常具有更大的处理能力（请注意，并非总是如此，因此不包括基于用户代理的逻辑）。

所以问题归结为如何不考虑设备类型或规格，如何以最少的时间延迟加载CSS。

请随意提出任何粗略的想法，如果您的想法可行，我们将尝试并报告，如果您的想法可行，我们将更新代码并标记您的答案已被选定。

我列表上的下一个要尝试的是requestAnimationFrame +较小的固定延迟。

Answer 1

请记住，灯塔是一种咨询工具；它给出建议而不是要求。由您决定这些建议是否适合您的业务需求。其中包括权衡确定和实施针对问题影响的解决方案所需的时间和精力。

Google对解决Lighthouse的“推迟未使用的CSS”建议提出了建议：Defer unused CSS。总结：应该立即内嵌页面需要的CSS，而不是从单独的文件中加载。

Answer 2

基于两个触发器手动加载CSS，以先发生的为准。

[setTimeout为2500ms]
[滚动事件]

<script>
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    var app_css_loaded = false;
    /* console.log(performance.now() + ' - ' + '1. async css script init'); */
    var loadAppCss = function(){
        if(!app_css_loaded) {
            app_css_loaded = true;
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.href = 'YOUR_COMBINED_AND_MINIFIED_CSS_HERE.css';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
            /* console.log(performance.now() + ' - ' + '5. script injected'); */
        }
    };
    var cb = function() {
        /* console.log(performance.now() + ' - ' + '3. cb called'); */
        setTimeout(function(){
            /* console.log(performance.now() + ' - ' + '4. timeout start'); */
            loadAppCss();
            /* console.log(performance.now() + ' - ' + '6. timeout end'); */
        }, 3000);
    };

    window.addEventListener('load', function(){
        /* console.log(performance.now() + ' - ' + '2. triggering cb directly'); */
        if(raf) { raf(cb); } else { cb(); };
    });
    var loadAppCssOnScroll = function(){
        /* console.log(performance.now() + ' - ' + '### triggering cb on scroll'); */
        window.removeEventListener('scroll', loadAppCssOnScroll);
        if(raf) { raf(loadAppCss); } else { loadAppCss() };
    };
    window.addEventListener('scroll', loadAppCssOnScroll);
</script>

这使有关推迟未使用CSS的PageSpeed洞察力建议消失了。

requestAnimationFrame（如果有），如果大多数浏览器中的标签页已在后台打开，则会暂停加载CSS文件。如果不符合要求，则可以将其从上面的代码中删除。 Ref

console.log（）并非在所有浏览器中都可用。不要在生产中使用它。 Ref

延迟未使用的CSS

2 个答案: