Question

PageSpeed Insights建议我：

“在首页内容中消除外部渲染阻止Javascript和CSS。您的页面有1个阻止CSS资源。这会导致渲染页面延迟。优化以下资源的CSS传递： http://itransformer.es/css/c0f9425.css“

css文件c0f9425.css是包含jquery-ui.css文件和自定义文件的合并文件。

我真的不明白这一点。我该如何遵循这个建议？

Answer 1

Google建议您将最初需要的（首页）CSS内联并在页面加载准备好时加载其余的CSS。 See here

javascript也一样。包含“必须代码”内联并在页面加载时加载“很好有代码”suggested here

想法是尽快加载用户首先看到的内容。

我个人觉得很难遵循，因为它会分割代码并使维护更难。虽然对大型项目有意义......

Answer 2

我只使用javascript文件成功解决了这个问题。

尝试在脚本标记或延迟属性中添加async属性。

例如：

<script src="filename.js" async></script>
<script src="filename.js" async="async"></script>

或

<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

我建议你使用async，它只在需要时加载文件。延迟属性在页面末尾加载文件，有时它不会执行所需的功能。

Answer 3

在上面的内容问题中消除渲染阻止CSS。我解决阻塞CSS资源优化CSS传递的方式如下：

<script>
        var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'css/style.css';
        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>

Answer 4

您可以将所有css代码文件转换为一个文件，然后谷歌建议您只有一个文件renderblocking。否则，如果您正在使用Wordpress项目，您可以使用各种插件为您的网站，如消除渲染阻止css和js。

如果你想完全渲染删除渲染阻止，那么你可以把你所有的css代码放到head部分，工作完美。

Answer 5

消除外部渲染阻止

<script src="your-path.js" defer></script> <script src="your-path.css" media></script>

消除外部渲染阻塞

5 个答案: