Brotli Compression للمتوسط: نزّل حجم JavaScript bundle 24% بسطر NGINX
مستوى المقال: متوسط — يفترض إنك تعرف NGINX وتعدّل ملفات config بنفسك، وفاهم أساسيات HTTP headers و Content-Encoding. لو إنت مبتدئ تمامًا، الفقرة اللي بمثال شنط السفر مكتوبة عشانك بالظبط.
لو الـ JavaScript bundle بتاعك حجمه 1.1MB بعد minify، السيرفر بيبعته للزائر بـ gzip كـ 312KB. Brotli على نفس الـ bundle بينزّله لـ 237KB، يعني توفير 24% إضافي بـ 4 سطور تكوين، وأول رسم شاشة بيبان للزائر المصري على 4G من 1.42 ثانية لـ 1.08 ثانية. الفرق ده مش رفاهية — هو الفرق بين زائر بيتفاعل مع الصفحة وزائر بيقفلها.
المشكلة باختصار
السيرفر بياخد كود JavaScript أو CSS أو HTML، ويبعته للمتصفح عبر الإنترنت. كل byte بيتنقل بيكلّفك bandwidth، وبيخلّي الزائر يستنّى ملي ثانية إضافية في الـ Time to Interactive. على شبكة 4G مصرية بمتوسط 6Mbps، كل 100KB توفير = 130ms أسرع.
gzip اخترعه GNU في 1993 على خوارزمية DEFLATE. كان قوي وقتها، لكن dictionary بتاعه صغير (32KB sliding window). Brotli ظهر من Google في 2013، وبيشتغل على dictionary أكبر بكثير + قاموس ثابت built-in بـ 119,640 sequence جاهز للويب. النتيجة: ضغط أعلى بنفس الـ CPU.
الفرق بين Gzip و Brotli — بمثال شنط السفر
تخيّل إنك بترصّ هدوم في شنطة سفر. Gzip زي شخص بيرصّ لوحده — كل قطعة مطوية وبيحاول يعمل طبقات فوق بعض. Brotli زي شخص محترف عنده قاموس جاهز بأنماط 13 ألف كلمة شائعة جدًا في الويب (HTML tags، JavaScript keywords، CSS properties، URLs). لما يلاقي كلمة من القاموس بتاعه، بيكتبها كرقم صغير بدل ما يكتبها بالكامل.
التعريف العلمي الدقيق: Brotli — موصوف في RFC 7932 من 2016 — بيستخدم static dictionary بـ 119,640 sequence جاهز يتعرّف عليها بدون ما يبعتها في الـ payload. Gzip بيبني dictionary للمحتوى من جوّه وبيرسله مع البيانات نفسها، فبيخسر bytes إضافية على البناء. الفارق ده بيبان أكتر في الملفات الصغيرة (أقل من 50KB).
الإعداد على NGINX — كود قابل للنسخ
لازم الأول تثبت موديول ngx_brotli. مش جزء من NGINX القياسي، لكن متاح كـ package على Ubuntu 24.04 ومعظم التوزيعات الحديثة:
# على Ubuntu 24.04 / Debian 12
sudo apt update
sudo apt install nginx libnginx-mod-http-brotli-static libnginx-mod-http-brotli-filter
# تأكد إن الموديول اتحمّل
nginx -V 2>&1 | grep -i brotli
بعد كده، أضف داخل بلوك http {} في /etc/nginx/nginx.conf:
