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

Do you want to minify files on your WordPress site? Minifying your WordPress CSS and Javascript files can make them load faster and speed up your WordPress site. In this guide, we will show you how to minify CSS/Javascript files in WordPress to improve performance and speed.

您要缩小WordPress网站上的文件吗？ 缩小WordPress CSS和Javascript文件可以使其加载速度更快，并加快WordPress网站的速度。 在本指南中，我们将向您展示如何在WordPress中缩小CSS / Javascript文件以提高性能和速度。

什么是缩小，何时需要？ (What is Minify and When Do You Need it?)

The term ‘Minify’ is used to describe a method which makes your website file size smaller. It achieves this goal by removing white spaces, lines, and unnecessary characters from the source code.

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

Usually it is recommended to be used only for files that are sent to user’s browsers. This includes HTML, CSS, and JavaScript files. You can minify PHP files too, but PHP is a server-side programming language and minifying it will not improve page load speed for your users.

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

The obvious advantage of minifying files is improved WordPress speed and performance. Compact files are faster to load and improve your site’s speed.

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

However, some experts believe that the performance improvement is very small for most websites and not worth the trouble. The minification only decreases few kilobytes of data on most WordPress sites. You can reduce more pageload time by simply optimizing images for web.

但是，一些专家认为，对于大多数网站而言，性能提升很小，不值得为此烦恼。 在大多数WordPress网站上，这种压缩仅减少了几千字节的数据。 您可以通过简单地优化Web图片来减少更多的页面加载时间。

Here is an example of normal CSS code:

这是普通CSS代码的示例：

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

身体 {
边距：20px;
内边距：20px;
颜色：＃333333;
背景：＃f7f7f7;
}
h1 {
font-size：32px;
color＃222222;
底边距：10px;
}

After minifying the code it will look like this:

缩小代码后，它将如下所示：

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}

正文{margin：20px; padding：20px; color：＃333; background：＃f7f7f7} h1 {font-size：32px; margin-bottom：10px}

If you are trying to achieve 100/100 score on Google Pagespeed or GTMetrix tool, then minifying CSS and JavaScript will significantly improve your score.

如果您尝试在Google Pagespeed或GTMetrix工具上获得100/100的得分，那么最小化CSS和JavaScript将会大大提高您的得分。

Having said that let’s take a look at how to easily minify CSS/JavaScript on your WordPress site.

话虽如此，让我们看一下如何轻松地最小化WordPress网站上CSS / JavaScript。

缩小WordPress中CSS / Javascript (Minify CSS/Javascript in WordPress)

First thing you need to do is install and activate the Better WordPress Minify plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活Better WordPress Minify插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, the plugin will add a new menu item labeled ‘BWP Minify’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

激活后，插件将在您的WordPress管理栏中添加一个名为“ BWP Minify”的新菜单项。 单击它会将您带到插件的设置页面。

On the settings page, you need to check the first two options to automatically minify JavaScript and CSS files on your WordPress site.

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

You can now click on the Save Changes button to store your settings.

现在，您可以单击“保存更改”按钮来存储您的设置。

There are many other advanced options on this page. The default settings will work for most websites, but you can review and change these options on a case by case basis.

此页面上还有许多其他高级选项。 默认设置适用于大多数网站，但是您可以视情况查看和更改这些选项。

Next, you need to head over to your website. Right click anywhere and then select ‘View Page Source’ from browser menu.

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

You will now see the HTML source code generated by your WordPress site. If you look closely, you will notice that this plugin will load CSS/JavaScript files from plugin’s own folder instead of your WordPress themes and plugins.

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

These are the minified versions of your original CSS and JavaScript files. Better WordPress Minify plugin will keep them cached and serve the minified versions to browsers.

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

That’s all, we hope this article helped you learn how to minify your WordPress site. You may also want to see our ultimate guide on how to speed up WordPress for beginners.

就这样，我们希望本文能帮助您学习如何缩小WordPress网站。 您可能还想查看有关如何为初学者加快WordPress速度的最终指南。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-minify-css-javascript-files-in-wordpress/