Two seconds might not seem like long. When it comes to your website, though, a lot can happen in that short span of time.

According to Google, an increase in page load time from one to three seconds increases bounce rate by 32% — that’s a significant portion of your audience heading elsewhere due to just a bit of lag.

显然，在涉及到的酒吧很高website performance。To stay in the ring with your competitors, you’ll need to prioritize reducing your page load times in order to show visitors, leads, and customers what they want, when they want it (i.e. as quickly as possible).

In this port, we’ll be discussing one cornerstone of web technology that keeps the internet blazing fast: compression — specifically a type of compression calledgzip。

您可能会通过“拉紧”它们来压缩文件。但是，大多数人都不知道像GZIP这样的压缩方法也是每天向用户发送数十亿个网页的关键。

在这篇文章中，我将解释什么是GZIP压缩，它在网络上的工作方式以及如何使用它optimize your website。But first, let’s zoom out to better understand file compression as a concept.

立即下载：HTML＆CSS的免费介绍指南

什么是压缩？

In broad terms, compression is the process of reducing file sizes and is accomplished using a compression algorithm. A compression method can either be lossy, meaning some information is lost in the compression process, or lossless, which means all information from the original file is preserved in the compressed file.

Here’s why this is relevant to your website: At its core, a website is a group of related files stored on a网络服务器。当您在浏览器中输入URL时，您的浏览器会将请求（通常为HTTP GET请求）发送到托管所需内容的Web服务器。服务器处理您的请求，从其数据库中检索正确的文件（包括HTML和任何关联的CSS，JavaScript和媒体文件），然后将文件发送到您的浏览器作为HTTP响应。最后，您的浏览器将文件渲染到您认为的网页中。

a diagram of an http interaction between a browser and a web server

Image Source

This seems like a lot of work to load a cat video, but it’s true — every time you load a page, a web server must transmit all the necessary data to your computer. Each data transfer requires some amount of time, largely depending on the size of the transferred files — the more data there is to send, the longer it takes for a page to load in your browser.

According tohttparchive，这样的数据传输的中位数约为2,000千元，数据相当于大约100页的纯文本。有了媒体繁重的页面，尺寸的大小可能大三到四倍。

那么，我们如何保持互联网快速？您可能会猜到的是该网络服务器压缩文件性能试验ore sending them to browsers — they turn our 100-page text document into more like a 30-page essay. The reasoning is simple: smaller files mean less work that servers and browsers need to do to transfer them. Once the browser receives the compressed response, it quickly decompresses the contents and we’re happy with the faster load time.

压缩与HTML这样的代码很好地效果很好，因为其语法是重复的。压缩算法通常通过在文件中找到重复的信息并以某种方式缩写来起作用。HTML使用标签

and

over and over and compression methods work to temporarily eliminate these repetitions and shorten files — GZIP is one such method.

什么是GZIP压缩？

GZIP是一种经常用于通过Internet快速传输数据的压缩技术。“ GZIP”是指一种压缩方法，用于使用此方法压缩文件的软件以及由GZIP压缩bob电竞官方下载产生的文件格式（通常由文件扩展名.gz表示）。

gzipis the current standard for file compression on the web.Research by W3Techs显示了压缩其内容的网站，超过99％使用GZIP。

gzipwas introduced in 1992 and originally intended for use by GNU (hence the “G” in GZIP) as a free and open-source alternative to proprietary compression methods at the time. This accessibility contributed to GZIP’s ubiquity.

我们不会详细介绍GZIP如何压缩文件 - 本质上，GZIP实现了无损放气算法，它可以在文本文件上找到并删除重复的字符。就目前而言，您只需要知道为什么GZIP通常比类似的压缩方法更喜欢GZIP。

Why Do We Use GZIP Compression?

GZIP是有效的，但这并不是唯一的压缩方法。实际上，就尺寸降低而言，这甚至不是最好的方法。

gzipcan reduce the amount of data by up to 70%. Not bad, except tests comparing compressed file sizes across different compression algorithms have shown that alternativealgorithms like Brotli outperform GZIP用于基于文本的资产。如果这是真的，为什么我们仍然如此依赖GZIP？

The main reason is that GZIP tends to be快点比可比的方法。它在其他方法所花费的时间内压缩文件。这种速度对于通过网络传输至关重要。毕竟，压缩的目的是加快网站的速度 - 如果压缩本身会减慢事物的速度有什么意义？

Also important is the fact that GZIP compression uses资源较少bob体育苹果系统下载安装比可比的方法。它需要相对较少的计算能力和临时记忆空间。在考虑服务器空间以及事实时，这是关键全球网络流量的一半是手机- GZIP对于将网页发送到高功率和低功率设备都有效。

在我们继续之前，请注意，GZIP压缩与ZIP压缩不同。ZIP是另一种无损压缩格式，它通常用于存储文件而不是传输文件。

如何检查GZIP压缩

对于与GZIP一起使用的文件传输，必须发生两件事。首先，Web浏览器告诉Web服务器，它可以接受GZIP压缩文件。这是通过包括接受编码的HTTP标头in the browser’s request:


接受编码：GZIP，放气

Most browsers today include this header in requests by default.

其次，Web服务器处理此标头，并决定压缩请求的文件或将其保留为。如果文件用GZIP压缩，则服务器在其响应中包含以下标题：


Content-Encoding: gzip

。。。which tells the browser that the files must be decompressed with the GZIP method.

如果您希望将网站文件压缩发送，则必须启用服务器来处理GZIP请求。默认情况下，您网站的Web服务器可能会或可能没有启用GZIP压缩，具体取决于您网站的配置。对我们来说幸运的是，不需要打开服务器的内容即可进行检查。这里有几种方法可以找出：

Online GZIP Compression Test

许多免费的网站将确认是否启用了GZIP - 只需粘贴网页的URL并查看您的结果即可。一些网站还将提供一个简短的报告，说明GZIP降低了文件大小的程度：

GZIP压缩检查工具的结果

Image Source

Online Speed Test

Many free speed tests like Google’sPageSpeed Insightsandpingdom如果需要，请包括建议在某些文件上使用GZIP。这是Google PagesPeed Insights工具的警告：

a GZIP compression warning from google site speed checker

Check the HTTP Header in Developer Tools

To check for GZIP compression without an external tool, you can use the developer tools panel in your browser. Most browsers let you检查页面元素并以这种方式查看性能信息。

首先，加载要在浏览器中检查的网页。然后，打开开发人员工具面板，然后选择网络标签。您会看到Web服务器发送的所有资源的列表（如果没有，则可能bob体育苹果系统下载安装需要重新加载页面）。单击一个资源以查看其内容。确保您有Headers选中选项卡，然后向下滚动到内容编码标题以查看使用了哪种方法。

Here’s what a resource compressed with GZIP looks like using Chrome Developer Tools:

在Chrome开发人员工具中查看的资源的内容

How To Enable GZIP Compression

Since GZIP compression happens on the web server, the configuration process will depend on your hosting provider and server architecture.

如果您发现在Web服务器上未实现GZIP压缩，我们建议您在尝试以下方法之前检查托管提供商的文档中有关启用GZIP压缩的说明。您的主机可能不推荐，甚至不允许您修改服务器文件。

If you have this permission, here are some solutions for common web server setups:

How To Enable GZIP Compression on an Apache Web Server

那些网站在Apache服务器可以使GZIP compression via the .htaccess file, which controls various server permissions. Add the following code to your .htaccess file, then save the file:



AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
Addoutputfipfilterbytype deflate应用程序/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
Addoutputfipfilterbytype deflate应用程序/x-javaScript
addoutputfilterbytype deflate应用程序/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
Addoutputfipfilterbytype deflate font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
addoutputfieltybytype deflate text/css
addoutputfieltypype deflate text/html
Addoutputfipfilterbytype deflate text/javaScript
Addoutputfipfilterbytype deflate text/plain
addoutputfieltypype deflate text/xml

This will compress all HTML, CSS, JavaScript,XML和字体文件。保存后，使用上一节中描述的任何方法检查压缩。

如何在NGINX Web服务器上启用GZIP压缩

NGINX服务器软件默认情bob电竞官方下载况下仅压缩HTML文件。如果您的服务器使用NGINX，则可以通过打开nginx.conf文件并查找以下行来启用网站文件上的GZIP压缩：


gzip on;

直接在此行下方，粘贴以下代码：


gzip_vary on;
gzip_types text/plain Text/css text/xml text/javascript应用程序/x-javascript应用程序/xml;
gzip_min_length 1000;
gzip_proxied no-Cache无存储私人过期的auth；

然后，保存文件并在测试压缩之前重新加载NGINX配置。

gzip_types指定被压缩的文件类型。您可以在发现合适的情况下从此行中添加或删除项目。gzip_min_length是必须压缩响应的最小长度。在这里，设置为1000字节（一个KB），但是如果需要，可以更改。

How To Enable GZIP Compression in WordPress

WordPress is CMS software, not a server configuration. However, if you run a WordPress website you can install a performance plugin that modifies server files for you. This is possible with performance optimization suites likeWP超级缓存,WP Rocket, orPagespeed忍者。还有Enable Gzip Compression，它完全按照Apache服务器上的名称所暗示的操作。

同样，仅仅因为您可以安装和使用插件并不意味着您有权更改服务器的配置。如果您遇到以这种方式实现GZIP压缩的问题，请咨询适当的文档或与主机联系。

压缩以打动

请记住，所有这些技术演讲的目标是通过提供最快的页面来为您的访问者提供最佳的用户体验。如果您不熟悉真正决定页面速度的问题，那么“加速站点”似乎是一个黑匣子。

通过在Web服务器上实现压缩，您将为访问者提供所需的内容，而无需额外费用。您将捕捉更多的印象，推动更高的参与度，并将更多的访问者转化为客户。网站速度极大地影响您的在线成功，因此没有时间浪费！

New Call-to-action

CSS简介

最初发布于12月16日，2020年12月7:00 am，更新于2021年1月12日

Topics:

网站性能

相关文章