返回》

使用JavaScript延迟来优化WordPress网站的性能

你是否正在寻找进一步优化您的WordPress网站性能的方法?其实很简单……一般只要开启JS脚本延迟即可。比如以Hummingbird插件为例,开启Hummingbird的新的延迟JavaScript执行功能吧。现在大多数网站都有大量的JavaScript文件和内联脚本,这些文件可能是资源密集型的,会影响网站性能和PageSpeed分数,如网站渲染和加载时间。正如你将在本文中了解到的那样,延迟JavaScript文件的执行,以优先加载更关键的元素,可以保持你的网站的整体加载时间,并改善你的PageSpeed得分。接下来搬主题将介绍使用WordPress优化插件Hummingbird插件,只需一次点击就能自动完成整个过程。启用Hummingbird的延迟JavaScript执行后的结果在搬主题解释为什么延迟JavaScript的执行有助于优化网站性能以及如何做到这一点之前,让我们向您展示一下使用Hummingbird Pro的新功能获得的一些结果。搬主题提供汉化中文版下载【Hummingbird Pro汉化中文版下载|WordPress网站速度优化缓存提升PageSpeed Insights排名插件介绍】搬主题发现,仅仅通过启用该功能,他们的网站在大多数PageSpeed基准测试中的性能分数就得到了提高。启用延迟网站上的JavaScript执行,可以改善桌面电脑的PageSpeed性能得分。…和移动端结果。现在你知道你可以期待什么,为什么以及如何使用这一功能。为什么延迟JavaScript的执行有助于优化网站性能如前所述,现在的网站都加载了第三方脚本,用于提供广告、跟踪参与、安全验证等,这些脚本会阻止页面在用户浏览器上快速呈现,并影响你网站的用户体验和搜索引擎排名。阻止这些脚本在你的网站上加载,直到有实际的用户与页面互动,可以大大改善你网站的性能,如:改进渲染性能浏览器渲染引擎需要在发现JavaScript的地方下载并执行它,然后才能继续解析页面的其他内容。将JavaScript的执行推迟到用户与页面互动之后,有助于浏览器更快速有效地渲染页面。这意味着用户可以更快地看到网页并与之互动。增加转换率通过推迟JavaScript文件的执行,直到用户与页面互动,网页加载速度更快,使用户能够更快地访问网站并与之互动。这可以帮助改善用户体验,提高用户参与度和转化率。更高的谷歌PageSpeed Insights分数谷歌认为页面速度是搜索结果的一个排名因素,延迟JavaScript的执行可以改善你的网站的PageSpeed Insights得分,可能会导致更好的搜索引擎排名。改善PageSpeed Score建议推迟你网站上的JavaScript执行,可以通过解决以下建议来提高你的Google PageSpeed得分:删除未使用的JavaScript建议从你的网页中消除未使用或不必要的JavaScript代码。未使用的JavaScript会增加你的网页的加载时间,因为即使没有使用,浏览器也必须下载、解析和执行这些代码。通过删除任何未使用的JavaScript代码,你可以减少文件大小,提高网站的整体性能。总阻塞时间总阻塞时间是一个度量指标,它衡量的是在第一次内容绘制(FCP)和互动时间(TTI)之间,主线程被阻塞了足够长的时间以阻止输入响应性的时间。简单来说,它量化了页面因处理繁重的JavaScript任务而变得无响应的时间。降低总阻塞时间可以使你的网站反应更灵敏,并改善用户体验。尽量减少主线程的工作主线程负责执行JavaScript、样式计算、布局以及显示网页所需的其他任务。尽量减少主线程的工作是指优化代码的过程,减少主线程花在繁重任务上的时间。这可以通过删除不必要的JavaScript,将长任务分割成小块,以及优化代码的执行来实现。主线程上更轻的工作负荷会导致更快的页面加载,改善渲染,并增强用户体验。互动时间(TTI)这个性能指标衡量的是一个网页变得完全互动并对用户输入作出反应所需的时间。当主线程从繁重的任务中解脱出来,并且用户可以与屏幕上的元素进行交互,例如点击按钮或滚动时,页面就被认为是互动的。通过优化JavaScript、拆分大型任务和减少阻断渲染的资源来改善TTI,使用户能够更快地与页面互动,从而确保更好的用户体验。减少JS的执行时间减少JavaScript的执行时间包括优化代码,使其执行速度更快,使用更少的资源。这可以通过一些技术来实现,如代码最小化,删除未使用的JavaScript,以及优化算法。减少执行时间会导致更快的渲染,减少总阻塞时间,以及更好的响应性,提供更好的用户体验。第一个内容丰富的渲染(FCP)这是一个性能指标,衡量浏览器渲染网页的第一个可见元素(文本、图像或其他内容)的时间。更快的FCP相当于更快的初始页面加载,为用户提供页面正在加载的视觉反馈。改善FCP需要优化关键的渲染路径,延迟非关键的JavaScript执行,并优先加载可见内容。更快的FCP大大有助于改善用户体验和提高网页性能。推迟JavaScript执行的方法虽然更快的页面加载时间、减少渲染阻塞和优先加载内容为用户提供了许多好处,并可以提供更高的PageSpeed分数,但对于没有技术知识或网络优化技能的用户来说,在WordPress网站上延迟JavaScript执行的实际方法可能具有挑战性。例如,这些方法可以包括:实现async或defer属性: 这需要你在HTML头中为你的JavaScript文件手动添加async或defer属性,这告诉浏览器在处理JavaScript文件时不要阻止页面的渲染。合并JavaScript文件: 使用在线工具或WordPress插件,将多个JavaScript文件合并为一个文件,有助于减少HTTP请求的数量,加快页面加载时间。缩小JavaScript文件: 使用在线工具或WordPress插件来减少JavaScript文件的大小,这有助于提高页面加载时间。对关键的JavaScript进行优先排序: 识别需要立即加载的关键JavaScript,以确保功能正常,然后在页面内容呈现后加载其余的JavaScript文件。虽然有一些WordPress插件可以为你处理其中的一些任务,并帮助你延迟或推迟JavaScript的执行,但使用Hummingbird插件只需点击一个按钮就能完成上述所有的工作,甚至更多。如何使用Hummingbird的延迟JavaScript执行功能Hummingbird的新优化功能会延迟所有JavaScript文件和内联脚本的加载,直到页面上有用户互动(如鼠标移动、键盘操作或屏幕点击),并改善前面描述的所有PageSpeed建议。要启用这项功能,请确保在您的网站上安装并激活Hummingbird,然后在您的WordPress管理中导航到Hummingbird>资产优化>额外优化,并在工具>延迟JavaScript部分打开启用延迟JavaScript的切换按钮,然后点击保存更改。另外,你也可以从插件的主仪表板上启用该功能。一旦延迟JavaScript执行功能被启用,它就会自动开始工作,延迟加载你的页面上任何非关键的JavaScript文件,这些文件不需要在页面上方。该功能的设置可以让你访问一些选项,比如在没有检测到用户互动的情况下,能够指定一个脚本加载的超时时间,以及通过指定URL或关键词来排除关键的JavaScript文件,使其在加载时不被延迟。如果启用这个功能会破坏你网站上的某些东西,而且你发现额外的关键Javascript资源对渲染页面至关重要,只需将它们添加到排除的JavaScript文件区域,以排除它们被延迟。如果页面上没有用户互动,超过设定的阈值,JavaScript资产将被强制加载。默认超时被设置为20秒,但你可以从超时下拉菜单中选择一个不同的值(目前范围在5-30秒之间)。注意事项启用JavaScript执行将自动禁用合并压缩选项,以确保你的网站的脚本以正确的顺序加载。该功能只有在你连接到The Hub时才会起作用,因为它从API中提取持续更新的预定义排除项列表。你可以通过简单地禁用切换键并点击保存,轻松逆转该功能所做的任何改变。如何确保关键文件不被延误Hummingbird会自动排除预定义的关键JS文件列表,该列表通过API持续更新。有一个选项可以手动排除其他可能对您的特定网站至关重要的文件。此外,通过CDN提供的文件可以使用其脚本ID进行排除(见下面的截图)。延缓JavaScript和加速WordPressHummingbird的延迟JavaScript功能仅作为一项专业功能提供。搬主题建议启用该功能,并使用PageSpeed Insights工具测试您的网站。使用后,你会发现WordPress站点加载更快了,同时各种网站评分也高了起来。搬主题提供汉化中文版下载【Hummingbird Pro汉化中文版下载|WordPress网站速度优化缓存提升PageSpeed Insights排名插件介绍】
THE END