消除渲染阻塞的JavaScript和CSS [英] Eliminate render-blocking JavaScript and CSS
问题描述
我有一个麻烦,弄清楚Google PageSpeed Test中的这个spsefic结果实际上意味着什么。
我正在测试此网站:www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com
<任何人都可以建议我吗?我已经设法解决所有其他错误 - 但我完全停留在这一个,我明白CSS必须在页面的头部,这是告诉不要把它放在头部,但在结束
您的浏览器在加载JavaScript时冻结网页呈现
快速回答:您只需将JavaScript src置于内容下方即可。
为什么?因为当你的浏览器开始加载JavaScript时,它冻结其余的,直到它完成。
加载页面的内容首先允许它显示,然后JavaScript
这样做:
< html>
< head>
< / head>
< body>
我的伟大的身体内容!
< script type =text / javascriptsrc =my / js / files.js>
< script type =text / javascriptsrc =http://www.googleapi.com/my/external/scripts.js>
< / body>
< / html>
而不是这个(不幸的是还是很常见):
< html>
< head>
< script type =text / javascriptsrc =my / js / files.js>
< script type =text / javascriptsrc =http://www.googleapi.com/my/external/scripts.js>
< / head>
< body>
我的伟大的身体内容!
< / body>
< / html>
I am having a trouble with figuring out what "this spsefic outcome" in Google PageSpeed Test actually mean.
I am testing this website: www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com
Can anyone advice me please? I have managed to fix all of the other errors - but I am completely stuck at this one, I understand that CSS has to be in the head of the page, is this telling not to place it in the head but at the end of the page?!
Your browser freezes page rendering while loading JavaScript
Quick answer: you just have to put your JavaScript src below your content.
Why? Because when your browser begins loading JavaScript, it freezes the rest until it's done with that.
Loading the content of your page first allows it to be displayed, and then JavaScript has all the time it needs to load.
So do like this:
<html>
<head>
</head>
<body>
My great body content!
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</body>
</html>
Instead of this (which is unfortunately still really common):
<html>
<head>
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</head>
<body>
My great body content!
</body>
</html>
这篇关于消除渲染阻塞的JavaScript和CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!