Brotli في Nginx: ليه gzip لوحده بيخسّرك 25% بندويث في 2026

# /etc/nginx/conf.d/brotli.conf
brotli on;
brotli_comp_level 6;             # runtime: 4-6 توازن جيد بين CPU والنسبة
brotli_static on;                # خد ملفات .br المضغوطة مسبقًا لو موجودة
brotli_min_length 1024;          # ما تضغطش ملفات أقل من 1KB
brotli_types
  text/plain
  text/css
  text/xml
  application/json
  application/javascript
  application/xml+rss
  application/atom+xml
  image/svg+xml
  font/woff
  font/woff2;

# gzip كـ fallback للمتصفحات اللي ما بتدعمش brotli
gzip on;
gzip_comp_level 6;
gzip_static on;
gzip_min_length 1024;
gzip_vary on;
gzip_types
  text/plain text/css application/json application/javascript
  application/xml text/xml application/xml+rss image/svg+xml;

للـ static precompression، ضيف خطوة في الـ build pipeline تعمل ملفات .br و .gz جنب الأصول:

أرقام قبل وبعد من قياس فعلي

قياس على bundle React بحجم أصلي 850KB (vendors.js + main.js + styles.css)، السيرفر Nginx 1.24 على Ubuntu 22.04، CPU AMD EPYC 4 cores:

• بدون ضغط: 850KB، TTFB متوسط 240ms على 4G.
• gzip level 6 (dynamic): 248KB، نسبة ضغط 70.8 بالمية.
• brotli level 6 (dynamic): 198KB، نسبة ضغط 76.7 بالمية، CPU زيادة 8 بالمية على نفس الحمل.
• brotli level 11 (static precompressed): 176KB، نسبة ضغط 79.3 بالمية، CPU زيادة صفر لأن الضغط حصل في الـ build.

الفرق العملي: على 10 مليون hits شهريًا، gzip → brotli static = 720GB بندويث موفّر. على CloudFront في US-East بسعر 0.085 دولار/GB، ده ~61 دولار شهريًا من ضغط واحد على ملف JS.

الـ Trade-offs اللي لازم تعرفها قبل ما تفعّل

الضغط مش ببلاش، وكل تحسين معاه ثمن:

• CPU وقت dynamic compression: brotli level 6 بيستهلك ~25 بالمية CPU زيادة عن gzip level 6 على نفس عدد الـ requests. لو السيرفر بتاعك بيخدم 5K RPS وعنده hot CPU أصلًا، dynamic brotli ممكن يخلّيه يلهث. الحل: استخدم static precompression للأصول الثابتة، وdynamic للـ API responses الحيّة فقط.
• زمن الـ build بيزيد: brotli -q 11 بطيء جدًا، حوالي 30 ثانية لـ 1MB JS على core واحد. شغّله بـ parallel أو على CI runner منفصل عن خطوة الـ tests.
• المتصفحات القديمة: IE11 ومتصفحات قبل 2016 ما بتدعمش brotli أصلًا. الحل: gzip_static on كـ fallback تلقائي.
• HTTPS فقط: Chrome وFirefox ما بيبعتوش Accept-Encoding: br إلا على HTTPS. لو سيرفرك بدون TLS، Brotli مش هيشتغل أصلًا. ده قرار أمني من المتصفحات لمنع content injection على الشبكات غير المشفّرة.

متى لا تستخدم Brotli

الضغط مش حلّ سحري لكل ملف. لا تفعّله في الحالات دي:

• محتوى مضغوط مسبقًا: ملفات JPG، PNG، WebP، MP4، PDF، ZIP بالفعل مضغوطة. ضغطها تاني بيهدر CPU وممكن يكبّر الحجم بسبب overhead الـ headers.
• Real-time streaming: SSE وWebSocket frames صغيرة. ضغطها بيضيف latency أكثر من ما يوفر، وممكن يعطّل الـ streaming behavior.
• ملفات أصغر من 1KB: overhead الـ compression headers أكبر من الفائدة. خليّ brotli_min_length 1024.
• API بـ 1000+ RPS على CPU محدود: dynamic brotli ممكن يخلّي الـ CPU 100 بالمية بسرعة. استخدم gzip للـ dynamic، أو احطّ CDN قدامه يتولّى الضغط.

الخطوة التالية

افتح موقعك في Chrome DevTools → Network → اعمل reload. اختار أكبر ملف JS وشوف Content-Encoding في الـ Response Headers. لو لقيته gzip، انسخ الكود اللي فوق في nginx.conf، اعمل nginx -t && systemctl reload nginx، وأعد القياس. لازم تشوف br ووفر فوري في حجم الـ Transfer. لو فرق النسبة أقل من 20 بالمية، ده معناه إن أصولك مش مضغوطة مسبقًا — ضيف خطوة الـ static precompression في الـ build وقيس تاني.

مصادر

• RFC 7932: Brotli Compressed Data Format Specification — IETF (2016)
• Google Developers Blog: "Introducing Brotli: a new compression algorithm for the internet" — قياس على Alexa Top 1000
• توثيق Nginx: ngx_brotli module README على GitHub (google/ngx_brotli)
• توثيق Nginx الرسمي: ngx_http_gzip_static_module directives
• Can I Use: Brotli support — 96.8 بالمية global browser coverage في 2026
• AWS CloudFront pricing — تحديث يناير 2026 لمنطقة US-East
• Cloudflare Blog: "Results of experimenting with Brotli for dynamic web content"