لو الـ JavaScript bundle بتاعك 480KB وبعد Gzip بقى 142KB ومتقبّل الرقم ده على إنه أحسن حاجة ممكنة، انت بتدفع 21% bandwidth زيادة من غير سبب. Brotli على نفس الملف بالظبط بينزّل الحجم لـ 112KB بضبط سطرين في NGINX. كل المتصفحات الحديثة بتدعمه من سنة 2017، ومفيش سبب تقني لإنك لسه شغّال على Gzip لوحده في 2026.
Brotli في 2026: ليه Gzip لوحده مش كفاية لموقع إنتاج
المشكلة باختصار
Gzip اتعمل سنة 1992 وبيستخدم خوارزمية DEFLATE اللي اتصمّمت على hardware ضعيف زمان. كل request في 2026 لسه بيتضغط بنفس الخوارزمية رغم إن الـ CPU بقت أسرع 200 مرة. النتيجة: المستخدم بيحمّل ملفات أكبر من اللازم، والـ Largest Contentful Paint بياخد ثانية زيادة على شبكة 4G ضعيفة، والشركة بتدفع bandwidth زيادة على CDN في الآخر.
المشكلة بالظبط في إن أغلب فرق الـ DevOps حطّت gzip on في NGINX سنة 2015 ومحدش رجع راجع الإعداد لما Brotli بقى متاح. الفرق مش هامشي: على ملفات HTML الفرق ممكن يوصل لـ 31% توفير، وعلى JavaScript حوالي 21%، وعلى CSS حوالي 17%.
Brotli بمثال شنطة السفر
تخيّل إنك بتسافر وعندك شنطة فاضية وكمية هدوم. لو طويت الهدوم بطريقة عادية وحطّيتهم في الشنطة، بتاخد 20 قطعة. لو رصصتهم بطريقة vacuum compression (شفط الهوا)، نفس الشنطة بالظبط بتاخد 25 قطعة. الفرق مش في حجم الشنطة، الفرق في طريقة ترتيب اللي جوّاها.
Brotli هو الـ vacuum compression، Gzip هو الطي العادي.
علميًا، الفرق إن Brotli بيستخدم static dictionary مدمج فيه 13,504 كلمة وعبارة شائعة في الويب (أمثلة: function, return, div class, http://). بدل ما يضغط الكلمات دي من الصفر زي ما Gzip بيعمل، Brotli بيشاور عليها بـ index رقمي صغير. المعيار موثّق رسميًا في RFC 7932 اللي نشرته IETF سنة 2016.
الإعداد العملي على NGINX 1.25
NGINX من نسخة 1.21.5 بقى بيدعم Brotli عبر module اسمه ngx_brotli اللي طوّرته Google ونقلته بعد كده Cloudflare لمستودع منفصل. على Ubuntu 24.04 الإعداد بياخد 4 خطوات بس:
# 1) تثبيت الموديول الرسمي
sudo apt update
sudo apt install libnginx-mod-brotli
# 2) فتح ملف الإعداد
sudo nano /etc/nginx/nginx.conf
# 3) إضافة الإعداد التالي داخل http block
brotli on;
brotli_static on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml;
# 4) إعادة تحميل الإعداد بدون downtime
sudo nginx -t && sudo systemctl reload nginx
