如何缩小CSS并加快您的网站

作为网站所有者，CSSis one of your handiest tools. With it, you can style your pages and content to appear exactly as you want. Plus, CSS is relatively easy to get the hang of once you’re well-versed in HTML.

Unfortunately, too much CSS can sometimes be a bad thing when it comes to page load times. If used excessively, large CSS files can weigh down your site, slowing performance and sending visitors elsewhere.

Still, to compete with the growing number of impressive technical websites, you might think you need to choose between an engaging website and a fast website.

But, worry not: There are many quick wins and best practices to增加负载时间在保持设计视野完整的同时，包括缩小CSS。在这篇文章中，您将了解缩小CSS，为什么重要以及如何有效地做到的含义。

What exactly do we mean by “unneeded code”? With CSS (and most other coding languages), developers have introduced formatting and syntactic best practices in order to make the code more readable by humans. These practices help programmers write, maintain, and debug their programs.

考虑以下示例中的CSS：

/ *标题元素 */

身体 {
颜色：＃33475b
}

H1 {
字体大小：2REM;
字体重量：700;
线高：2.75REM
}

h2 {
font-size: 1.625rem;
字体重量：700;
line-height: 2.25rem
}

h3 {
字体大小：1.5REM;
font-weight: 500;
线高：2.125REM
}

/ *其他元素 */

p,跨度{
字体大小：1REM;
字体重量：400;
线高：1.75REM
}

blockquote {
字体大小：1.5REM;
字体重量：400;
line-height: 2.375rem
}

ol, ul {
list-style: none
}

桌子 {
边界爆发：崩溃；
border-spacing: 0
}

按钮 {
外观：无；
font: inherit;
保证金：0
}

As you can see, this code contains line breaks, spaces, indents, and注释使事情变得更加可读性，对我们来说是可以理解的。但是，浏览器不需要任何此信息来运行CSS代码 - 在解析文件时，它会忽略这些额外的空格和评论。

这里的问题是，这种额外的格式数据使CSS文件比按预期工作要大。而且，较大的文件通常意味着处理文件所需的更多时间和资源，从而给人以较慢的网站或Web应用程序的bob体育苹果系统下载安装印象。

Here’s where CSS minification comes in — it strips out this extra code, resulting in a smaller CSS file that works exactly the same as the original. In addition, minification may also alter the code in various ways — ;like shortening variable names and deleting redundant or unused code — to shrink the file size even more.

Here’s what the CSS example above looks like after minification:

body{color:#33475b}h1{font-size:2rem;font-weight:700;line-height:2.75rem}h2{font-size:1.625rem;font-weight:700;line-height:2.25rem}h3{font-size:1.5rem;font-weight:500;line-height:2.125rem}p,span{font-size:1rem;font-weight:400;line-height:1.75rem}blockquote{font-size:1.5rem;font-weight:400;line-height:2.375rem}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}button{appearance:none;font:inherit;margin:0}

它对我们来说可能不那么阅读，但是对于计算机来说，它看起来（和工作）相同。

We can apply minification to other languages too, not just CSS. For example, HTML and JavaScript, the other two foundational languages of the web, also follow visual formatting conventions and can be minified.

Why You Should Minify CSS

如今，出于一个主要原因，降低是网站和Web应用程序的常见实践 - 它使它们更快。基本原理很简单：处理的代码越少，加载网页所需的时间就越少。

更具体地说，有两种主要方法可以减少加载时间。首先，较小的文件花费更少的时间和资源来获取和压缩原始服务器，发送给客户端，最后由bob体育苹果系统下载安装浏览器下载，仅仅是因为要处理的信息较少。

第二个原因与浏览器渲染网页的方式有关。在浏览器下载网页之后，它在显示该页面之前先解析该页面的HTML文件。当浏览器插入指向外部CSS文件的链接时，它将HTML解析搁置以处理此外部CSS代码。在浏览器处理所有链接的CSS之前，用户将不会看到任何页面内容。因此，CSS称为“渲染阻止”资源。

If the web page is simple and there’s only a small amount of CSS, this isn’t a big deal. If the CSS files are large, however, visitors may notice a rise in load time. That’s why it’s best to reduce CSS file sizes with minification, especially if your site is visually complex and requires a lot of CSS. With fewer render-blocking resources to parse, visitors will experience less time to第一个意旨油漆。

CSSminification probably won’t instantly make your website blazing fast. Still,从1秒到3秒的加载时间，反弹的机会增加了32％，因此任何较小的性能改进都会有所作为。另外，更快的页面还提高了移动访问者的可用性，并大大将搜索引擎排名的因素提高了，而无需更改页面内容。因此，如果您还没有以降级出售，我希望您现在是。

如何缩小CSS

有几种方法可以缩小技术性各不相同的CSS。在本节中，我们将以最简单的方式介绍一些不同的方法：

在线缩小工具

有几个网站可以免费缩小您的CSS（以及HTML和JavaScript）文件。流行选项包括CSS minifierand theDan’s Tools minifier。

These websites all work similarly: Paste in your formatted CSS, toggle any available options, and the website will output a minified version which you can copy and paste into your own file.

Image Source

在线minifiers非常适合展示缩小的工作方式和非常小的项目，但它们并没有扩展到具有许多文件的大型项目。您必须手动复制代码并将其粘贴到您的code editor对于要缩小的每个文件。另外，这些工具需要互联网访问，您可能并不总是能访问。

因此，我们不建议您将其作为您的最新方法。如果您打算在较大的项目中实施缩小，我们将在下面找到更高级的选项。

命令行工具

那些符合命令行接口的人也可以使用命令行缩影。这些与在线工具相似，具有本地运行的优势，因此您不需要互联网连接。

One option is to use anNPM用于缩小CSS的包装。如果您的计算机上已经安装了NPM，则可以下载CSS微尼带有命令的包装：

NPM安装CSS -Minify -G

然后，您可以使用命令缩小单个文件：

CSS微尼--file filename

… wherefilenameis your file, ending with the extension.css。或者，用命令将目录中的所有CSS文件缩小：

CSS微尼-d sourcedir

… wheresourcediris the directory name. All minified CSS files are stored in a directory calledCSS-DIST默认。您可以使用命令指定其他目标目录：

CSS -MINIFY -D SUCCEDIR -O DISTDIR

或者，您可以尝试minifypackage, which works on HTML, CSS, and JavaScript.

CDN

如果您使用或正在考虑使用内容交付网络（CDN），请知道这些服务可以在将其运送到浏览器之前为您缩小网站文件。这是处理Minification的最动手方法，因为该作业已放置在CDN上，不会影响存储在原始服务器上的源文件。

WordPress插件

运行WordPress网站？优化插件可以缩小您的代码，包括W3 Total Cache,Hummingbird， 和Autoptimize。这些插件都变得无编码和简单，可以通过单击几个按钮来优化网站的文件，图像等。

Software Build Tools

如果您正在为项目使用构建工具，则可能具有本机缩小功能或可以利用的集成功能，以定期缩小项目文件。查看工具的文档或集成库，以将其缩小到您的流程中。

Minify your CSS for a better user experience.

I like the word “minification” — it makes you sound like a mad scientist taking a shrink ray to your bulky code. And your visitors will like it too, since it gives them a better experience and a smoother time navigating your website.

不要误会我的意思，CSS很棒。没有它，网络将是一个很无聊的地方。但是，有可能拥有太多的好事，而过多的CSS最终会减慢您的页面并损害用户体验。CSS Minification是一种有价值的解决方法，可以节省每个人的时间而不会影响您的工作流程或页面内容。