跳到主要内容
阅读时间 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 插件版本中可用。

 

分组并缩小仪表盘

 

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

 

缩小资源

 

 

现在,所有可能花费数小时的开发人员工作都在几秒钟内完成。

 

下一步,WordPress优化CSS和JS

使用这个插件,我们将让 wordpress 优化 CSS 和 js,只需启用仪表板上的组选项,转到WP Speed of Light > SpeedUp > Group & Minify ,您将能够看到一个带有选项的仪表板分组CSS和js。

这些选项使您可以:

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

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

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

 

列表脚本铬

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

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

 

认真对待并优化字体粗细

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

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

 

组字体

 


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

 

事后测试

 

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

 

如何使用文件缩小排除

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

为了使用高级文件排除功能,您将必须先运行扫描以启用该选项,然后单击“运行扫描”。

 

团体资源冲突警报


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

 

选择要扫描的文件夹

 

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

 

已扫描

 

按类型(All、JS、CSS、Font)分类的文件列表应显示在下方。 如果您确定了一个导致问题的文件,则在激活文件组和缩小时,您可以使用简单的ON/OFF 切换器

 

排除文件

 

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

5
随时了解情况

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

相关文章

 

注释

暂无评论。 成为第一个提交评论的
已经登记了? 在此登录
2024 年 5 月 1 日星期三

验证码图片