SoFunction
Updated on 2024-07-15

Detailed guide to optimizing front-end loading access speed (Nginx)

1. gzip compression

tohttpIn the content paragraph add

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

The interpretation is as follows:
This is used to configure thegzip Compressed.gzip is a compression program for compressing files, which is widely used in web development, mainly used to compress static resources of web applications to reduce transmission traffic and improve the loading speed of web pages.

  • gzip on;: Enablegzip Compression.
  • gzip_min_length 1k;: Specifies the minimum length of a compressed file. Compression is enabled only if the file size exceeds 1KB.
  • gzip_comp_level 9;: Specify the compression level. The higher the level, the higher the compression efficiency, but it will take more CPU resources and time. It is generally recommended to set the level between 6-9. (Here it depends on your server)
  • gzip_types: Specifies the types of files to be compressed. Here, the configuration file compresses files of type text, application and image. In general, the file types to be compressed should be in plain text format or as compressible binary files.
  • gzip_vary on;: Use the Vary header to instruct the proxy server or browser to cache the compressed version. This way, more efficient compressed formats can be cached separately and used correctly at request time.
  • gzip_disable "MSIE [1-6]\.";: Browsers that disable gzip compression, such as earlier versions of Internet Explorer. These browsers have poor support for compressed formats, so disabling compression avoids problems. (This step avoids problems with web pages accessed by lesser browsers.)

2. Optimizing keepalive connections

keepalive_timeout 65;
keepalive_requests 100;

The interpretation is as follows:

These two configuration parameters are used to set the keepalive feature of the server.

  • keepalive_timeout: This parameter specifies the length of time that an established connection remains inactive (no data transfer). For each connection, the server closes the connection if no data is transferred for more than the keepalive_timeout time. The default value is usually 75 seconds. A smaller value ensures that connections are released in a timely manner, but increases the frequency of connection closures and reestablishments; a larger value reduces the frequency of connection closures and reestablishments, but may result in long periods of inactive connections that consume server resources.
  • keepalive_requests: This parameter defines the maximum number of requests that can be processed on a keepalive connection. After a keepalive connection has processed keepalive_requests a number of times, the server will close the connection. The default value is usually 100; larger values reduce connection closures and reestablishments, but may take up too much server resources in some cases.

3. Configure the cache

tohttpIn the content paragraph add

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;

The interpretation is as follows:

  • /path/to/cache is the specified cache storage path.
  • levels=1:2 specifies the hierarchical structure of the cache directory in the file system, in this case a one-level directory and two levels of subdirectories.
  • keys_zone=my_cache:10m defines a cache zone called my_cache with a size of 10 megabytes.
  • max_size=10g specifies that the maximum size of space that can be used by the cache is 10 GB.
  • inactive=60m Indicates that when the cache file is not accessed for 60m time, it will be considered inactive and may be cleaned up.

caveat

Changes to the Nginx configuration may require root privileges, so make sure you have enough privileges to modify the relevant configuration files. Also, again, please back up your configuration files before modifying them to prevent unforeseen circumstances, and be aware that nginx needs to be restarted to take effect.

summarize

Of course, there are more than these three options, the above options are for reference only, I hope it can help you optimize your system can help.

To this article on the front-end loading access speed optimization of the article is introduced to this, more related front-end loading access speed optimization content please search for my previous articles or continue to browse the following related articles I hope that you will support me more in the future!