如何删除渲染阻止JS 和 CSS以提高网站速度

虽然网站的美感很重要，但它的内容和加载速度会让人们回访。WordPress 为用户提供了一个复杂的插件和主题工具箱，可以快速创建他们自己的自定义网站。

但是，这些主题和插件需要 JavaScript (JS) 和级联样式表(CSS) 才能工作。WordPress 以脚本文件的形式自动创建它们。它们通常优化不佳。因此，它们会大大降低您的网站速度。

这可能会让读者感到沮丧。因此，在本指南中，我们将探讨如何查找和删除这些渲染阻止脚本，并向您展示如何提高 WordPress 网站的加载速度。

1.优化加载顺序

网页的头部（</head></head> ）用于预加载元素。您的网页的基础应该放在此处，因此当用户加载您的网页时，不会出现白屏。虽然嵌入式 CSS 很好，但您应该避免在此处放置 JavaScript。

一旦你优化了头部，你需要优化身体。大多数网络浏览器从上到下呈现网页。您需要根据脚本的重要性和复杂性对脚本调用进行排序。您应该最后调用对网页呈现不重要的脚本以及需要时间的复杂脚本。

2.缩小代码

缩小代码涉及重写它并删除不必要的字符，例如空格、注释、逗号、换行符等。这使代码更加简洁和紧凑，最终减小了脚本的大小并增加了网页的加载时间。

W3TC 之类的插件和工具具有缩小主题中的 JavaScript 和 CSS 的模块。或者，您可以使用免费的在线工具（如 JavaScript Minifier）手动缩小脚本代码。

3.使用JavaScript的延迟和异步加载

Web 浏览器从上到下读取代码。当他们遇到脚本标签时，他们会停止加载网页并读取脚本文件。这会减慢渲染速度。

您可以使用async属性与网页并行加载脚本，并在它可用时立即执行。或者，您可以利用defer属性来延迟脚本的解析。这意味着它还将加载与网页并行的脚本，但仅在浏览器解析网页时执行它。

我们建议您不要在用于渲染和显示视觉元素的脚本上使用async或defer属性。与这些属性等效的 JavaScript 关键字是async和await关键字。您可以使用它们更异步地加载您的 Javascript，而无需编辑网页上的 HTML 标记。

4. 用 CSS3 替换 JavaScript 视觉元素

过去，CSS 不像今天那样通用。例如，CSS 1.0 和 2.0 没有基本控件和滑块等 UI 工具。

然后 CSS 3 出现了。它呈现了新的颜色、框阴影、不透明度等。JavaScript 非常适合添加复杂的用户界面控件。然而，Javascript 在资源上比 CSS 更重。

因此，使用过多的 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：这是最流行的网页优化插件之一。它可以自动检测哪些脚本有问题并为您修复它们。您可以将其用于快速缓存、参考、压缩和缩小。
• Autoptimize：这可以推迟和消除不必要的脚本，集成内联 CSS 并缩小脚本、HTML 和图像。Autooptimize 通过开放的 API 和高级选项高度可定制。
• W3 Total Cache：这个插件需要一些工作才能使用。在删除或编辑脚本之前，您需要手动跟踪和识别脚本。在大多数情况下，您的 WordPress 软件包已经提供了此插件。
• Async Javascript：由 WordPress 提供的开源插件。它允许您检测阻塞渲染的 JavaScript，然后延迟它或异步加载它。

那么为什么我们不首先推荐插件呢？不幸的是，其中一些插件会花费你。例如，Autooptimize 每年花费 49 美元。虽然这是一个合理的费用，但对于已经为托管和其他应用程序和插件支付大量资金的人来说，这可能是不理想的。

尽管如此，无论您是使用插件还是手动查找脚本，您都需要了解诸如缩小、异步加载和加载顺序等概念。如果您的脚本之一失败，它将使您更容易解决任何加载问题。