如何在 wordpress 中删除阻止渲染的 JavaScript 和 StyleSheet？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24122260/
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
How to Remove render-blocking JavaScript and StyleSheet in wordpress?
提问by biswajitGhosh
I'm using wordpress and a theme and made some changes into this theme, when I want to increase page speed Google Page Speed tester says that I need to remove all blocking scripts and styles.
我正在使用 wordpress 和一个主题并对这个主题进行了一些更改，当我想提高页面速度时，Google Page Speed 测试人员说我需要删除所有阻止脚本和样式。
I don't know what is the Render blocking and how to solve this can any one guide me to fix the important issue.
我不知道什么是渲染阻塞以及如何解决这个问题，任何人都可以指导我解决这个重要问题。
Thanks
谢谢
采纳答案by CRABOLO
Lets say for example your <head>section looks like this
例如，让我们说您的<head>部分看起来像这样
<!DOCTYPE html>
<html>
<head>
<title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>
</head>
just move the script files to the bottom of the document, or the footer.php file, like so
只需将脚本文件移动到文档的底部，或footer.php 文件，就像这样
<!DOCTYPE html>
<html>
<head>
<title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>
</head>
<body>
<!-- all your other codes here -->
<!-- then your scripts right before the closing body tag -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>
</body>
</html>
If you move all the scripts out of the head and to right before the </body>closing tag, then that should get rid of that message in google page speed.
如果您将所有脚本从头部移出并移到</body>结束标记之前，那么应该可以消除谷歌页面速度中的该消息。
Please be aware that it might still give an error/message about CSS stylesheet has render blocking.. well, I would just ignore that , since I want my css to render before the document, so I would not remove that from the <head>.
请注意，它可能仍然会给出关于 CSS 样式表渲染阻塞的错误/消息......好吧，我会忽略它，因为我希望我的 css 在文档之前呈现，所以我不会从<head>.
回答by matinict
I solve Remove render-blocking JavaScript as follows:
我解决了 Remove render-blocking JavaScript 如下：
<script src="filename.js"></script>
Replace with Following:
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>
回答by Alexander Sidikov Pfeif
These solutions are just partial solutions.. methods of inlining, placing scripts at the bottom, using async or defer are not the best solution. If u wanna letting the page load first and then loading the js.
这些解决方案只是部分解决方案。内联、将脚本放在底部、使用 async 或 defer 的方法都不是最好的解决方案。如果你想让页面先加载然后加载 js。
for JS place this code after the </body >tag
对于 JS，将此代码放在</body >标签之后
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "yourjavascripttoload.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Src: Patrick Sextonhttps://varvy.com/pagespeed/render-blocking.html
来源：帕特里克·塞克斯顿https://varvy.com/pagespeed/render-blocking.html
