GZIP là công nghệ nén thường được sử dụng để truyền dữ liệu một cách nhanh chóng qua Insternet. Hiện nay, GZIP là một tiêu chuẩn để nén các file trên trang web, đa số các website hiện nay hơn 99% sử dụng GZIP. Vì vậy, GZIP rất hiệu quả trong việc tăng tốc website, khi dùng GZIP bạn có thể giảm dữ liệu lên tới 70%.

Enabling the Gzip Command

Sau đây, tôi sẽ hướng dẫn các bạn bật tính năng gzip trên nginx, để bật tính năng gzip trên nginx, bạn cần thêm đoạn mã sau vào nginx.conf

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Verifying Gzip Activation

Sau khi bật gzip, bước tiếp theo là chúng ta xác minh rằng nó có đang compressing các file javasctip và css được gửi đi hay không?

Điều này được thực hiện bằng cách sử dụng bất kỳ công nghệ trực tuyến nào hoặc kiểm tra phản hồi HTTP trong trình duyệt, ngoài ra có thể kiểm tra phản hồi HTTP bằng cURL như sau:

curl -H "Accept-Encoding: gzip" -I https://manhdandev.com/web/css/style.min.css?v=20211010113045

Trong phản hồi, gzip sẽ được liệt kê trong header Content-Encoding:

HTTP/1.1 200 OK
Server: nginx
Date: Sun, 17 Oct 2021 07:54:12 GMT
Content-Type: text/html; charset=UTF-8…
Vary: Accept-Encoding
Content-Encoding: gzip

gzip_comp_level

Syntax: gzip_comp_level level;
Default:	
gzip_comp_level 1;
Context: http, server, location

Bạn có thể đặt level cho các phản hồi gzip, các giá trị có thể nằm trong khoảng từ 1 đến 9. Level càng cao thì tỉ lệ nén càng cao.

Sau đây là một ví dụ về tỉ lệ nén cho các level khác nhau:

application/x-javascript - jQuery 1.8.3 (Uncompressed)

0 261.46 KiB (100.00% of original size)
1 95.01 KiB ( 36.34% of original size)
2 90.60 KiB ( 34.65% of original size)
3 87.16 KiB ( 33.36% of original size)
4 81.89 KiB ( 31.32% of original size)
5 79.33 KiB ( 30.34% of original size)
6 78.04 KiB ( 29.85% of original size)
7 77.85 KiB ( 29.78% of original size)
8 77.74 KiB ( 29.73% of original size)
9 77.75 KiB ( 29.74% of original size)

Nhiều bạn đọc đến đây, sẽ mình rằng đặt level 9 trong config nginx thì mình sẽ được tỉ lệ nén tốt nhất rồi, nhưng để đạt được điều này bạn phải hy sinh CPU của con server của mình rất nhiều để thực hiện nén cho mỗi lần request được gửi đến.

Ngoài ra, bạn có đạt được tỉ lệ nén tốt nhất mà không phải phải hy sinh CPU của con server của bạn nhiều, đó là bạn hãy sử dụng gzip_static của nginx và nén các file javascrip hay css trước bằng PHP

function gzip_static($path)
{
    if ((extension_loaded('zlib') === true) && (is_file($path) === true))
    {
        $levels = array();
        $content = file_get_contents($path);

        foreach (range(1, 9) as $level)
        {
            $levels[$level] = strlen(gzencode($content, $level));
        }

        if ((count($levels = array_filter($levels)) > 0) && (min($levels) < strlen($content)))
        {
            if (file_put_contents($path . '.gz', gzencode($content, array_search(min($levels), $levels)), LOCK_EX) !== false)
            {
                return touch($path . '.gz', filemtime($path), fileatime($path));
            }
        }
    }

    return false;
}

Điều này cho phép bạn có được khả năng nén tốt nhất có thể mà không phải hy sinh CPU cho mỗi request gửi đến server (mình chỉ thực hiện nén file một lần hay chỉ nén file khi chúng ta thay đổi nội dung file).

Cuối cùng, tôi đã sử lệnh function PHP ở trên tạo thành command trong Laravel, nếu bạn đang sử dụng dự án bằng Laravel có thể sử dụng command sau:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class GzipStatic extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'gzip_static {--path=}';

    protected $path;
    protected $level;

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Additionally, if you use the gzip_static module, you may want to pre-compress your files (in PHP)';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        if (extension_loaded('zlib') === true) {
            $this->path = public_path($this->option('path'));
            if (is_file($this->path) === true) {
                $this->gzipStatic($this->path);
            } else {
                $files      = scandir($this->path);
                $gzip_files = [];
                foreach ($files as $key => $file) {
                    if (preg_match('/(.*?).css$/i', $file) || preg_match('/(.*?).js$/i', $file)) {
                        array_push($gzip_files, $file);
                    }
                }
                foreach ($gzip_files as $key => $gzip_file) {
                    $this->gzipStatic($this->path . '/' .$gzip_file);
                }
            }
        }
    }

    public function gzipStatic($path)
    {
        $levels  = array();
        $content = file_get_contents($path);

        foreach (range(1, 9) as $level)
        {
            $levels[$level] = strlen(gzencode($content, $level));
        }

        if ((count($levels = array_filter($levels)) > 0) && (min($levels) < strlen($content)))
        {
            if (file_put_contents($path . '.gz', gzencode($content, array_search(min($levels), $levels)), LOCK_EX) !== false)
            {
                return touch($path . '.gz', filemtime($path), fileatime($path));
            }
        }
    }
}

Khi muốn tạo một file gzip trong thư mục public Laravel chỉ cần chạy lệnh sau:

php artisan gzip_static --path=

Option path có 2 dạng:

+ File: php artisan gzip_static --path=/web/style.css

+ Folder: php artisan gzip_static --path=/web/ (Khi nén thì không bao gồm thư mục con)

Cuối cùng, trong cấu hình nginx thì chỉ cần bật gzip_static on

location / {
    gzip_static on;
}

Tài liệu tham khảo:

https://docs.nginx.com/nginx/admin-guide/web-server/compression/

http://nginx.org/en/docs/http/ngx_http_gzip_module.html

https://serverfault.com/questions/253074/what-is-the-best-nginx-compression-gzip-level

CÓ THỂ BẠN QUAN TÂM

Csv import with Validation for Laravel

Csv import with Validation for Laravel

Trong một bài viết lúc trước, mình đã chia sẻ đến các bạn cách xây dựng một service import và export CSV sử dụng Facades, nếu có bạn nào không biết hoặc đã quên các bạn có thể tham khảo lại bài viết t...

Cloudflare's Turnstile CAPTCHA in Laravel

Cloudflare's Turnstile CAPTCHA in Laravel

Ngày 28/09/2022, Cloudflare đã thông báo về phiên bản beta mở của Turnstile, một giải pháp thay thế vô hình cho CAPTCHA. Bất kỳ ai, ở bất kỳ đâu trên Internet muốn thay thế CAPTCHA trên trang web c...

Implementing Private User Folders with elFinder in Laravel

Implementing Private User Folders with elFinder in Laravel

elFinder elFinder là một trình quản lý tập tin mã nguồn mở dành cho web, được viết bằng JavaScript sử dụng jQuery UI. elFinder được phát triển dựa trên cảm hứng từ sự tiện lợi và đơn giản của chư...

Laravel  Scout Full Text Search with Algolia

Laravel Scout Full Text Search with Algolia

Laravel Scout cung cấp một giải pháp đơn giản, dựa trên trình điều khiển để thêm tìm kiếm Full Text vào các mô hình Eloquent của bạn. Khi sử dụng Eloquent, Scout sẽ tự động giữ chỉ mục tìm kiếm của bạ...

Laravel Upload File Using Trait

Laravel Upload File Using Trait

Hiện nay, đa số các dự án đều có chức năng upload file, nên tôi đã thử xây dựng một lớp Trait Upload File, để chúng ta dễ dàng sao chép qua các dự án khác để sử dụng, nhằm rút ngắn thời gian phát triể...

Laravel Accessor and Mutator

Laravel Accessor and Mutator

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách để format các Eloquent Attributes bằng cách sử dụng tính năng Laravel Accessors and Mutators. Accessors được sử dụng để format các thuộc tính khi c...

Laravel UI Password Reset Expired

Laravel UI Password Reset Expired

Trong thư viện laravel/ui, thì chức năng password reset dù cho token có hết hạn thì vẫn có truy cập vào trang password reset, đến khi bạn submit form thì mới thông báo là token đã hết hạn. Nhưng có mộ...

Laravel Validate Video Duration

Laravel Validate Video Duration

Đôi khi trong dự án, chúng ta cần xác định thời lượng video được phép upload lên server. Nhưng rất tiếc, Laravel không cung cấp validate xác định thời lượng video để chúng ta thực hiện được. Vì vậy, t...

Integrating AI Assistant with CKEditor 5 in Laravel using Vite

Integrating AI Assistant with CKEditor 5 in Laravel using Vite

OpenAI OpenAI là một công ty nghiên cứu và triển khai trí tuệ nhân tạo, nổi tiếng với việc phát triển các mô hình AI tiên tiến. Mục tiêu của OpenAI là đảm bảo rằng trí tuệ nhân tạo tổng quát (AGI...

ManhDanBlogs