css - 消除外部渲染阻塞

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。见这里。

javascript也是如此。包括“必须有代码”内联并按照此处的建议在页面加载时加载“很高兴有代码”

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

我个人觉得很难遵循，因为它会拆分代码并使其更难维护。不过对于大型项目来说很有意义……</p>

Answer 2

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

尝试在 script 标签或 defer 属性中添加 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>

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

Answer 3

Eliminate render-blocking CSS in above-the-fold content issue.I Solve blocking CSS Resources Optimize CSS Delivery of the following way:

<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

You can convert all your css code files into one file, then google suggest you only one file renderblocking. Otherwise if you are working with Wordpress project you can use various plugins for your site like eliminate render blocking css and js.

if you want to completely render remove render blocking, then you can put all you css code into head section, works prefect.

Answer 5

Eliminate external render-blocking

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