虽然网站的美观很重要，但让人们回头的是内容和加载速度。 WordPress 为用户提供了一个复杂的插件和主题工具箱，可以快速创建他们自己的自定义网站。
但是，这些主题和插件需要 JavaScript (JS) 和层叠样式表 (CSS) 才能工作。 WordPress 以脚本文件的形式自动创建它们。它们通常没有得到很好的优化。因此，它们会显着降低您的网站速度。
这可能会让读者感到沮丧。因此，在本指南中，我们将探讨如何查找和删除这些渲染阻止脚本，并向您展示如何提高 WordPress 网站的加载速度。
什么是渲染阻塞 JS 和 CSS 脚本，它们为什么不好？
大部分互联网网页页面由三个关键组件组成：JavaScript、CSS 和超文本标记语言。 HTML 作为基础，而 JavaScript 和 CSS 嵌入其中。然而，今天，在 HTML 文档中嵌入对外部脚本的调用更为传统。
这些脚本保存在 Web 浏览器用来呈现网页的队列中。在不查看源代码的情况下查看网页使用哪些脚本的最简单方法是从 (Ctrl + S) 您的网络浏览器下载它。 Web 浏览器将下载 HTML 文档以及包含网页使用的所有（或大部分）脚本、图像和其他文件的文件夹。
您的页面必须从队列中调用的脚本越复杂，渲染所需的时间就越长。通常，Web 浏览器会在其本地缓存中下载网页资源（例如脚本和图像）以更快地加载网页。虽然客户端用户可以通过禁用 JavaScript、增加缓存大小和使用 AdBlocker 来加快页面呈现时间，但这不是一个理想的解决方案。责任应由网络开发人员承担。
如果您收到投诉或注意到您的网站在呈现其内容时出现问题，那么现在修复它还为时不晚。
如何通过查找和修复渲染阻止脚本来优化您的网站
在决定杀死或优化哪些脚本之前，您必须评估您的网站或网页的速度。您可以使用 GTmetrix 或 Google 的 PageSpeed Insights 等在线平台。您需要做的就是插入您要测试的网站或网页的 URL，该工具将对其进行评分并提供其他见解。
他们还会建议您可以用来加速网站的审核。例如，他们可能会建议您在页面中使用更少的元素或减少未使用的 CSS 和 JavaScript。 GTmetrix 将尝试向您展示哪些脚本需要优化。
或者，您可以使用Chrome DevTools 的 Coverage 选项卡向您显示脚本的利用率数据。一旦您确定了哪些脚本不是最理想的，您可以采取一些措施来修复它们。但是，这些步骤需要大量编码才能成功实施。您至少需要对函数式 JavaScript 编程有基本的了解。
参加编码教程课程（或训练营）也是帮助进一步发展技能的好主意。平均而言，编码训练营可能需要 15 周才能完成，虽然这听起来可能很长，但如果您认为基本的代码素养是现代世界的一项重要技能，那么这是非常值得的。不过，这里有五种方法可以修复渲染阻塞脚本并提高页面速度。
1.优化加载顺序
网页头部（）用于预加载元素。你的网页的基础应该放在这里，这样用户在加载你的网页时就不会看到白屏。虽然嵌入式 CSS 很好，但您应该避免将 JavaScript 放在这里。
一旦你优化了头部部分，你就需要优化身体部分。大多数网络浏览器从上到下呈现网页。您需要根据重要性和复杂性对脚本调用进行排序。您应该调用对页面呈现不重要的脚本和最后需要时间的复杂脚本。
2.精简代码
精简代码涉及重写代码并删除不必要的字符，如空格、注释、逗号、换行符等。这使代码更干净、更紧凑，最终减少脚本的大小并增加网页的加载时间。
W3TC 等插件和工具具有用于缩小主题中的 JavaScript 和 CSS 的模块。或者，您可以使用 JavaScript Minifier 等免费在线工具手动缩小脚本代码。
3.使用 JavaScript 进行延迟和异步加载
Web 浏览器从上到下读取代码。当他们遇到脚本标签时，他们会停止加载网页并读取脚本文件。这会减慢渲染速度。
可以使用异步属性与网页并行加载脚本，并在脚本可用时立即执行。或者，您可以利用 defer 属性来延迟脚本的解析。这意味着它还将与网页并行加载脚本，但仅在浏览器解析网页时执行它。
我们建议您不要在呈现和显示视觉元素的脚本上使用异步或延迟属性。这些属性的等效 JavaScript 关键字是 async 和 await 关键字。您可以使用它们更加异步地加载您的 Javascript，而无需编辑页面上的 HTML 标记。
4.用 CSS3 替换 JavaScript 视觉元素
在过去，CSS 并不像现在这样通用。例如，CSS 1.0 和 2.0 没有像基本控件和滑块这样的 UI 工具。
然后 CSS 3 出现了。它呈现新的颜色、框阴影、不透明度等。JavaScript 非常适合添加复杂的用户界面控件。但是，与 CSS 相比，Javascript 占用的资源更多。
因此，使用过多的 JavaScript 会显着降低您的网站速度。如果您注意到您的页面正在使用 JavaScript 来弥补以前版本的 CSS，您应该更改它并用 CSS 替换所有不必要的 JavaScript——如果可以的话。这将使网页加载速度更快。
5.消除所有不必要的脚本
JS 和CSS 的目的是将功能扩展到网页，并在HTML 无法添加的地方添加逻辑。然而，HTML 5.3 带来了新的标签，这将使一些 CSS 和 JS 操作变得不必要。使用 HTML 而不是脚本自然会使您的网页加载速度更快。
因此，优化站点速度的最佳方法是消除所有未充分利用的脚本。您需要分析哪些脚本是完全不需要的并删除它们。同样，您可以使用 Chrome DevTools 的 Coverage Tab 或 GTmetrix 来查找页面上未充分利用的脚本并将其删除。
删除任何不必要的功能或标签后，您可以组合功能相似的脚本。如果您已经知道如何使用网页的源代码，那么这对您来说应该不是一项艰巨的任务。但是，没有网页设计经验或知识的用户不必担心。 WordPress 使您可以更轻松地识别网站上的脚本并使用各种优化插件。接下来我们将介绍这些。
6.使用插件优化您的 WordPress 网站
同样，您不需要编程的实用知识来优化您的 WP 网站。尽管一些经验会有所帮助。尽管如此，还是有一系列针对脚本优化的插件。他们中的一些人使用 AI 来缩小代码、更改加载顺序，并用更高效的代码和脚本替换未充分利用的脚本。
一些用于脚本优化的最佳插件包括：
- WP Rocket：这是最流行的 Web 优化插件之一。它可以自动检测哪些脚本有问题并为您修复。您可以将其用于快速缓存、合规性、压缩和缩小。
- 自动优化：这推迟并消除了不必要的脚本，集成了内联 CSS 并缩小了脚本、HTML 和图像。 Autooptimize 可通过开放的 API 和高级选项进行高度定制。
- W3 Total Cache：此插件需要一些工作才能使用。在删除或编辑脚本之前，您需要手动跟踪和识别脚本。在大多数情况下，此插件已包含在您的 WordPress 软件包中。
- Asynchronous JavaScript：WordPress 提供的开源插件。它允许您检测渲染阻塞的 JavaScript 并延迟它或异步加载它。
那么我们为什么不首先推荐插件呢？不幸的是，其中一些插件会让您付出代价。例如，Autooptimize 每年花费 49 美元。虽然这是一笔合理的费用，但对于已经为托管和其他应用程序和插件支付了很多钱的人来说，这可能并不理想。
尽管如此，无论您是使用插件还是手动查找脚本，您都需要了解缩小、异步加载和加载顺序等概念。如果您的某个脚本失败，这将使您更容易解决任何加载问题。
