How to implement gzip compression in nginx to improve website speed

How to implement gzip compression in nginx to improve website speed

Why use gzip compression?

By turning on gzip compression in nginx, the size of static resources such as js and css in the web page will be greatly reduced, thus saving a lot of bandwidth, improving transmission efficiency, and giving users a fast experience.

nginx implements gzip

The principle of resource compression in nginx is to intercept requests through the default integrated ngx_http_gzip_module module, and perform gzip on the types that need to be gzipped. It is very simple to use and can be turned on directly by setting options. .

Request header and response header after gzip takes effect

Request Headers:
Accept-Encoding:gzip,deflate,sdch

Response Headers:
Content-Encoding:gzip
Cache-Control:max-age240

gzip processing

From the perspective of the HTTP protocol, the request header declares acceopt-encoding:gzip deflate sdch (refers to the compression algorithm, where sdch is a compression method promoted by Google itself)
Server->Response->Compress the content with gzip->Send to browser->Browser decodes gzip->Receive gzip compressed content

Common configuration parameters of gzip

  • gzip on|off Whether to enable gzip
  • gzip_buffers 4k buffer (how many blocks are buffered in memory for compression? How big is each block?)
  • gzip_comp_level [1-9] Recommended compression level 6, the higher the level, the less compression, but also the more CPU resources are wasted
  • gzip_disable Regular expression matching UA is what kind of URI is not gzipped
  • gzip_min_length 200 The minimum length to start compression. If the length is less than this, nginx will not compress it.
  • gzip_http_version 1.0|1.1 Start compression of http protocol version (default 1.1)
  • gzip_proxied sets the requester proxy server and how to cache content
  • gzip_types text/plain application/xml For which types of files to use compression such as txt, xml, html, css
  • gzip_vary off Whether to transmit gzip compression flag

nginx configuration gzip

Static page index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demonstrating nginx gzip compression</title>
  <script src="./jquery.js" ></script>
</head>
<body>
<img src="./nginx_img.jpeg" style="width: 100px;height: 100px;" />
<h1>nginx implements gzip compression to reduce bandwidth usage and improve website speed</h1>
<h1>nginx implements gzip compression to reduce bandwidth usage and improve website speed</h1>
<h1>nginx implements gzip compression to reduce bandwidth usage and improve website speed</h1>
<h1>nginx implements gzip compression to reduce bandwidth usage and improve website speed</h1>
<h1>nginx implements gzip compression to reduce bandwidth usage and improve website speed</h1>
<h1>nginx implements gzip compression to reduce bandwidth usage and improve website speed</h1>
</body>
</html>

nginx configuration

server{
    listen 80;
    server_name localhost 192.168.0.96;
    gzip on;
    gzip_buffers 32 4k;
    gzip_comp_level 6;
    gzip_min_length 200;
    gzip_types application/javascript application/x-javascript text/javascript text/xml text/css;
    gzip_vary off;
    root /Users/lidong/Desktop/wwwroot/test;
    index index.php index.html index.htm;
    access_log /Users/lidong/wwwlogs/access.log;
    error_log /Users/lidong/wwwlogs/error.log;
    location ~ [^/]\.php(/|$) {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

To use the page request before gzip:

Requests with gzip enabled:

Notice

  • Pictures and mp3 generally do not need to be compressed because the compression rate is relatively small
  • Generally compress text, css, js, xml format files
  • Smaller files do not need to be compressed and may be larger than the original file.
  • Binary files do not need to be compressed

Summarize

The above is the implementation method of gzip compression in nginx to improve website speed introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time!

You may also be interested in:
  • Detailed explanation of how to enable Gzip compression in Nginx server configuration
  • Nginx enables GZIP compression web page transmission method (recommended)
  • How to enable Gzip compression in Nginx to significantly increase page loading speed
  • nginx configure gzip compressed page
  • Nginx server configuration analysis using gzip compression
  • Tutorial on configuring GZip compression when using Nginx as a reverse proxy for Node.js sites
  • How to enable compression and gzip compression in Nginx
  • Example of how to enable gzip compression in Nginx
  • Introduction to Gzip Compression Configuration in Nginx
  • Nginx uses the Gzip algorithm to compress messages

<<:  Detailed installation steps for MySQL 8.0.11

>>:  MySQL 8.0.12 installation and configuration method graphic tutorial (windows10)

Recommend

VMware12.0 installation Ubuntu14.04 LTS tutorial

I have installed various images under virtual mac...

A brief analysis of MySQL parallel replication

01 The concept of parallel replication In the mas...

Implementation of adding a mask layer effect when the CSS mouse hovers over the image

First look at the effect: When the mouse moves ov...

Detailed process of modifying hostname after Docker creates a container

There is a medicine for regret in the world, as l...

Summary of tips for setting the maximum number of connections in MySQL

Method 1: Command line modification We only need ...

How to prevent hyperlinks from jumping when using a link

When using <a href="" onclick="&...

WeChat Mini Programs are shared globally via uni-app

In actual use, it is often necessary to share the...

NestJs uses Mongoose to operate MongoDB

I recently started learning the NestJs framework....

MySQL table name case selection

Table of contents 1. Parameters that determine ca...

vue-admin-template dynamic routing implementation example

Provide login and obtain user information data in...

MySQL configuration master-slave server (one master and multiple slaves)

Table of contents Ideas Host Configuration Modify...

Detailed explanation of TypeScript 2.0 marked union types

Table of contents Constructing payment methods us...

Answers to several high-frequency MySQL interview questions

Preface: In interviews for various technical posi...

Complete steps for deploying jar package projects using Shell scripts in Linux

1. Install JDK Check the computer's operating...

How to view available network interfaces in Linux

Preface The most common task after we install a L...