CSS 消除外部渲染阻塞
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18013648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Eliminate external render-blocking
提问by Manolo
PageSpeed Insights suggests me to:
PageSpeed Insights 建议我：
"Eliminate external render-blocking Javascript and CSS in above-the-fold content. Your page has 1 blocking CSS resources. This causes a delay in rendering your page. Optimize CSS delivery for the following resources: http://itransformer.es/css/c0f9425.css"
“在首屏内容中消除阻止外部渲染的 Javascript 和 CSS。您的页面有 1 个阻止 CSS 资源。这会导致页面渲染延迟。优化以下资源的 CSS 交付：http: //itransformer.es/ css/c0f9425.css"
The css file c0f9425.cssis the combined file with jquery-ui.cssfile and custom one.
css 文件c0f9425.css是jquery-ui.css文件和自定义文件的组合文件。
I don't really understand this point. How should I follow this suggestion?
我真的不明白这一点。我应该如何遵循这个建议？
回答by roka
Google suggests you to put the initially needed (above-the-fold) CSS inline and load the rest of the CSS when the page load is ready. See here.
Google 建议您将最初需要的（首屏）CSS 内联并在页面加载准备就绪时加载其余的 CSS。见这里。
Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load as suggested here
javascript 也是如此。内联包含“必须有代码”并按照此处的建议在页面加载时加载“很好的代码”
Idea is to load what the user sees first as fast as possible.
想法是尽可能快地加载用户首先看到的内容。
Personally I find it hard to follow as it would split the code and makes maintaining it harder. Makes sense for large projects though…
我个人觉得很难遵循，因为它会拆分代码并使维护变得更加困难。虽然对大型项目有意义......
回答by jagseer singh
I have successfully solved this problem with javascript files only.
我只用 javascript 文件成功解决了这个问题。
Try adding the async attribute in script tag or defer attribute.
尝试在 script 标签或 defer 属性中添加 async 属性。
For example:
例如：
<script src="filename.js" async></script>
<script src="filename.js" async="async"></script>
or
或者
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>
I suggest you to use async, it loads the file only when needed. Defer attribute load the file at the end of the page, some time it will not perform its functionality required.
我建议您使用异步，它仅在需要时加载文件。Defer 属性在页面末尾加载文件，有时它不会执行其所需的功能。
回答by matinict
Eliminate render-blocking CSS in above-the-fold content issue.I Solve blocking CSS Resources Optimize CSS Delivery of the following way:
消除首屏内容中的渲染阻塞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>
回答by Manu Panduu
Eliminate external render-blocking
消除外部渲染阻塞
<script src="your-path.js" defer></script><script src="your-path.css" media></script>
<script src="your-path.js" defer></script><script src="your-path.css" media></script>
回答by jagseer singh
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.
您可以将所有 css 代码文件转换为一个文件，然后 google 建议您只渲染一个文件。否则，如果您正在使用 Wordpress 项目，您可以为您的网站使用各种插件，例如消除渲染阻塞 css 和 js。
if you want to completely render remove render blocking, then you can put all you css code into head section, works prefect.
如果你想完全渲染移除渲染阻塞，那么你可以把你所有的 css 代码放到 head 部分，工作完美。
