Đọc đến đây mà bạn chưa biết nó là gì thì tôi xin giải thích cơ bản như sau:
Đây là một công nghệ web để nén trang web tĩnh từ phía server tới trình duyệt của người dùng, cụ thể nôm na là kiểu: Tôi là server, bạn là trình duyệt, nếu không có công nghệ GZip thì khi bạn vào web tôi, tôi sẽ trả về cho bạn dữ liệu là nguyên trang web html mà bạn cần xem với dung lượng gốc, ví dụ dung lượng trang html bạn cần xem là 500kb thì bạn phải tải hết chỗ 500kb đó. Với công nghệ GZip thì bạn chỉ tải cái file nén mà server tạo ra có dung lượng được giảm khá đáng kể.
Bạn nhìn hình minh họa ở đây để hiểu:
Bạn hình cái tab đã truyền tải và kích cỡ là rõ. Cái này làm minh họa ở trình duyệt Firefox, bạn có thể mở công cụ nhà phát triển và thử nghiệm web của mình.
Như hình trên bạn thấy tôi đã dùng GZip chưa? Nhìn dòng thứ 3 tôi tô xanh thì nếu không có GZip thì bạn phải tải tổng cộng khoảng 155kb cho 1 file CSS, còn với GZip thì bạn chỉ cần tải có 30kb, vâng 30kb bạn có tin nổi không. Bạn chỉ phải tải có dung lượng thực tế bằng 1/5 dung lượng gốc. Bạn sẽ thắc mắc là tải như vậy web có hiển thị đầy đủ không đúng không?
Tôi sẽ giải thích qua như sau: để có thể tương tác Gzip thì máy chủ của tôi phải hỗ trợ nén GZip và trình duyệt của bạn thì ngược lại, tức là phải giải nén được nó. Khi giải nén được thì bạn sẽ nhận được file gốc để hiển thị ra, từ đó bạn có file gốc qua 1 file đã được nén, cái này có ưu điểm là cho bạn nhận được dữ liệu với mức truyền tải thấp nhất, qua đó mạng của bạn chậm thì bạn sẽ được lợi quá lớn vì chỉ tải 1 phần web.
Vậy phải làm sao để bật GZip trên máy chủ:
Với máy chủ Apache bạn thêm đoạn code sau vào file .htaccess ở thư mục gốc của server web:
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Với máy chủ NGINX thêm đoạn code sau vào file config của web server:
gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
Các trình duyệt hiện nay đều hỗ trợ GZip nên bạn không cần phải làm gì cả.
Như vậy qua đó bạn có thể hiểu về công nghệ GZip trong phát triển Web.
