如何自动删除WordPress上未使用的JavaScript

Wordpress大师

JavaScript是一种强大而通用的语言，用于创建交互式网站和应用程序。重要的是要定期更新它，以确保没有未使用的JavaScript代码，可以减缓网站和创建安全漏洞。在这篇文章中，我们将讲述未使用JavaScript的原因，未使用的JavaScript文件如何影响用户体验和SEO，以及如何删除WordPress上未使用的JavaScript如果你是一个管理网站的人，你可能会熟悉“减少未使用的JavaScript”的消息，每当你在特定的网页上有一些无关的JavaScript代码时，网站检查工具就会弹出这个消息。例如，当你通过PageSpeed Insights（一个在线网站测试工具）检查你的网站时，你可能已经看到了这个消息，并且想要优化你的网站来消除这个错误。从表面上看，这个信息似乎很简单:删除未使用的JavaScript代码来提高网站的速度和性能。但在幕后还有更多的事情在发生。



作为网站管理员或所有者，这应该引起担心吗?它会影响网站在谷歌上的排名吗?那么用户体验呢?更重要的是，你能做些什么来解决这个问题?如果您正在寻找所有这些问题的答案，本文将详细解释该消息的含义，导致它在网站检查工具上出现问题的原因，以及您可以实施哪些常见的手动修复来消除它。当然，手动修复可能只是暂时解决问题。当你添加更多的元素到你的网站，使其更具互动性和视觉吸引力，你可能不得不再次减少未使用的JavaScript。因此，本文还将讨论可以快速识别问题根源并防止您重复解决问题的有效工具。因此，让我们首先看看减少未使用的JavaScript意味着什么。在这篇文章中

什么是未使用的JavaScript以及如何识别原因?如何识别未使用的JavaScript?检查从GTMetrix使用谷歌Chrome的开发工具检查UX和SEO如何受未使用的JavaScript文件的影响?如何删除WordPress上未使用的JavaScript ?结论常见问题解答







什么是未使用的JavaScript，如何确定原因?

顾名思义，未使用的JavaScript由JS文件组成，网页不使用这些文件来呈现主要元素或以后可能使用的文件-页面可以加载并显示主要内容，而不使用这些文件。通常，它是位于页面上方的内容——浏览者在向下滚动之前在首页看到的最重要的元素。然而，未使用的JS文件可能会阻碍呈现，这意味着它们在代码中的存在可能会导致网页花费更多时间来加载和呈现良好用户体验所需的基本元素。











































当然，并不是所有的JavaScript都是渲染阻塞，你需要JS添加动态组件到你的网站更多的交互性。然而，问题在于错误的执行时间。当浏览器开始加载网页时，它会在加载页面之前解析整个HTML。每当它找到指向JS文件的链接或遇到内联JS（在HTML中编写的JS代码）时，它就会停止解析过程，以获取并执行JS代码。自然，JS文件越长，执行时间就越长。如果JS代码位于不需要渲染页面其余部分的位置，那么渲染过程将无缘无故地花费更长的时间。

所以，JavaScript本身不是问题。相反，它可能在错误的时间出现在错误的地方。例如，您可以在HTML中使用第三方代码来分析您的网站以进行监控。Google Analytics和Facebook的跟踪代码就是典型的例子此类第三方代码的来源。虽然它对于有效的网站管理是必要的，但对于加载页面的主要组件并不是必需的。它只是在浏览器解析页面的HTML时出现。同样，您可能会添加插件来改善用户体验。但是这些插件也使用JS，导致渲染缓慢。

然而，这并不总是关于错误的位置。你可以有完全多余的代码，在整个网站中没有任何用处。通常情况下，如果你有以前的网页版本的旧代码片段不再功能，你得到“死JS”。这种冗余代码的出现会增加呈现时间，您应该立即删除它们。此外，测试网站性能的代码可能有JS文件。未能删除此类测试代码可能导致JS文件堆积在您的网页上。通过使用在线测试工具检查您的网站，您可以获得有关导致“减少未使用的JavaScript”消息弹出的因素的更详细的报告。这些见解将允许您在不影响网站用户友好元素的情况下更有效地优化JS。下面的部分给出了三种方法，你可以检查你的网站是否需要改进未使用的JS代码。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上!免费入门 不需要信用卡 如何识别未使用的JavaScript?

你可以通过现成的在线工具检查你的网站是否包含渲染阻止JavaScript。我们将探索三个主要的非常著名的- pagespeedinsights, GTMetrix和Google Chrome的开发者工具-这将让你快速了解问题区域，并帮助你实现适当的修复。

PageSpeed Insights是一个免费的在线实用程序，可以帮助您评估桌面和移动设备上网站的健康状况。除了检查未使用的JavaScript，它还提供了一些统计数据的详细报告，以衡量用户体验，并通过直观的视觉效果提供改善网站性能的建议。您可以按照以下步骤快速检查未使用的JavaScript。

1。转到PageSpeed Insights并在文本框中输入您网站的URL。点击分析。

  

图像源

2。接下来，您可以选择桌面并向下滚动到机会部分。

  

图像源

3。您可以展开Reduce未使用的JavaScript消息下拉菜单来查看问题。   



图像源

正如你所看到的，WordPress插件是导致未使用JavaScript的主要原因。您还可以查看插件的第三方源代码，并查看如果减少未使用的JavaScript，预计节省的时间—在本例中，节省的时间为1.03秒。

GTMetrix是另一个著名的免费网站测试工具，它可以给你所有相关的统计数据来评估你的网站的健康状况。它提供了关于性能指标、结构和其他重要因素的详细报告，帮助您了解网站可能需要改进的地方。此外，该工具还为您的网站分配了一个带有摘要的字母等级，表明网站的整体性能水平。您可以按照以下步骤检查未使用的JavaScript。

1。去GTMetrix，输入你的网站的URL。单击“测试您的站点”按钮。

  

图像源

2。处理后，GTMetrix将显示如下所示的结果。

  

图像源

3。单击Waterfall选项卡，然后单击JS。   



图像源

瀑布图列出了您网站上所有未使用的JavaScript文件。将鼠标悬停在时间轴上，将显示加载时间分解，显示所有过程S和它们的持续时间。上面的快照显示，特定JS文件的执行时间为44毫秒——在图表中称为阻塞时间，服务器生成响应的时间为50毫秒——称为等待时间，浏览器从服务器下载响应的时间为6毫秒——称为接收时间。

你也可以直接使用谷歌Chrome的开发者工具检查未使用的JS。转到谷歌浏览器的菜单项-显示为三个垂直点在右上角。单击“更多工具”，然后单击“开发人员工具”。下面的截图显示了一个示例WordPress网站。   



在控制台中单击Coverage，然后单击控制台窗口中所写的按钮。过了一会儿，控制台将以字节为单位列出所有JS和CSS文件及其相应的使用率。因此，您可以分析未使用字节数最多的JS文件，并查看其他详细信息。例如，下面的屏幕截图显示了一个JS文件，其中未使用的字节占总字节的62.6%。

如何UX和SEO未使用的JavaScript文件的影响?那么，为什么减少或删除未使用的JavaScript是如此重要呢?我们在前面简要地讨论了这一点，并提到未使用的JS文件可能会阻塞呈现。但如果它们是渲染阻塞呢?如果你网站的元素加载速度比类似的网站慢，你会失去转换吗?或者谷歌的排名算法是否会因为内容加载缓慢而将你的网站排名比其他网站低?回答这些问题需要了解未使用JavaScript的用户体验（UX）会影响哪些方面，以及用户体验是否对网站在Google上的排名至关重要。报告显示，糟糕的用户体验可能会让你失去90%的用户，而在用户体验上每投入1美元，你就会得到100美元的回报。他们还表示，良好的用户体验可以将转化率提高200%。这些数字应该让你相信用户体验对你的业务成功至关重要。未使用的JS阻塞或缓慢地呈现网站的基本元素可能会让用户感到沮丧，导致他们过早地放弃网站。对于电子商务网站来说尤其如此，因为用户界面（UI）不够理想，用户可能永远不会购买。但是糟糕的用户体验只是一个更严重问题的开始。Google的排名算法认为用户体验是一个相当重要的搜索引擎优化（SEO）因素，影响网站在搜索结果中的位置。2021年6月之后，谷歌更新了其排名算法，通过一组统称为核心网络生命指标的指标，更全面地衡量用户体验。这些指标主要衡量三件事——加载网站最突出元素所需的时间、视觉稳定性和用户交互性。让我们更详细地了解指标，以获得更好的视角。衡量网站主要内容加载时间的指标更正式地称为最大内容油漆（LCP）。假设您有一个销售服装的电子商务网站。您可能会将时尚模特的图像作为网站上显示特定服装项目的主要视觉内容。LCP将测量网站需要多长时间才能完全加载特色图像，因为它是页面的主要元素。Google认为小于2.5秒的LCP是好的，而超过4秒的LCP则被认为是差的。

  



相反,累积布局转变（CLS）措施内容的稳定的网页加载,意义有多少内容从一个地方转移到另一个地方。例如，当您尝试单击电子商务网站上的结帐选项时，您可能会遇到不稳定的内容，但由于内容向下移动，您无法做到这一点。不稳定性越高，CLS评分越高，表示用户体验较差。Google通过将撞击分数和距离分数相乘来衡量CLS——撞击分数的意思是获取相对于视口移动的元素的大小，距离分数测量元素相对于视口移动的距离。viewport是用户的查看区域。最后，我们有第一次输入延迟（FID）测量，它通过计算网站响应用户输入所需的时间来衡量交互性。例如，FID将测量在你点击一个下拉菜单后，网站展开它所花费的时间。网站响应你点击的时间越长，FID就越高，表明用户体验不佳。由于测量FID需要实时用户，因此通过上述工具进行检查非常复杂。因此，这些工具通常使用总阻塞时间（TBT）作为测量FID的代理。TBT是LCP和TTI之间的区别，TTI是指网站准备好让用户进行交互所需的时间。由于LCP是网站加载主要内容的时间，TBT衡量的是网站在加载所有重要组件后允许用户交互所花费的时间。在此期间，浏览器会阻止用户访问该网站。   



JavaScript主要关注FID分数，因为JS组件包含了网站的大部分交互元素。此外，如前所述，由于未使用的JS会延迟解析过程，因此可能会延迟加载使页面为用户交互做好准备所需的项。因此，如果代码中有大量未使用的JS, FID可能会增加，从而降低总体用户体验得分，从而影响网站的排名。Lighthouse是一个开源的网站测试工具，可以在Google chrome的开发者工具中使用，它给了30%的TBT权重，这是所有其他用户体验指标中最高的。因为TBT是FID的代理，所以很明显，用户交互性对网站的性能和排名有多么重要。TBT分数少于300毫秒被认为是好的。如何在WordPress上删除未使用的JavaScript ?现在我们知道了什么是未使用的JavaScript，如何检查它，以及为什么必须减少或删除未使用的JavaScript，让我们讨论一些帮助您实现它的方法。有几个手动修复方法可以帮助你快速提升网站的性能。我们已经触及了一些，比如删除第三方插件和优化HTML以确保JS链接不会妨碍解析。然而，你也可以通过一些工具来自动删除未使用的JavaScript，这些工具旨在提高你网站的核心网络价值。因此，让我们从手动修复开始，然后转向自动化解决方案。

一些常见的修复可以应用于手动删除未使用的JavaScript，包括使用最小的主题，更少的插件和第三方代码，并避免页面构建器插件。让我们更详细地看看这些。使用轻量级主题和构建器插件:减少未使用JavaScript的一个直接方法是在你的网页上应用轻量级主题。使用像elemental和Divi这样的页面构建器可能会使你的网站膨胀，因为前端有很多JS文件。更少的插件和第三方代码:JS插件会导致额外的JavaScript在你的网页上积累。这些插件通常通过包含滑块、图库、表单、按钮等来增强页面的设计。此外，第三方代码，如谷歌和Facebook的广告跟踪器可能会减慢页面加载过程。解决方案是只使用相关的插件，更小的跟踪代码（你可以搜索“减少未使用的JavaScript Google Tag Manager”来获得建议），并在本地服务器上托管第三方代码，而不是通过外部链接加载它。此外，避免在顶部内容（用户在加载页面时首先看到的内容）期间加载第三方代码。您可以通过优化JS代码的位置来实现这一点，这样当浏览器解析上面的内容时，它就不会出现。删除沉重的JavaScript文件:你可以找到沉重的JavaScript文件与使用率通过谷歌Chrome的开发工具。在确保上述条件之后，您可以删除使用率最低的那些折叠内容不需要它。延迟加载JavaScript:你也可以使用插件来延迟JavaScript加载，这意味着在用户交互之前，JS文件不会被激活。该技术提高了服务器响应时间，并确保您不会在网站检查工具上得到“减少未使用的javascript”消息。它可以很好地与沉重的Youtube和Facebook文件，在这种情况下，你会得到错误，如“减少未使用的javascript Facebook”或“删除未使用的javascript Youtube”。对于Youtube，它通常是Base.js文件，当你使用Youtube播放器的iframe API时出现。对于Facebook来说，通常是Facebook聊天插件和跟踪代码。使用WordPress插件

自动修复一个更快的方法是通过WordPress插件删除未使用的JavaScript。该插件可以帮助您自动删除未使用的JavaScript，以节省时间和精力。10Web助推器是一个插件与几个功能，以提高您的网站的核心网络生命，并确保您的访问者得到一个完美的用户体验。该插件可以很容易地延迟加载JavaScript脚本，使页面加载速度更快，并减少FID，以提高您的网站在谷歌搜索引擎上的排名。整个体验是自动化的，开箱即用。JS延迟技术在免费和专业版本的插件中都可以使用。你可以从wordpress.org免费下载并使用10Web Booster。

10Web Booster可以做更多的帮助从您的网站上删除未使用的JavaScript。这是一个完整的解决方案，通过最先进的优化功能，以提高您的网站的性能，确保PageSpeed得分90+。作为一个杀手级功能，它包括一个强大的内容分发网络（CDN），该网络建立在Cloudflare覆盖全球275个城市的广泛网络之上。与全页缓存相结合，10Web Booster减少了服务器响应时间，并允许用户与您的网站无缝交互。如果你搜索关于未使用的JavaScript主题的文章，你可能会得到数百个结果，表明删除未使用的JavaScript对于提高网站性能是多么重要。然而，正如前面所讨论的，罪魁祸首主要是外部JS链接或第三方跟踪代码，这些代码在浏览器解析HTML以传递上面的内容时出现。但是带有过多JS的插件也会导致这个问题。虽然JS插件让你的网页更漂亮，更有互动性，但太多的插件会适得其反，降低转化率，对你的业务产生不利影响。使用10Web Booster，您可以快速识别导致问题的此类文件和插件，并让10Web为您删除未使用的JavaScript。想要加速你的网站立即?

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

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

如何检测未使用的JavaScript?你可以快速检测未使用的JavaScript使用开源工具，如PageSpeed Insights, GTMetrix，和谷歌Chrome的开发工具。PageSpeed Insights将在Opportunities部分显示“减少未使用的JavaScript”消息，并提供导致该消息弹出的来源。在GTMetrix中，您可以查看瀑布图，查看所有未使用的JS文件和加载时间分解，以便更好地了解哪些文件造成了最大的延迟。你可以使用Google Chrome的Dev工具来更详细地了解每个文件的使用率，并决定应该删除哪些文件。如何优化第三方JS代码?

与从外部服务器获取第三方代码不同，在本地服务器上托管脚本更易于管理，因此下载和执行脚本所需的时间更少。你也可以延迟加载JS文件，直到用户通过像10Web Booster这样的插件进行交互。如何减少未使用的JavaScript元素?

你可以使用10Web Booster来延迟在元素网站上自动使用JS。或者，在Elementor中，您可以进入Elementor，然后进入设置。在“实验”下，您可以将“改进的资产加载”标签设置为“活动”。该设置将确保小部件仅在使用时加载其处理程序。此外，将Improved Asset Loading设置为Active, Swiper JS库（一个移动触摸滑块）只会在网页包含至少一个需要该库的元素时才会加载。如果不存在这样的元素，则不会加载库。该功能在element v3.1.0或更高版本中可用。避免未使用的JS的最佳实践是什么?在页面的主要内容渲染完成后，稍后加载JS，使用简单的主题，减少不必要的动画、交互性或效果。使用更短、更少的跟踪代码