最小化WordPress主线程工作的6个技巧

Wordpress大师

开发人员在使用WordPress时遇到的主要问题之一是处理主线程工作，这可能会大大降低响应时间。在这篇文章中，我们将探讨主线程工作的意义，以及如何最小化它，以确保更快的加载时间和提高WordPress中的网站性能。您正在寻找提高web应用程序性能的方法吗?关键的一步是在运行性能测试时尽量减少主线程工作，因为这是PageSpeed的建议之一。在客户端，网页的性能通常取决于浏览器处理和呈现HTML、CSS和JavaScript代码的速度——所有这些都在主线程上。也就是说，通过仔细的计划，减少单一资源的压力是可能的，让你的应用或网站运行得更快更顺畅。在这篇博文中，我们将探讨主线程工作意味着什么，它是如何影响你的WordPress站点性能的，并看看一些最小化主线程工作的最佳实践。让我们开始吧!在这篇文章中

主线程是怎么工作的?如何阅读谷歌pagesspeed洞察主线程工作报告?如何解决“最小化主线程工作”的问题?修复手动修复与WordPress插件结论常见问题





什么是主线程工作?假设主线程是一个餐馆的服务员。服务员必须接受点单，处理付款，送餐，补充饮料等。假设服务员忙于某个特定的活动，比如花了太长时间来处理订单（例如，客户有一个很难的订单或者还没有决定）。在这种情况下，他或她无法参加其他职责。这就形成了一个瓶颈，影响了你对餐厅业绩的看法。web浏览器的主线程是浏览器处理大多数与页面加载相关的操作的地方，比如渲染/绘制内容和处理用户输入。如果您想了解更多关于线程的知识，可以查看Mozilla开发人员文档中的这篇文章。要理解主线程是如何工作的，我们必须首先描述当您尝试加载页面的资源时发生了什么。

浏览器首先向服务器发送请求。一旦服务器返回请求的内容，浏览器就可以开始分析（解析）HTML代码并生成DOM树——HTML结构。浏览器现在能够呈现和显示信息。   



图像源

简单来说，浏览器的主线程就是解析和呈现代码的过程。当浏览器遇到阻碍渲染的资源，导致渲染过程变慢时，主线程就会变得繁忙，转而解析/执行这些资源，比如脚本或样式。因此，页面不能交互，不能对用户输入作出反应。导致主线程繁忙的主要原因是JavaScript;CSS文件也有贡献。由于这些文件阻碍了JS和CSS的呈现，因此应该删除，因此浏览器在解析代码和显示页面时不应该遇到它们。通过查看pagespeeinsights报告，您可以清楚地看到主线程工作是如何受到影响的:

  

观察pagespeeadvice被分为七个独立的部分。您可以确定哪个部分对性能影响最大。如何阅读谷歌页面速度洞察的报告对主线程的工作?

Google pagesspeed Insights （PSI）是一个调试网页的好工具。对于主线程和JavaScript有各种各样的审计。使用“最小化主线程工作”审计是一个好的开始，因为它分析并分组主线程活动。

脚本评估:此类别测量浏览器评估页面上使用的任何JavaScript代码所花费的时间。这可以包括函数、变量或其他已包含在页面上的代码。其他:这个类别包括主线程上与其他类别无关的任何其他时间。样式和布局:这个类别根据所使用的HTML元素和CSS样式计算页面布局所花费的时间。渲染:这是指在应用了所有布局指令之后，浏览器绘制页面所需的时间。脚本解析和编译:此类别测量浏览器解析和编译页面上使用的任何JavaScript代码所花费的时间。解析HTML和CSS:此类别测量浏览器解析页面上的HTML和CSS代码所花费的时间。垃圾收集:此类别衡量垃圾收集所花费的时间。垃圾收集是浏览器回收页面不再使用的内存的过程。与主线程相关的其他类别是“避免长主线程任务”，这使得您可以通过显示特定JavaScript任务运行所需的时间来更具体。如果长任务花费的时间太长，浏览器可能会挂起、崩溃，并显示“啊，啪!”除了这些审计之外，PSI的交互性指标还可以识别具有主线程问题的页面。交互时间（TTI）和总阻塞时间（TBT）衡量长任务和未优化JavaScript的影响。对于实际用户数据（即字段数据），您应该关注First Input Delay度量。

  



这三个指标都处理交互性，所以如果它们都是红色的，那么您可能有主线程问题。使用Chrome的DevTools，你可以进一步分析问题。打开网页时，从右键菜单中选择“Inspect”。点击“Performance”并注意页面加载所需的时间。在这种情况下，你也可以使用“Coverage”面板:

  

当报告准备好了，转到“Main”部分，寻找带有小红色覆盖的灰色任务。这就是我们所说的“长任务”。通过使用“Coverage”选项卡，你可以找到特定的文件，并查看其中未使用的JS代码的百分比:

  

如你所知，浏览器在继续之前必须下载、解析和执行这些资源。这会阻塞主线程。因此，提供渲染阻塞资源会连续地减慢加载过程。现在，让我们看看如何最小化主线程的工作量。如何解决“最小化主线程工作”的问题?当最小化WordPress中的主线程工作时，有两种方法可以考虑。

手动方法插件方法

这些优化方法应该逐页实施整个网站。这在技术上是相当困难的，同时考虑到一个人应该更新插件/主题更新，并确保实现不会破坏任何设备上的任何网页。这就是为什么通过插件自动优化更安全，更容易做到的原因。

让我们在这里逐一讨论。下面的步骤将帮助你在你的WordPress网站上手动减少主线程的工作量。延迟JS最小化JS和CSS删除未使用的JS和延迟JS延迟非关键的CSS其他性能优化延迟是指将函数或代码块的执行推迟到稍后的时间的过程。在最小化主线程的上下文中，延迟工作意味着将其推迟到稍后的时间，这有助于防止主线程阻塞和无响应。首先，您可以推迟JavaScript脚本的执行，只在显示最相关的内容后才加载它们。

deferred JS将专门针对脚本解析和编译类别。在你手动延迟JS之前，你必须使用pagespeedinsights报告来识别脚本。然后，则需要向每个JavaScript文件添加defer属性，以便在页面完成呈现之后才执行该文件。

下面演示了延迟属性:

最小化JS和CSS文件对于提高网站性能和减少主线程工作至关重要。最小化JS有助于管理脚本评估、解析和编译，而最小化CSS解决了与最小化主线程脚本评估和解析HTML和CSS相关的类别。通过删除不必要的字符，如空格和注释，最小化使代码更小，更高效，这反过来又有助于浏览器更快地加载内容，并更快地向用户显示页面。虽然如果没有这些字符，生成CSS代码可能会很困难，而且不自然，但是正常编写代码并添加Webpack缩小阶段可以使这个过程更容易。通过使用这些技术，你可以创造一个更好的用户体验，提高你网站的整体性能。

3。

JS文件也可以通过删除不必要的JS和延迟JS资源来有效管理。这两个操作将处理PSI报告中的脚本评估、解析和编译部分。当删除不必要的JavaScript时，当内容显示在页面上方时，JS文件将不会被呈现。因此，页面最重要的内容不需要的大型JS文件不会阻止浏览器及其主线程的工作。当JavaScript资源被延迟时，浏览器将不会加载它们，直到第一个用户接触（例如，悬停，滚动，点击）。因此，主线程将能够继续运行。

相关文章如何在WordPress上自动删除未使用的JavaScript

延迟非关键CSS和内联关键CSS

如果你想尽量减少主线程工作并通过PSI审计的解析HTML和CSS类别，你应该延迟非关键CSS -位于页面下方的CSS文件，并且不需要显示页面。目标是只在浏览器呈现和显示最重要的内容之后才加载非关键的CSS。还有其他方法可以延迟CSS文件。首先，要认识到延迟非必要的CSS和内联重要的CSS（必须尽快加载的文件）是一起工作的。因此，您应该在HTML代码中找到并内联必要的CSS。使用关键路径CSS生成器是一个值得考虑的选择。使用后续方法，可以异步加载非关键CSS文件。

相关文章如何倾斜关键的CSS和延迟未使用的CSS在WordPress

5。除了“最小化主线程工作”的建议之外，还有其他一些你应该优化的类别:

风格和布局渲染垃圾收集。为了避免大而复杂的布局和布局抖动，使用样式来进行布局计算而不是使用JavaScript可以有效地减少网站上的主线程工作。通过使用CSS转场，您可以比使用JavaScript更快地实现视觉效果和运动。该策略包括添加普通样式，并为您想要合并的任何效果和动作应用CSS过渡。通过使用CSS进行布局计算，你可以减少浏览器主线程需要执行的工作量，这可以提高整体性能和用户体验。在使用垃圾收集时，你还应该监控网页的总内存使用情况。使用上述方法优化网站的每个页面在技术上可能是一项具有挑战性的任务，特别是考虑到需要保持所有页面和设备的一致性时。菲尔特此外，需要跟上插件和主题的更新会使这个过程进一步复杂化。由于这些原因，通过插件使用自动优化可能是一种更安全、更容易的方法。然而，了解优化的基本方法和技术仍然很重要，因为这可以帮助你识别潜在的问题，并确保你的网站在最佳状态下运行。下一步是确定哪些插件可以用来自动优化你的网站。另一种最小化WordPress主线程工作的方法是使用插件方法。其中一个最突出的插件是10Web Booster。

10 Web Booster旨在通过使用各种技术来帮助最小化WordPress网站上的主线程工作，例如延迟JavaScript，最小化JavaScript和CSS，删除未使用的JavaScript并延迟其加载，延迟非关键CSS和其他性能优化。最小化和压缩JS和CSS也是减少主线程工作的有效选择。这个过程包括从源文件中删除空白、注释和冗余代码。10Web Booster使用先进的算法来识别哪些文件是安全的，可以最小化而不影响其功能;这可以确保你所做的任何改变都不会使你的网站无法使用。该插件还允许您删除未使用的JS并延迟其加载;这意味着像跟踪器这样不需要立即使用的元素不会减慢其他进程，直到它们被特别调用。这不会破坏网页。此外，10Web Booster可以延迟非关键的CSS和资源，如字体，所以他们不加载，直到页面的生命周期后期;这有助于加快初始呈现时间，因为在内容完全布局之前，只允许在页面的视觉层次结构中使用必要的元素。所有这些都不会影响初始页面布局和样式，也就是说不会破坏它们，也不会损害CLS指标。最后，除了提到的最小化主线程工作的优化之外，10Web Booster还提供了各种其他功能来帮助提高网站性能。其中包括浏览器缓存、延迟加载图像、减小图像大小、优化数据库等等。让我们来看看不同的优化级别，可以最大限度地减少主线程的工作量。   

标准

标准级别集成并压缩CSS和JS文件，减小其大小并使其更轻。在这一层中，JS文件的一个子集被指定为只在被用户交互触发时加载。网站上的图形被转换为WebP图像，这是较低的图像文件，但不会牺牲图像质量。最后，延迟加载可用于照片、视频和iframe，并延迟加载不需要的材料。平衡的级别包括在标准级别和关键CSS的生产中发现的所有优化选择。这使得关键的CSS或页面的可见部分将在任何其他内容之前首先被加载。任何附加的CSS样式在基本样式之后加载。

Strong提供了所有标准的优化设置，加上所有JavaScript的延迟，这意味着所有JS将在用户输入时加载。

极限网站优化包含所有三个层，标准+关键CSS和延迟JS。如果你想提高网站的速度，你应该跟踪你的WordPress网站，尽量减少主线程的工作。有一个插件可以自动执行本文中概述的许多优化方法，它是10Web Booster，可以从官方WordPress插件库免费下载。免费版的10Web Booster提供了一系列优化功能，包括关键的CSS, JS延迟和字体交换，并且可以在网站的最多六个页面上使用。对于以下用户:需要优化额外的页面，一个专业版的10Web助推器是可用的，它提供了所有相同的优化功能作为免费版本，但无限制的使用。10Web Booster的专业版还包括Cloudflare企业CDN集成，不仅可以从附近的服务器快速加载资源（CSS, JavaScript，字体），还可以通过Cloudflare网络分发完全缓存的网页。10Web Booster简化了优化过程，使网站所有者和开发人员能够轻松地应用最佳优化实践，而无需广泛的技术知识或专业知识。通过利用10Web Booster，用户可以确保他们的网站运行平稳，并在最佳状态下运行，从而为访问者带来更好的用户体验。

这将使您的网站加载速度更快，并提高您的谷歌pagespeinsights得分。减少主线程工作可能有点技术性和耗时，但为了性能优势，这是值得的。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡，想要加快你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡 常见问题

延迟和异步之间的区别是什么?通过使用async，您的脚本可以在加载后立即运行，而不会阻塞页面上的其他元素。在defer中，脚本只会在页面加载完成后运行。Async通常是首选，但也有例外。什么是最好的方式来推迟解析JavaScript在WordPress?JavaScript的解析可以通过几种方式延迟。首先，您可以向脚本添加两个属性:Async和Defer。



JavaScript可以使用这两个属性下载，而无需暂停HTML解析。Async实际上并不暂停HTML解析以获取脚本（与默认行为相反），而是暂停HTML解析器以在获取脚本后执行脚本。

  

启用defer后，访问者的浏览器会在解析HTML的同时下载脚本，但他们会等待HTML解析完成后再解析脚本。“delay”和“defer”的区别是什么? Defer将延迟页面上JavaScript的加载。这有助于消除渲染阻塞的情况。但是，在显示页面之前，仍然必须加载JavaScript。换句话说，它将继续影响JavaScript执行时间、传输大小等核心Web Vital分数。





延迟完全消除了瀑布/页面加载中的JavaScript。如果您做一个速度测试，它将看起来好像脚本不存在。它们不是在页面加载时加载，而是在用户与页面交互时加载（移动鼠标，滚动，计时器等），这可以提高你的核心Web Vital分数并增强你的第一次内容绘制（FCP）。然而，JS延迟应该小心地完成，以免破坏页面（例如，当延迟负责渲染（而不是旋转）页面顶部滑动条的脚本时）。

我如何尽量减少主线程工作在元素?在element中有两种方法可以最小化主线程的工作量。第一种方法是使用10Web Booster，这是一个免费的插件，可以从WordPress.org下载。它会自动应用各种优化，包括关键的CSS、JS延迟、字体交换、延迟加载等等。该插件的免费版本包括所有这些优化最多6页的网站，而专业版解锁他们的所有页面。第二种方法是使用element中的实验功能，称为性能实验。此功能允许您测试尚未正式发布的新性能优化。但是，在使用此功能时一定要小心，因为它可能会导致意外与其他插件或功能存在问题或冲突。如果您选择使用性能实验，请确保彻底测试您的网站，并在应用更改之前和之后监控其性能