如何停止渲染阻止Javascript和CSS? [英] How to stop render-blocking Javascript and CSS?

问题描述

我已经在Google PageSpeed Insights上测试了我的页面 并且一直说在首屏内容中消除渲染阻止的JavaScript和CSS"

I have tested my page on Google PageSpeed Insights and It keeps saying "Eliminate render-blocking JavaScript and CSS in above-the-fold content"

它说我有17个阻止脚本和11个阻止CSS资源.

It says I have 17 blocking scripts and 11 blocking CSS resources.

我曾尝试将所有JS移到页面底部以最后加载它，但是Google仍在说我有阻止渲染的JS ...

I have tried moving all of the JS to the bottom of the page to load it last however Google is still saying I have render-blocking JS...

有人知道我该如何解决吗?

Does anyone know how I can solve this?

在此先感谢您的帮助.

推荐答案

您需要深入研究

You need to dig more into Critical Rendering Path study.

简单规则::在您的网页中，仅加载对用户显示非常重要的内容.页面加载完成后即可加载其余内容.

Simple Rule: In your webpage load only things which are really important to show to user. Rest things can be loaded after page load has been done.

当在页面上下载JS时，它将停止DOM的生成，因此将停止下载其他资源.将JS放在底部将可以使用，但在下载JS时仍然会阻止您的渲染.为了解决此问题，建议在脚本标记中添加async标记.但是添加async可能会导致其他问题. 请参见此处.有关此内容的更多信息，请参见

When JS is being downloaded on page, it stops DOM generation and hence stop downloading other resources. Putting JS at bottom will work but still it will block your rendering when JS is being downloaded. Just to overcome this issue it is suggested to add async tag to your script tag. But adding async can lead to other issues. See here. More reading about this can be found here.

相同的情况适用于CSS，但是优点是它不会阻止DOM的生成.有关此内容的更多信息，请参见这里.

Same case applies to CSS but advantages is that it will not block DOM generation. More reading about this can be found here.

这篇关于如何停止渲染阻止Javascript和CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！