在 ASP.NET MVC 中延迟渲染阻塞 CSS 包答案

【问题标题】：Defer render blocking CSS bundles in ASP.NET MVC在 ASP.NET MVC 中延迟渲染阻塞 CSS 包
【发布时间】：2015-01-06 18:18:59
【问题描述】：

当我使用Google Page Speed Insights时

它说我的 CSS 是渲染阻塞的，因此会减慢页面的初始加载速度。在以前的项目中，我使用 Javascript 动态添加了 CSS，这可以很好地延迟加载。那么在仍然使用 bundle 的同时防止渲染阻塞的最佳方法是什么？

在 bundle.config 我有：

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"
                  ));

在_Layout.cshtml中

@Styles.Render("~/Content/css")

【问题讨论】：

您应该能够使用 @Styles.Url("~/Content/css") - 它只会创建捆绑包的 url，而不是整个 html 元素
任何以正常方式引用的 css（bundle 与它无关）都是渲染阻塞，这是有目的的。如果您网站的主 css 没有建立渲染阻止，您的客户端将首先看到纯文本网页的破坏版本，然后看到 css 的翻转被应用，这通常不是理想的用户体验
嗯，我个人认为，看到页面不断发展，而不是什么也没看到，这是一种更好的体验。 Google 似乎与他们的 Page Insights 算法有着相同的观点。
Simple page -> Complete page 进化与Plain text -> Complete page 不同，通常只建议第一个，但也更复杂。 IMO 拥有 100% 的主要 css 异步负载并不是一个好主意，但当然你可以这样做以获得更好的指标。你的问题已经不在话题范围内了，所以我会在这里停下来。但我只想提醒您，您正在为用户体验创建网页，而不是页面加载指标。
是的，您所说的与Google recommends 的内容相同。基本上先渲染重要的 CSS（以使网站在其余部分加载时看起来不错）......然后推迟剩余的 CSS。

标签： jquery css asp.net-mvc seo

【解决方案1】：

我自己通过使用以下 HTML 找到了解决方案：

<script type="text/javascript">

    function load_css_async(filename) {


        var cb = function () {
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.href = filename;
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
        };
        var raf = requestAnimationFrame || mozRequestAnimationFrame ||
            webkitRequestAnimationFrame || msRequestAnimationFrame;
        if (raf) raf(cb);
        else window.addEventListener('load', cb);


    }

</script>


@Styles.RenderFormat("<script type=\"text/javascript\">load_css_async('{0}')</script>", "~/Content/css")

这让我在 Page Insights 中获得了 100 / 100 :)

【讨论】：