Tối Ưu Network

Compression Gzip & Brotli

Nén asset văn bản trên server để giảm đáng kể kích thước truyền tải — không cần thay đổi code phía client.

3.4×
Giảm HTML
3.5×
Giảm CSS
3.6×
Giảm JS
~70%
Tiết kiệm TB

Có và Không Có Compression

Khởi động Docker container để kiểm tra tỉ lệ nén thực tế trong DevTools.

⚠️ Demo này cần Docker. Chạy docker-compose up trong thư mục 5. Compress/, sau đó truy cập http://localhost:8080.
✕

Không Nén

  • Truyền toàn bộ kích thước file
  • Tải trang chậm hơn
  • Chi phí bandwidth cao hơn
  • Trải nghiệm mobile kém
Test Không Nén
✓

Có Gzip

  • Truyền tải nhỏ hơn 60–80%
  • Tải trang nhanh hơn
  • Chi phí bandwidth thấp hơn
  • Core Web Vitals tốt hơn
Test Đã Nén

Tại Sao Cần Nén?

⚡

Tải Nhanh Hơn

File nhỏ hơn truyền qua mạng nhanh hơn, cải thiện FCP, LCP và tốc độ trang tổng thể.

💾

Tiết Kiệm Bandwidth

Giảm chi phí truyền dữ liệu cho cả hosting lẫn gói mobile của người dùng.

📱

Thân Thiện Mobile

Đặc biệt hiệu quả trên kết nối 3G/4G chậm, nơi mỗi KB đều quan trọng.

🌍

Phạm Vi Toàn Cầu

Cải thiện trải nghiệm cho người dùng ở xa server, nơi độ trễ nhân thêm tác động của kích thước file.

Cấu Hình Nginx

Ba bước để bật gzip compression trong Nginx.

1

Bật Gzip trong nginx.conf

Thêm các directive này vào block http hoặc server.

gzip on;
gzip_comp_level 6;
gzip_min_length 1024;
gzip_types text/plain text/css application/javascript
           application/json image/svg+xml;
2

Xác minh bằng curl

Kiểm tra server trả về header Content-Encoding đã nén.

curl -H "Accept-Encoding: gzip" -I http://localhost:8080/
# Look for: Content-Encoding: gzip
3

Kiểm Tra Trong DevTools

Mở tab Network → click một tài nguyên → kiểm tra Headers xem Content-Encoding: gzip và so sánh Size với Transfer Size.

# Các cột trong tab Network:
Size          → kích thước file gốc
Transferred   → kích thước đã nén truyền qua mạng