ضغط المحتوى Brotli وGzip: كيف تنصف حجم صفحتك

ضغط المحتوى يقلّص حجم الملفات النصية التي يرسلها سيرفرك للمتصفح، مثل HTML وCSS وJavaScript وJSON، بنسبة تتراوح من 60% إلى 80% قبل أن تعبر الشبكة. الخوارزميتان الأكثر استعمالاً هما Gzip المدعومة في كل متصفح ووكيل منذ سنوات، وBrotli الأحدث من جوجل التي تضغط النص أكثر من Gzip بنحو 15% إلى 25% عند مستويات متقاربة. النتيجة العملية أن صفحة وزنها 400 كيلوبايت من HTML وCSS وJS قد تنزل إلى نحو 90 كيلوبايت، فتصل أسرع وتستهلك من باقة النقل أقل. الثمن الوحيد أن الضغط يأكل جزءاً بسيطاً من وقت الـvCPU عند كل استجابة، لكنه ثمن زهيد أمام ما يوفّره في زمن التحميل خصوصاً على شبكات الجوال.

القاعدة المختصرة: فعّل Brotli للمتصفحات التي تدعمه مع Gzip كخيار احتياطي لأي عميل قديم، واضبط المستوى بحيث تضغط الملفات الثابتة مسبقاً مرة واحدة وتضغط المحتوى الديناميكي بمستوى متوسط لحظياً. لا تضغط الصور ولا الفيديو ولا الملفات المضغوطة أصلاً، لأنها لن تصغر وستضيّع معالجة بلا فائدة. بقية هذا الدليل يشرح الفرق بين الخوارزميتين، وأثر المستويات على المعالج، وما يستحق الضغط وما لا، ثم إعداداً عملياً على nginx بأرقام حقيقية.

لماذا الضغط أرخص مكسب في الأداء

أغلب وزن الصفحة الأولى يأتي من ملفات نصية: قالب HTML، وأوراق أنماط CSS، وحزم JavaScript، وأحياناً ردود JSON من الـAPI. هذه الملفات فيها تكرار هائل: أسماء أصناف تتكرر، وكلمات مفتاحية في اللغة، ومسافات بيضاء. خوارزميات الضغط تبني قاموساً للأنماط المتكررة وتستبدلها برموز أقصر، فينكمش الملف بشكل كبير قبل النقل، ثم يفكّه المتصفح فوراً عند الاستلام. الزائر لا يرى الفرق إلا في السرعة.

الفائدة مضاعفة: زمن تحميل أقل للزائر، واستهلاك أقل من باقة النقل على السيرفر. حين يكون أصلك في الرياض بزمن استجابة نحو 8ms للجمهور السعودي، فإن تقليص عدد البايتات المنقولة يظهر مباشرة في سرعة ظهور الصفحة، لأن زمن النقل يتناسب مع الحجم. هذا المكسب لا يكلّفك تغيير سطر واحد في تطبيقك، فهو إعداد على مستوى خادم الويب فقط.

Gzip مقابل Brotli: الفرق العملي

Gzip موجودة منذ التسعينات ومدعومة في كل مكان تقريباً، وهي سريعة الضغط والفك وتعطي نتائج ممتازة. Brotli أحدث، طوّرتها جوجل، وتأتي بقاموس مدمج مبني على أنماط الويب الشائعة، لذلك تتفوّق على Gzip في النصوص. الفرق يظهر بوضوح في الملفات الثابتة الكبيرة مثل حزم JavaScript الضخمة، حيث توفّر Brotli بايتات إضافية معتبرة عند أعلى مستوياتها.

الخاصية	Gzip	Brotli
الدعم في المتصفحات	عالمي (كل المتصفحات)	كل المتصفحات الحديثة
نسبة الضغط للنصوص	جيدة	أعلى بـ15% إلى 25%
مستويات الضغط	من 1 إلى 9	من 0 إلى 11
سرعة الفك عند المتصفح	سريعة جداً	سريعة جداً
تكلفة الضغط عند أعلى مستوى	معقولة	أثقل على المعالج
الأنسب لـ	احتياطي شامل + محتوى ديناميكي	ملفات ثابتة مضغوطة مسبقاً

الاستراتيجية الذكية أن تجمع بينهما لا أن تختار واحدة. المتصفح يرسل في ترويسة الطلب ما يقبله من ترميز، فيقدّم له السيرفر Brotli إن كان مدعوماً، ويسقط إلى Gzip خلاف ذلك. بهذا تحصل على أفضل ضغط للجمهور الحديث دون أن تكسر أي عميل قديم.

المستويات وأثرها على الـvCPU

كل خوارزمية لها مستويات: كلما ارتفع المستوى زادت نسبة الضغط وزاد وقت المعالج المطلوب. المفتاح هو التمييز بين نوعين من المحتوى. الملفات الثابتة مثل CSS وJS تُبنى مرة عند النشر، فتستطيع ضغطها مسبقاً عند أعلى مستوى (Brotli 11 مثلاً) وتخزين النسخة المضغوطة على القرص، فيقدّمها nginx جاهزة بلا أي حمل لحظي. أما المحتوى الديناميكي مثل صفحات HTML المولّدة لكل طلب فيُضغط لحظياً، ولذلك تختار له مستوى متوسطاً يوازن بين الحجم والسرعة، غالباً Brotli من 4 إلى 6 أو Gzip من 5 إلى 6.

على باقة خادم سحابي أساس بمعالج vCPU واحد وذاكرة 2GB، الضغط الديناميكي بمستوى متوسط يكاد لا يُلاحظ في استهلاك المعالج تحت حمل عادي. لو رفعت المستوى إلى أقصاه على كل طلب ديناميكي فقد ترى ارتفاعاً في الـvCPU تحت ذروة الزيارات، وهنا يظهر جمال الضغط المسبق للملفات الثابتة: تحصل على أفضل نسبة دون أي كلفة متكررة. تفاصيل الباقات وموارد كل واحدة تجدها في صفحة الخادم السحابي، ومقارنة الأسعار في صفحة الأسعار والباقات.

ما يستحق الضغط وما لا يستحق

القاعدة بسيطة: اضغط النص، واترك ما هو مضغوط أصلاً. الصور بصيغ JPEG وPNG وWebP وAVIF مضغوطة داخلياً، ومحاولة ضغطها بـGzip أو Brotli لن تصغّرها بل ستضيّع معالجة وقد تكبّرها قليلاً. نفس الشيء للفيديو والصوت والملفات المضغوطة مثل ZIP وملفات PDF الحديثة.

• اضغط: HTML، CSS، JavaScript، JSON، XML، SVG، الخطوط بصيغة woff الأصلية غير المضغوطة، ملفات النصوص عموماً.
• لا تضغط: JPEG، PNG، WebP، AVIF، الفيديو، الصوت، الملفات المضغوطة، خطوط woff2 (مضغوطة أصلاً).

في nginx تتحكم بذلك عبر قائمة أنواع MIME التي يشملها الضغط، فتضيف الأنواع النصية فقط. هكذا تحصل على الفائدة كاملة دون إهدار.

إعداد عملي على nginx وأرقام قبل وبعد

لتفعيل Gzip في nginx تضيف توجيهات تفعّل الضغط، وتحدد أنواع الملفات، وتضبط الحد الأدنى لحجم الملف الذي يستحق الضغط (لا فائدة من ضغط ملف 200 بايت). لتفعيل Brotli تحتاج وحدة brotli المُضافة إلى nginx، ثم توجيهات مماثلة، مع تفعيل خيار تقديم الملفات المضغوطة مسبقاً من القرص متى وُجدت. المبدأ أن تبني ملفات CSS وJS المضغوطة بامتداد إضافي عند كل نشر، ويقدّمها الخادم مباشرة.

الأرقام تتكلم. صفحة تطبيق نموذجية بحزمة JS وCSS مجمّعة قد تكون بهذا الشكل:

الملف	الأصلي	Gzip	Brotli
حزمة JavaScript	320 KB	96 KB	82 KB
ورقة CSS	85 KB	18 KB	15 KB
صفحة HTML	45 KB	11 KB	9 KB
المجموع المنقول	450 KB	125 KB	106 KB

تقلّص الوزن المنقول من 450 كيلوبايت إلى نحو 106 مع Brotli، أي أقل من ربع الحجم الأصلي. على اتصال جوال متوسط يعني هذا فرقاً محسوساً في زمن ظهور الصفحة، وعلى مستوى السيرفر يعني استهلاك ربع باقة النقل تقريباً لنفس عدد الزيارات.

أخطاء شائعة تفسد المكسب

أول خطأ متكرر هو ضغط الصور مع النصوص في قائمة واحدة، فتضيّع معالجة على ملفات لن تصغر وقد تكبر قليلاً بسبب ترويسة الضغط. الخطأ الثاني ضغط المحتوى الديناميكي بأعلى مستوى على كل طلب، فترتفع الـvCPU تحت الذروة بلا داعٍ، والصواب مستوى متوسط للديناميكي مع ضغط مسبق للثابت. الخطأ الثالث نسيان الحد الأدنى لحجم الملف، فضغط ملف صغير جداً يكلّف أكثر مما يوفّر بسبب حجم الترويسة الثابت.

خطأ رابع أخطر: بعض إعدادات الوسطاء أو بروكسي الحافة قد تُلغي الضغط أو تعيد ضغطه بشكل مزدوج، فتتأكد أن ترويسة الترميز تصل سليمة من الأصل إلى المتصفح. لو كان أمام سيرفرك طبقة حافة، اضبط الضغط في مكان واحد واضح لتجنّب الازدواج. أخيراً لا تفعّل الضغط لطلبات نطاق البايت الجزئية إن كنت تخدم ملفات كبيرة قابلة للاستئناف، لأنها قد تتعارض مع منطق التقطيع.

خطوات التطبيق

ابدأ بهذا الترتيب العملي على سيرفرك: أولاً فعّل Gzip بمستوى متوسط لأنه متاح فوراً ويغطي الجميع. ثانياً أضف وحدة Brotli وفعّلها للمتصفحات الداعمة. ثالثاً اضبط خط بناء المشروع ليولّد نسخاً مضغوطة مسبقاً من ملفات CSS وJS الثابتة بأعلى مستوى، وفعّل تقديمها من القرص. رابعاً تأكد أن قائمة الأنواع تشمل النصوص فقط وتستثني الصور والفيديو. خامساً قِس الفرق بأداة فحص الشبكة في المتصفح قبل وبعد.

الاستضافة السحابية المُدارة من كلاود تأتي بضغط مفعّل على مستوى الخادم جاهزاً، فإن كنت تشغّل موقعاً على الاستضافة السحابية فالأساس مضبوط لك. أما إن كنت تدير خادمك بنفسك على VPS فالإعداد أعلاه يمنحك التحكم الكامل. في الحالتين الضغط هو أول وأرخص مكسب أداء تجنيه قبل أي تحسين آخر.