如何在WordPress中缩小CSS / JavaScript文件

你想缩小你的WordPress网站上的文件吗? 最小化您的WordPress CSS和Javascript文件可以使它们加载速度更快,并加速您的WordPress网站。 在本指南中,我们将向您展示如何在WordPress中缩小CSS / Javascript文件以提高性能和速度。

如何在WordPress中缩小CSS / JavaScript文件

什么是Minify,什么时候需要它?

术语“Minify”用于描述一种使您的网站文件体积更小的方法。 它通过从源代码中删除空格,行和不必要的字符来实现此目标。

通常建议仅用于发送到用户浏览器的文件。 这包括HTML,CSS和JavaScript文件。 您也可以缩小PHP文件,但是PHP是一种服务器端编程语言,缩小它并不会提高用户的页面加载速度。

缩小文件的明显优势是提高了WordPress的速度和性能。 压缩文件加载速度更快,并提高网站的速度。

但是,有专家认为,对于大多数网站来说,性能的提升是非常小的,不值得麻烦。 缩小只会减少大多数WordPress网站上的数据。 您可以通过简单地优化网络图像来减少更多的页面加载时间。

这是一个正常的CSS代码的例子:

身体 {
保证金:20像素;
填充:20像素;
颜色:#333333;
背景:#f7f7f7;
}
h1 {
字体大小:32PX;
颜色#222222;
边距:10px的;
}

缩小代码后,它将如下所示:

体{余量:20像素;填充:20像素;颜色:#333;背景:#f7f7f7} {H1字体大小:32PX;边距:10px的}

如果您试图在Google Pagespeed或GTMetrix工具上获得100/100的分数,那么缩小CSS和JavaScript将显着提高您的分数。

话虽如此,让我们来看看如何轻松缩小您的WordPress网站上的CSS / JavaScript。

在WordPress中缩小CSS / Javascript

首先你需要安装并激活Better WordPress Minify插件。 更多细节

一旦激活,插件将添加一个标签为“BWP Minify”的新菜单项到您的WordPress管理栏。 点击它会把你带到插件的设置页面。

BWP Minify设置

在设置页面上,您需要检查前两个选项,以自动缩小WordPress网站上的JavaScript和CSS文件。

您现在可以点击保存更改按钮来存储您的设置。

此页面上还有许多其他高级选项。 默认设置将适用于大多数网站,但您可以根据具体情况审核和更改这些选项。

接下来,您需要前往您的网站。 右键单击任意位置,然后从浏览器菜单中选择“查看页面源”。

查看WordPress网站的页面源代码

您现在将看到您的WordPress网站生成的HTML源代码。 如果你仔细观察,你会发现这个插件会从插件自己的文件夹中加载CSS / JavaScript文件,而不是你的WordPress主题和插件。

这些是原始CSS和JavaScript文件的缩小版本。 更好的WordPress Minify插件将保持他们缓存,并提供缩小版本的浏览器。

就这样