Brotli และ Gzip: บีบอัดไฟล์บน Nginx ให้เว็บโหลดเร็วขึ้น

Brotli คืออัลกอริทึมบีบอัดข้อมูลที่ Google พัฒนาสำหรับเว็บโดยเฉพาะ บีบไฟล์ข้อความอย่าง CSS, JavaScript และ JSON ได้เล็กกว่า Gzip อีกราว 15-20% ส่วน Gzip เป็นมาตรฐานเดิมที่ทุกเบราว์เซอร์และทุกเครื่องมือรองรับ การเปิดทั้งสองแบบบน Nginx ทำให้หน้าเว็บโหลดเร็วขึ้น ใช้แบนด์วิดท์น้อยลง และช่วยคะแนน Core Web Vitals โดยไม่ต้องแก้โค้ดเว็บเลย

หลายเซิร์ฟเวอร์เปิด gzip on ไว้แล้วแต่บีบอัดได้เฉพาะ HTML เพราะค่าเริ่มต้นของ Nginx ไม่รวม CSS และ JavaScript คู่มือนี้จะตั้ง Gzip ให้ครอบคลุมไฟล์ที่ควรบีบอัด ติดตั้งโมดูล Brotli ตามแต่ละ Distro ทดสอบผลด้วย curl และอธิบายว่าไฟล์ประเภทไหนไม่ควรบีบอัดซ้ำ

สิ่งที่ต้องเตรียม

• เซิร์ฟเวอร์ที่ใช้ Nginx จากแพ็กเกจของระบบบน Ubuntu 22.04/24.04, Debian 12 หรือ AlmaLinux/Rocky Linux 9 และสิทธิ์ sudo (ดู ติดตั้ง LEMP บน Ubuntu)
• เว็บที่เปิดผ่าน HTTPS แล้ว เพราะเบราว์เซอร์ขอ Brotli เฉพาะการเชื่อมต่อ HTTPS (ดู ติดตั้ง SSL ด้วย Certbot)
• URL ของไฟล์ CSS หรือ JavaScript ขนาดใหญ่ในเว็บไว้ทดสอบ ตัวอย่างใช้ https://www.example.com/assets/app.css

ขั้นตอนที่ 1: ตรวจสถานะการบีบอัดปัจจุบัน

ส่ง Header Accept-Encoding เหมือนเบราว์เซอร์ แล้วดูว่าเซิร์ฟเวอร์ตอบ Content-Encoding อะไรกลับมา ถ้าไม่มีบรรทัดนี้แปลว่าไฟล์ยังไม่ถูกบีบอัด จากนั้นดูว่ามีการตั้ง gzip ไว้ที่ไหนบ้าง

curl -s -o /dev/null -D - -H 'Accept-Encoding: br, gzip' https://www.example.com/assets/app.css | grep -iE 'content-(type|encoding)'
grep -rn gzip /etc/nginx/nginx.conf /etc/nginx/conf.d/

ขั้นตอนที่ 2: ตั้งค่า Gzip ให้ครอบคลุมไฟล์ข้อความ

บน Ubuntu และ Debian ไฟล์ /etc/nginx/nginx.conf มี gzip on; อยู่แล้ว ให้ใส่ # หน้าบรรทัดนั้นก่อน ไม่เช่นนั้น Nginx จะแจ้ง "gzip" directive is duplicate เมื่อเพิ่มไฟล์ใหม่ บน AlmaLinux/Rocky ไม่มีบรรทัดนี้ จากนั้นสร้าง /etc/nginx/conf.d/compression.conf

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 5;
gzip_min_length 256;
gzip_types text/plain text/css text/xml text/javascript application/javascript
    application/json application/xml application/rss+xml application/atom+xml image/svg+xml;

• gzip_types ไม่ต้องใส่ text/html เพราะถูกบีบอัดเสมออยู่แล้ว ใส่ซ้ำจะได้คำเตือน
• gzip_vary on ส่ง Header Vary: Accept-Encoding ให้ CDN และ Proxy เก็บ Cache แยกตามการบีบอัด
• gzip_proxied any บีบอัดแม้คำขอผ่าน CDN หรือ Proxy มา และ gzip_comp_level 5 คือจุดสมดุลระหว่างขนาดไฟล์กับ CPU ระดับ 9 ได้ไฟล์เล็กลงอีกนิดเดียวแต่ใช้ CPU มากขึ้นชัดเจน

ขั้นตอนที่ 3: ติดตั้งโมดูล Brotli ตาม Distro

Nginx ไม่มี Brotli ในตัว ต้องเพิ่มโมดูล ngx_brotli ซึ่งแต่ละ Distro มีให้ต่างกัน

# Ubuntu 24.04 และ Debian 12
sudo apt update
sudo apt install -y libnginx-mod-http-brotli-filter libnginx-mod-http-brotli-static
ls /etc/nginx/modules-enabled/ | grep brotli

# AlmaLinux / Rocky Linux 9 (ใช้ Nginx จาก AppStream)
sudo dnf install -y epel-release
sudo dnf install -y nginx-mod-brotli
ls /usr/share/nginx/modules/ | grep brotli

แพ็กเกจจะเพิ่มคำสั่ง load_module ให้เอง ข้อควรรู้: Ubuntu 22.04 ไม่มีโมดูล Brotli ใน Repository ทางการ ให้ใช้ Gzip อย่างเดียวไปก่อน ซึ่งได้ผลส่วนใหญ่แล้ว หรืออัปเกรดเป็น 24.04 ตาม คู่มือ do-release-upgrade ส่วนบน AlmaLinux/Rocky ถ้าใช้ Nginx จาก nginx.org หรือเปิด Module Stream อื่น dnf อาจแจ้งว่า nginx(abi) ไม่ตรง เพราะโมดูลต้องคอมไพล์ให้ตรงกับรุ่นของ Nginx ทุกครั้ง

brotli on;
brotli_comp_level 5;
brotli_min_length 256;
brotli_types text/plain text/css text/xml text/javascript application/javascript
    application/json application/xml application/rss+xml application/atom+xml image/svg+xml;

sudo nginx -t
sudo systemctl reload nginx
U=https://www.example.com/assets/app.css
curl -s -o /dev/null -w 'none: %{size_download}\n' "$U"
curl -s -o /dev/null -w 'gzip: %{size_download}\n' -H 'Accept-Encoding: gzip' "$U"
curl -s -o /dev/null -w 'br:   %{size_download}\n' -H 'Accept-Encoding: br' "$U"

sudo apt install -y brotli        # AlmaLinux / Rocky: sudo dnf install -y brotli
cd /var/www/example/assets
brotli -k -q 11 app.css
gzip -k -9 app.css