跳到主要内容
阅读时间 6 分钟 (1143 字)

如何在WordPress中分组和缩小资源

文件分组并缩小

拥有更好的性能是在WordPress上管理网站,组织和缩小资源的所有人的梦想,这是我们可以为此做的最好的事情之一,但这确实很难。 如果您不是开发人员,则将所有资源(主要是css和js文件)分组可能会暴露您的网站,因为它可能会产生冲突。

WP Speed of Light是执行 wordpress 网站的最佳解决方案,因为它有很多选项可以通过非常友好的仪表板使您的网站快速加载,是的,这些选项之一是分组和缩小资源。 从组和缩小过程中包含/排除单个文件是无冲突的自定义优化的关键。

我们将在这篇博文中使用一个示例 WordPress 网站,并且我们将学习如何执行此操作,以便配置所有内容的过程将变得更加容易。

 

如何缩小 WordPress JS 和 CSS

让我们学习如何进行 WordPress JS 和 CSS 缩小,但首先,我们需要知道缩小意味着什么“缩小是指在不影响浏览器处理资源的方式的情况下删除不必要或冗余数据的过程 - 例如代码注释和格式化、删除未使用的代码、使用较短的变量和函数名称等等”。

现在我们要做的是对页面进行速度测试,以便查看更改,在本例中,我们使用的是带有 woocommerce 和一些产品的网站,因此第一次加载会有点慢。

 

测试前

 

是的,加载页面需要 2,79 秒,不错,但还可以更好,只需缩小 js 和 CSS 并查看差异,转到WP Speed of light > SpeedUp > Group & Minify ,您将能够查看包含所有要缩小的选项的菜单。 插件免费版本确实包含分组和缩小选项,但视觉文件排除仅在 PRO Addon 版本中可用。

 

分组并缩小仪表板

 

PRO 插件选项包括:排除内联脚本(从缩小中排除内联脚本)、将脚本移动到页脚(它允许您通过将所有缩小的脚本移动到页脚来加快站点速度)、对字体和 Google 字体进行分组(对本地字体和 Google 字体进行分组)在单个文件中以更快地提供服务)和高级文件排除。
 
您可以选择缩小,如您所见,JS、CSS 和 HTML 现在只需激活这些选项,单击“保存”,您的所有资源将立即缩小,它可能会遇到麻烦,因为它是高级配置,但一切可以通过排除某些代码和文件(使用专业插件)来修复。

 

缩小资源

 

 

现在,所有可能需要数小时的开发人员工作只需几秒钟即可完成。

 

下一步,WordPress优化CSS和JS

有了这个插件,我们只需在仪表板上启用分组选项即可让 WordPress 优化 CSS 和 js,转到WP Speed of Light > SpeedUp > Group & Minify ,您将能够看到一个仪表板,其中包含分组选项CSS 和 js。

这些选项允许您:

  • Group JS:将多个 Javascript 文件分组到一个文件中将最大限度地减少 HTTP 请求数量
  • CSS 分组:将多个 CSS 文件分组为一个文件将最大限度地减少 HTTP 请求数量。

HTTP 请求:这些是每次我们选择某些内容或转到同一站点中的另一个页面时向服务器发出的请求,因此如果我们可以减少这些请求,加载时间就会减少。

要检查您可以在网站上分组的文件、脚本数量,只需打开浏览器控制台(右键单击 > 检查或 F12)并打开网络面板

 

列表脚本 chrome

然后,您可以按类型列出加载的所有文件,在此示例中,我仅单击 JS 文件列表。

现在我们已经进行了此设置,只需启用组选项(Group CSS 和 Group JS)并单击“保存”,请记住,必须谨慎使用这些选项,并且您必须测试您的页面,因为它可能会导致冲突。

 

让我们认真起来并优化字体粗细

什么? 其他优化? 是的! 您将能够优化字体粗细,就像启用设置上的选项一样简单,只需转到WP Speed of Light > SpeedUp > Group & Minify > Group fonts 和 Google Fonts选项即可。
组字体和 Google 字体选项将允许您将它们分组到一个文件中以便更快地提供服务,这非常方便,因为大多数 WordPress 主题和布局默认情况下都带有 2 种或 2 种或多种字体,并且具有所有斜体(常规、粗体、斜体) ...)

只需启用该选项,单击“保存”,所有字体就会被分组。

 

组字体

 


现在我们已经激活了所有选项来缩小和分组资源,我们应该看到站点的加载时间有所不同,让我们检查一下速度。

 

测试后

 

从2.8到0.56秒有何不同! 正如我们在本文开头告诉您的那样,我们可以缩短加载时间;)

 

如何使用文件缩小排除

缩小可能会给您的网站带来麻烦,这主要发生在您对包含语法错误或类似变量、类名错误的某些文件进行分组时。 这就是为什么使用“文件缩小排除”选项,您将能够从缩小和分组过程中排除文件,转到WP Speed of Light > SpeedUp > Group & Minify ,您将能够看到高级文件排除选项。

为了使用高级文件排除,您必须首先运行扫描,启用该选项并单击运行扫描。

 

组资源冲突警报


 为了能够列出您网站上加载的脚本, WP Speed of Light需要扫描您的文件夹以列出它们。 它们通常都包含在 /wp-content 文件夹中,该文件夹将所有插件和主题分组。 (至少)选择该文件夹,然后单击“立即扫描”

 

选择要扫描的文件夹

 

它将运行扫描,最后,扫描完成后单击查看结果。

 

扫描的

 

下面应显示按类型(全部、JS、CSS、字体)分类的文件列表。 如果您发现一个导致问题的文件,则在激活文件组和缩小时,您可以使用简单的开/关切换器

 

排除文件

 

这将帮助您排除文件,并以这种方式轻松解决缩小资源时可能存在的任何问题……分组和缩小过程仍然需要一些工作,特别是在测试中,但这绝对值得付出努力,而且您会的。 始终能够通过WP Speed of Light运行速度测试
 
继续尝试WP Speed of Light https://www.joomunited.com/wordpress-products/wp-speed-of-light

5
随时了解情况

当您订阅博客时,当网站上有新的更新时,我们会向您发送一封电子邮件,这样您就不会错过它们。

相关文章

 

评论

尚未发表评论。 成为第一个提交评论的
已经注册? 在此登录
2024 年 12 月 26 日,星期四

验证码图像