龙空技术网

通过减少未使用的JavaScript来加速WordPress网站

搬主题 94

前言:

今天咱们对“js最小化事件”大体比较注意,朋友们都需要知道一些“js最小化事件”的相关文章。那么小编也在网上搜集了一些关于“js最小化事件””的相关知识,希望兄弟们能喜欢,咱们快快来了解一下吧!

不少站长在使用WordPress网站的时候会发现搭载了非常多的JavaScript文件,也就是我们俗称的JS脚本,但是加载多了,网站速度就变得很慢。可以通过减少未使用的JavaScript来加速WordPress网站。在这篇文章中,搬主题将介绍如何减少未使用的JavaScript,这将最终有助于网站的快速加载。

原文链接:通过减少未使用的JavaScript来加速WordPress网站 - 搬主题

谈到未使用的JavaScript,事情是很直接的:你的WordPress网站包含的不需要的代码越多,网站加载的时间就越长。没有人喜欢经历缓慢的网站性能及其后续影响,因此,了解如何识别和摆脱网站中未使用的JavaScript文件是至关重要的。

什么是JavaScript?

JavaScript是一种编程语言,可以让你做几乎所有事情,包括创建动态更新的内容和管理多媒体。用几行JavaScript代码就能完成的事情是非常了不起的(好吧,也许不是一切)。

通过文档对象模型API,JavaScript经常被用来动态地编辑HTML和CSS,以刷新用户体验。请记住,你的WordPress网页的代码通常是按照它在页面上出现的顺序加载和运行的。如果JavaScript在它要改变的HTML和CSS之前被加载和运行,可能会发生错误。

什么是未使用的JavaScript?

未使用的JavaScript文件是渲染或加载和显示页面主要内容时不需要的资源。它们不属于应该首先呈现的材料,或所谓的 "折叠上方 "内容。只有必要的资源,主要是HTML代码,应该被浏览器分析和渲染,以加快页面加载速度。

尽管仍在代码中,但它们已不再被利用。它们根本没有任何作用。

为什么要减少JavaScript的使用?

你的WordPress网站的效率和用户体验可能会受到未使用的JavaScript文件的严重影响。首次输入延迟(FID)是核心Web Vitals衡量标准之一,是有问题的主要指标。

首次输入延迟(FID)只能在现场计算,因为它通过考虑用户互动来衡量页面的响应能力。而作为Lighthouse基于用户互动来衡量页面的互动性的统计指标,总阻塞时间(TBT)已经取代了FID的位置。

未使用的JavaScripts的类型

以下两种形式的未使用的JavaScript是:

非关键性的JavaScript。它被用在其他地方,但没有被用于页面顶部的材料。废弃的JavaScript。它不再被使用了。可能有一些页面的早期迭代的片段不再被链接,或者只是短暂地被利用。含有未使用的JavaScript的坏处

未使用的JavaScript对网站的性能有负面的影响,表现为页面加载时间的延迟。网站的可用性和它在SERP中的表现如何,直接受到网站速度的影响,这是一个关键因素。如果一个网站加载缓慢,用户离开并访问另一个网站的可能性就会增加;由此产生的跳出率是一个强有力的SEO指标,会降低网站的搜索引擎结果。

这个问题更多的是消费者如何看待一个网站的加载时间,而不是它的实际加载时间。你应该努力确保网站一开始只加载那些网站可用的必要脚本,之后就可以加载其他的脚本,因为浏览器会试图同时加载所有的东西,包括未使用的脚本。

减少未使用的JavaScript的益处

不言而喻,浏览器下载、制作和执行一个有更多JavaScript代码的页面所需的时间就越长。此外,那些甚至没有被利用的JavaScript也会受到影响。如果页面上有JavaScript,浏览器将不得不花费时间和资源来处理它。这凸显了日常代码审查和优化工作的必要性。

你的移动用户也从代码优化中受益。你可以通过减少对浏览器处理JavaScript的依赖来减少对带宽的需求。为了防止页面加载过程被推迟到超过必要的时间,你应该能够区分你的重要JavaScript和非必要的JavaScript。

如何减少未使用的JavaScript?

这里搬主题将介绍如何使用GTMetrix识别大型的JavaScript文件,然后将讨论如何减少未使用的Javascript。

使用GTMetrix来寻找最大的JavaScript文件

利用GTmetrix的瀑布图来确定你最大的JavaScript文件。进入GTMetrix网站,输入你的网站的URL,点击测试你的网站

一旦显示结果,点击瀑布标签点击JS,你就可以看到按JavaScript文件大小升序排列的文件。

通常情况下,URL会显示它的来源。要查看你所有的JavaScript文件,请使用类型过滤器。你也可以查看使用情况的可视化,看看总的和未使用的字节数。

最小化JavaScript

对JavaScript进行最小化,可以将你的代码中不相干的字符剥离出来。在你的源代码中找到有问题的文件,然后将它们从最小化中排除,如果这损害了你的网站。

你可以使用LiteSpeed Cache插件轻松地做到这一点,搬主题也是这样进行了设置。

转到WordPress仪表板

从左侧菜单中点击LiteSpeed Cache -> 页面优化

从顶部点击JS设置,打开JS最小化,点击保存更改。这将使你所有的JavaScript文件和代码最小化。

删除Elementor中未使用的JavaScript

通过动态加载部件JS处理程序和Swiper,只有当它们真正被使用时,这可以最大限度地减少Elementor的JavaScript文件。

关于Elementor插件,可以下载本站推荐的Elementor Pro中文汉化插件【Elementor Pro 3.7.3+Elementor 3.6.8完美汉化中文版(含全套模板)|可视化编辑页面自定义设计WordPress插件】

转到WordPress仪表板

从左边的菜单中点击 Elementor -> 设置

点击顶栏中的 "实验"选项卡,将 "改进的资产加载"部分的状态改为 "激活"。向下滚动并点击 "保存更改"。推迟或推迟非必要的JavaScript转到WordPress仪表板点击左侧菜单中的插件->安装插件搜索Async JavaScript。 安装和激活从左手边的菜单中进入设置->异步JavaScript在顶栏的设置标签中。单击 "应用推迟"。向下滚动并点击 "保存更改"。用资产卸载插件删除未使用的JavaScript

当特定的文件或插件不需要在网站上加载时,Asset CleanUp插件可以让你禁用不需要的JavaScript。

关于Asset CleanUp插件,可以下载本站推荐的Asset CleanUp中文汉化插件【Asset CleanUp Pro 1.2.1.3汉化中文版|网站CSS+JS压缩页面优化加速WordPress插件】

转到WordPress仪表板

点击左侧菜单中的插件->安装插件搜索 "Asset CleanUp"。安装和激活从左侧菜单中点击Asset CleanUp->设置从左手菜单中点击测试模式,并点击启用测试模式的切换键,将其打开。向下滚动并点击更新所有设置·现在点击左手菜单中的优化JavaScript,并打开将加载的JS合并到更少的文件中。向下滚动并点击更新所有设置禁用未使用的插件模块转到WordPress仪表板点击左侧菜单中的插件->安装插件搜索RankMath。安装并激活该插件点击左侧菜单中的RankMath -> Dashboard从顶栏点击模块,关闭任何未使用的模块的开关。最后总结

没有被使用的JavaScript会使你的网站加载时间更长,因为浏览器必须下载、解析、编译和评估这些无意义的脚本。它使用了更多的流量数据,减缓了渲染参数。这对网站的性能有影响,并最终降低了用户体验。

因此,通过最小化这些脚本,你可能使你的WordPress网站加载更快,并改善其整体功能。

标签: #js最小化事件