如何修复渲染阻塞Javascript和CSS在WordPress

Ammy Brown June 27, 2018

Rating: 5.0/5. From 1 vote.

Please wait...

If you test your website 在谷歌页面速度的见解，你注意到封锁 Javascript and CSS. 我们将向您展示如何处理渲染阻塞 JavaScript 和CSS. 有两个简单的步骤.

什么是渲染阻塞JavaScript和CSS?

首先，你需要找出什么是渲染阻塞 JavaScript and CSS. 这些知识将帮助您解决问题.

所有WordPress网站都有 Javascript 以及由不同主题和插件添加的CSS文件. 这些代码可以提高网站的加载速度. 所有的浏览器通常都需要一些时间来加载这些代码，然后再加载实际的页面内容. 这意味着你的网站访问者必须等待更长的时间才能加载页面.

如果你正在发展你的 website 你应该知道谷歌页面速度洞察 tool.

这个工具检查你的 website 并提供建议，可以帮助你提高你的 website’s loading speed.

Once the website 在谷歌页面速度洞察中进行测试，您将获得一个带有站点分数的页面和提高该分数的建议. 通常，网站得分为50-70分. 这取决于你是否遵循你在页面上看到的建议. 但请记住，网站的速度影响你的 website performance.

如何修复渲染阻塞JavaScript和CSS?

Render-Blocking JavaScript CSS是最常见的需要改进的东西 website performance. 修复它的最好方法是安装特殊的插件. 我们将向您展示如何使用自动优化和W3 Total Cache plugins.

Autoptimize plugin.

你绝对知道该怎么做 plugin 安装，但我们会提醒你的过程.
- 登录到你的WordPress管理面板. Navigate to Plugins > Add New section
- Enter Autoptimize 你会在屏幕上看到的搜索框.
- Install and activate plugin.
Is it done? 您现在可以进行下一步了.Open Settings > Autoptimize page in your backend. This plugin 允许你修改JS和CSS文件. But please note! It could effect your website appearance.

Locate JavaScript Options and CSS Options sections here. 你所需要做的就是选中这些标题旁边的复选框，然后点击 保存更改和清空 cache button.

Test your website in Page Speed tool. 如果有任何问题 plugin 页面，单击“高级设置” tab 能够包含内联JS并删除默认排除的脚本.

转到CSS部分并启用内联CSS选项. 保存更改并单击 Clear Cache button.
W3 Total Cache 是推荐的吗 plugin 已经安装在您的站点上.
1. 为了配置 plugin settings open Performance > General Settings 页面，然后向下滚动到 Minify section.
2. Select Manually 作为最小化模式选项. Save the changes.
3. 现在需要添加要缩小的CSS. 必须缩小的文件列表在你的Google pagespeedinsights工具中, just under the 消除render-blocking JavaScript 和CSS在上面的内容 title. 复制您将在那里看到的url.
4. You can open Performance > Minify page now. 将JS脚本添加到 JS file management section. 要添加脚本，请单击add a script button. 输入之前复制的url.
Do the same under the CSS file management section.
要保存更改，请单击 保存设置和清除 cache button.
打开谷歌页面速度工具和测试您的 website again.