spot_img
HomeDTC品牌出海独立站教程如何在 WordPress 中结合 Javascript 以获得更好的性能

如何在 WordPress 中结合 Javascript 以获得更好的性能

JasperAI 10000字免费额度试用

您可以通过多种方式优化 WordPress 网站。 所有这些选项都应该被探索并付诸行动,以帮助您避免网站加载缓慢。 在 WordPress 中结合 JavaScript 是您可以立即做的最重要的事情之一。

WordPress 在各个方面都为用户提供了很多选择。 这就是该平台如此受欢迎且非常用户友好的原因。 几乎每项任务都可以通过使用正确的插件来完成。

让我们来看看为什么您应该结合使用 WordPress JavaScript 和插件,这样您就可以轻松地执行所需的功能。

为什么在 WordPress 中结合 JavaScript?

要了解为什么要在 WordPress 中结合外部 JavaScript,您需要了解请求 HTML 页面时实际发生的情况。 让我们看看这个过程,因为它恰好可以让你更好地理解。

当一个页面被请求时,您正在使用的浏览器会发送一条消息或查询,以获取其所有资源。 每个文件,包括所有 HTML 和外部 JavaScript 文件,都从网站服务器获取并加载到浏览器中。

WordPress divi主题

尽管 JavaScript 文件都是一起下载的,但它们实际上是按照它们在 HTML 中出现的顺序执行的。 单独下载可能会降低网站速度。 但是您确实会遇到较慢的页面加载速度,因为执行序列的整个过程可能需要更长的时间。

这些 WordPress JavaScript 文件以及 CSS 文件被称为渲染阻塞资源。 这一切的真正含义是,在这些 JavaScript 和 CSS 文件完全完成之前,您网站的其他组件将不会加载。 由于所有这些文件最常位于网站头部,因此可能会出现某些问题。

可以执行简单的网站速度测试来查看您是否遇到这些问题。 然而,一种可靠的方法是结合外部 CSS 和 HTML 外部 JavaScript。

让我们来看看一个可以帮助您在 WordPress 中轻松组合外部 JavaScript 的插件。

自动优化

自动优化插件

Autoptimize 是一个很棒的 WordPress 网站优化插件,提供了许多功能和设置。 所有这些都允许您以不同的方式优化您的网站。

这个插件完成的主要事情之一是它允许您在 WordPress 中组合外部 JavaScript。 它还聚合、组合和缓存脚本和样式。 这正是我们今天想要使用的选项。

下面,我将向您展示如何安装、激活和使用该插件。 也就是说,除了能够在 WordPress 中组合 JavaScript 和组合外部 CSS 之外,Autoptimize 还使您能够:

  • 内联关键 CSS
  • 延迟聚合的完整 CSS
  • 缩小 HTML
  • 将脚本延迟到网站页脚
  • 优化图像
  • 延迟加载图像
  • 优化谷歌字体
  • 异步非聚合 JavaScript
  • 删除 WordPress 核心表情符号

所有这些都协同工作以提高网站性能。 基本上,Autoptimize 将通过获取所有脚本和样式并最小化和压缩它们来加速您的 WordPress 网站。 它还缩小了 HTML,所以所有这些一起工作,使您的网站更轻量级并增加更快的页面加载时间。

安装并激活自动优化

为了在 WordPress 中正确地结合外部 JavaScript,您首先需要安装并激活 Autoptimize 插件。 您可以从网站后端的 WordPress 管理仪表板的插件页面执行此操作。 只需搜索“自动优化”。

谷歌SEO优化服务

安装并激活插件以在 wordpress 中结合 javascript

安装并激活插件后,您需要访问主设置页面以根据需要进行配置。 为此,请单击仪表板左侧菜单区域中的设置 > 自动优化。

点击设置然后自动优化

这将带您进入 Autoptimize 的主设置页面,您可以在其中配置设置以正确组合 WordPress JavaScript。

在 WordPress 中结合 JavaScript

虽然该插件提供了许多不同的优化设置,但我们在本教程中特别关注其中一个。

H10的年终大促

当您到达设置页面时,您将看到五个不同的选项卡。 这些包括:

  • JS、CSS 和 HTML
  • 图片
  • 额外的
  • 优化更多
  • 关键 CSS

在 JS、CSS 和 HTML 菜单下,您要选中最顶部的选项框,上面写着“优化 JavaScript 代码”。

点击优化javascript代码

执行此操作时单击“保存更改”按钮即可! 您现在已经在 WordPress 中正确组合了外部 JavaScript,您应该会很快看到结果。

其他可用的优化选项

现在您已经单击并运行了主要功能,让我们看一下 Autoptimize 提供的其他优化设置。 由于插件已经安装,您不想浪费任何东西。 以下是不同选项卡下的其他可用内容。

JS、CSS 和 HTML

除了主要的“优化 JavaScript 代码”设置外,您还可以从许多其他设置中进行选择,以使用您的 JavaScript 代码。 浏览这些并按照您的意愿进行设置。

JSS、CSS、HTML 选项卡

现在向下滚动一些,你会发现一些选项来组合外部 CSS 代码。 再次,在您认为合适的情况下勾选这些框。 您的设置将基于您的偏好。

在 wordpress 中组合 javascript 的 Css 选项

再向下滚动一点,您会发现 HTML 和 CDN 选项,以及随时可用的缓存信息。

高质量外链购买

html、cdn、缓存选项

最后,在页面底部,您会看到更多可用的杂项选项。 继续并完成此操作,然后单击“保存更改”按钮以使新设置生效。

杂项选项

图片

如果您单击图像选项卡,您将获得一些有助于优化 WordPress 网站上的图像的信息和选项。 您还可以从这里延迟加载图像。

图像选项卡

writesonic

额外的

此选项卡将为您提供一些“额外的”自动优化设置,您可以通过这些设置来设置您想要的方式。

在 wordpress 中组合 javascript 的额外选项

优化更多

此选项卡是 Autoptimize 插件将为您提供一些建议和其他插件的建议,以帮助优化您的网站。

优化更多选项卡

关键 CSS

最后,Critical CSS 选项卡将为您提供有关您可以安装的 Critical CSS 附加插件的信息。 我建议添加此插件以获得最佳性能。 如果你想安装它,只需使用内置链接获取它,该工具将帮助你组合外部 CSS。

关键 css 选项卡

而已! 您现在已经完成了插件的整个配置过程。 此时,插件应该完全按照您的规格运行。 现在您已经在 WordPress 中正确组合了外部 JavaScript,您应该会很快看到网站速度的变化。

最后的想法

如果您不确定要做什么,WordPress JavaScript 和外部 CSS 可能会很棘手。 幸运的是,Autoptimize 插件允许您轻松地将外部 JavaScript 结合到 WordPress 中,只需安装并在正确的框中单击几下。

我希望本指南能让您更好地了解 JavaScript 和 CSS 文件的处理方式,以及为什么最小化和组合它们对于提高站点性能很重要。

您是否已经在使用 Autoptimize 插件在 WordPress 中组合 JavaScript? 您发现还有哪些其他插件可以很好地为您完成同样的过程?

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline
5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES