مستوى المقال: مبتدئ. الشرح ده موجّه للي بدأ شغل front-end أو DevOps حديثًا وبيشوف موقعه بطيء على الموبايل وميعرفش ليه. لو عندك 3+ سنين خبرة في تحسين الأداء، الأرقام هتفيدك لكن المفهوم نفسه أساسي.
لو الـ main.js بتاع موقعك حجمه 1.2MB والمتصفح بياخد 2.8 ثانية يحمّله على شبكة 4G، السيرفر مش ضعيف. المشكلة إنك بترسل الملف بضغط Gzip بحجم 482KB، في حين Brotli بيوصله لـ 365KB بنفس المحتوى تمامًا. الفرق 24% أقل، بدون لمس سطر واحد من الكود.
إيه الفرق بين Brotli و Gzip؟
تخيّل إنك بتشتغل في شركة شحن. عندك صندوق فيه 100 كتاب، وعايز توصّله لعميل في مدينة تانية. قدامك طريقتين تغلّفه بيهم:
- Gzip: زي ورق تغليف عادي. بيلف الصندوق ويقلّل حجمه شوية. سريع وكل شركات الشحن في الدنيا بتقبله.
- Brotli: زي ورق تغليف ذكي. بيدرس شكل الكتب الأول، يطوي كل كتاب بشكل أمثل، ويلف الكل بحبل أرفع. الصندوق بيطلع أصغر فعلًا، لكن التغليف بياخد دقيقة زيادة في البداية.
على الإنترنت، الـ JavaScript و CSS بتوع موقعك زي الصندوق ده. كل ما الصندوق أصغر، كل ما وصل أسرع للعميل. Brotli بيغلّف الملفات بشكل أذكى من Gzip، فبتوصل للمتصفح بحجم أقل، فالموقع بيظهر أسرع.
الشرح العلمي بالتفاصيل
Gzip اتطلق سنة 1992 وبيستخدم خوارزمية DEFLATE اللي بتجمع بين LZ77 (لإيجاد الأنماط المتكررة) و Huffman coding (لترميز الأحرف بأطوال متغيرة). Brotli اتطلق من Google سنة 2015 وبيضيف 3 تحسينات أساسية:
- قاموس ثابت داخلي فيه 13,504 كلمة شائعة من ملفات HTML و JavaScript و CSS و عربي و إنجليزي ولغات تانية. ده معناه إن الكلمات اللي بتتكرر زي
functionأوreturnأوclassNameبتتشار إليها برقم صغير من القاموس بدل ما تتكتب كل مرة. - context modeling أفضل: الخوارزمية بتتنبأ بالحرف الجاي بناءً على آخر حرفين، مش حرف واحد بس زي Gzip.
- مستويات ضغط من 0 لـ 11. كل ما المستوى أعلى، الضغط أقوى، لكن الـ CPU بيتعب أكتر.
النتيجة على bundle حقيقي 1,228KB (React 18 + lodash + moment + كود تطبيق متوسط):
- Gzip level 6 (الافتراضي): 482KB — وقت ضغط 38ms.
- Brotli level 4: 412KB — وقت ضغط 42ms.
- Brotli level 11: 365KB — وقت ضغط 8,400ms.
اللي بيحصل فعلاً إن المتصفحات الحديثة بتدعم Brotli من سنة 2017 على HTTPS فقط (Chrome 50+، Firefox 44+، Safari 11+، Edge 15+). كل ما المستخدم يفتح موقعك، المتصفح بيقول للسيرفر "أنا بقبل br أو gzip" في الـ header Accept-Encoding، والسيرفر بيختار الأفضل المتاح.
إزاي تفعّل Brotli في NGINX خطوة بخطوة
الإعداد ده مبني على فرضية إن عندك NGINX 1.21+ على Ubuntu 22.04 و موقع HTTPS شغّال. لو NGINX أقدم، حدّثه الأول أو ركّب الـ module من المصدر يدويًا.
