Gzip یا Brotli؛ کدوم فشرده سازی برای سرعت سایت بهتره؟

اگه جواب کوتاه می خوای: برای فایل های متنی مثل HTML، CSS، JavaScript و JSON، Brotli معمولاً خروجی کوچک تری از Gzip می ده. ولی Gzip تقریباً روی هر سروری آماده هست و پشتیبان مطمئنیه. برای همین جواب عملی «Gzip یا Brotli» معمولاً «هر دو» هست: مرورگری که Brotli می فهمه همون رو می گیره و بقیه Gzip. توی این نوشته قدم به قدم می بینیم این دو روش چه فرقی دارن، وب سرور رو چطور تنظیم کنی و این تغییر کی واقعاً حس می شه. اگه سایتت هنوز هیچ کدوم رو نداره، اولویت اول روشن کردن Gzip هست، نه بحث درباره Brotli.

مرورگر و سرور چطور سر فشرده سازی به توافق می رسن؟

قبل از دست بردن به تنظیمات، ببین توی یه درخواست چه اتفاقی می افته. مرورگر یه هدر می فرسته، مثلاً Accept-Encoding: gzip, deflate, br. یعنی «gzip و deflate و br رو می فهمم». br همون Brotli هست. بعضی مرورگرهای جدید zstd هم اضافه می کنن، ولی برای تصمیم الان لازمش نداری.

سرور یکی از این ها رو انتخاب می کنه، فایل رو فشرده می کنه و توی جواب می نویسه Content-Encoding: br یا Content-Encoding: gzip. کنارش باید Vary: Accept-Encoding هم باشه. دلیلش اینه: بدون این هدر، یه کش میانی مثل CDN ممکنه نسخه Brotli رو به مرورگری بده که نمی فهمه.

Brotli فقط روی HTTPS کار می کنه

مرورگرها br رو فقط روی اتصال HTTPS اعلام می کنن. پس اگه سایتت هنوز HTTP ساده هست، حتی با تنظیم درست هم Brotli فعال نمی شه. Gzip روی هر دو کار می کنه. اگه گواهی SSL نداری، اول اون رو درست کن.

چی رو فشرده کنیم، چی رو نه

فایل های متنی خوب فشرده می شن: HTML، CSS، JS، JSON، XML، SVG، متن ساده و فونت های TTF و OTF. ولی JPEG، WebP، AVIF، ویدیو، ZIP و فونت WOFF2 از قبل فشرده هستن. دوباره فشرده کردنشون فقط CPU مصرف می کنه و چیزی کم نمی کنه.

فشرده سازی مثل بستن چمدان

Gzip مثل یه کیسه وکیوم معمولیه: لباس ها رو جمع می کنه و جای خوبی باز می کنه. Brotli کیسه ایه که با پمپ قوی تر هوا رو بیرون می کشه و جای بیشتری باز می کنه، ولی بستنش وقت بیشتری می بره. اگه چمدان رو یه بار توی خونه ببندی (فایل ایستا)، وقت بستن مهم نیست و همیشه بهترین حالت رو می گیری. اما اگه مجبور باشی هر بار وسط فرودگاه، سر هر درخواست، چمدان رو ببندی (صفحه پویا)، پمپ خیلی قوی فقط معطلت می کنه.

Gzip یا Brotli؛ بیا چند معیار رو کنار هم بذاریم

کدوم فایل رو کوچک تر می کنه؟

Brotli یه دیکشنری داخلی از عبارت های رایج HTML، CSS و JavaScript داره. برای همین حتی روی فایل های کوچک هم خوب جواب می ده. بسته به فایل، صرفه جویی نسبت به Gzip معمولاً حدود ده تا بیست و چند درصده. این عدد عمومیه و روی محتوای تو دقیق نیست، پس برای سایت خودت باید اندازه بگیری.

سرعت فشرده سازی چی می شه؟

Brotli سطح ۱۱ خیلی کنده. اگه برای هر درخواست اجراش کنی، زمان پاسخ اولیه بالا می ره. برای محتوای پویا سطح ۴ یا ۵ منطقیه. توی Gzip هم سطح ۹ نسبت به ۵ یا ۶ فرق کمی می ده و CPU بیشتری می خوره.

مرورگر قدیمی چی؟

نگرانش نباش. توافق از طریق Accept-Encoding انجام می شه و مرورگری که Brotli نمی فهمه خودش Gzip می گیره. خرابی ای پیش نمیاد.

تنظیمش چقدر سخته؟

Gzip توی Nginx و Apache جزو پایه ست. Brotli توی Nginx اغلب یه ماژول جدا می خواد و روی هاست اشتراکی به تنظیم خود هاست بستگی داره.

Gzip رو روی Nginx روشن کن، قدم به قدم

اگه VPS داری، فایل /etc/nginx/nginx.conf یا یه فایل جدا مثل /etc/nginx/conf.d/compression.conf رو باز کن و این رو داخل بلوک http بذار:

gzip on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_vary on;
gzip_proxied any;
gzip_types text/css text/javascript application/javascript application/json application/xml image/svg+xml text/plain;

دلیل هر خط:

• gzip_comp_level 5: تعادل خوب بین حجم و CPU. بالاتر رفتن معمولاً ارزشش رو نداره.
• gzip_min_length 256: فایل خیلی کوچک بعد از فشرده سازی چیزی کم نمی کنه، فقط CPU مصرف می کنه.
• gzip_vary on: هدر Vary: Accept-Encoding رو اضافه می کنه.
• gzip_proxied any: اگه Nginx پشت پروکسی یا CDN باشه، بدون این خط درخواست هایی که از پروکسی می رسن فشرده نمی شن.
• gzip_types: text/html به طور پیش فرض فشرده می شه و لازم نیست اضافه ش کنی، ولی بقیه نوع ها رو باید خودت بنویسی.

بعدش اول تنظیم رو تست کن، بعد اعمالش کن:

sudo nginx -t && sudo systemctl reload nginx

Brotli رو هم به Nginx اضافه کن

اول ببین ماژول داری یا نه:

nginx -V 2>&1 | grep -i brotli

اگه چیزی نیومد، ممکنه ماژول به صورت دینامیک نصب شده باشه. با nginx -T | grep -i brotli ببین تنظیمش جایی لود شده یا نه. اگه نه، باید ماژول ngx_brotli رو نصب یا کامپایل کنی. بعضی توزیع ها بسته آماده دارن و اسمش به نسخه ت بستگی داره. بعد از نصب، اگه ماژول خودکار لود نشد، دو خط load_module رو بالای nginx.conf اضافه کن. مسیر دقیقش به نصبت بستگی داره. بعدش این تنظیم رو کنار Gzip بذار:

brotli on;
brotli_comp_level 5;
brotli_types text/css text/javascript application/javascript application/json application/xml image/svg+xml text/plain;

Gzip رو خاموش نکن. مرورگری که br نفرستاده باید همچنان Gzip بگیره. هدر Vary معمولاً از همون gzip_vary پیروی می کنه، ولی با curl چکش کن.

فایل ایستا رو از قبل فشرده کن

برای CSS و JS که فقط موقع بیلد عوض می شن، لازم نیست سرور هر بار فشرده شون کنه. موقع دیپلوی، نسخه فشرده بساز:

brotli -k -q 11 dist/assets/*.js dist/assets/*.css
gzip -k -9 dist/assets/*.js dist/assets/*.css

بعد توی Nginx این ها رو روشن کن:

gzip_static on;
brotli_static on;

حالا اگه کنار app.js یه app.js.br باشه و مرورگر br بفهمه، Nginx همون رو می فرسته و موقع درخواست CPU مصرف نمی شه. اینجا سطح ۱۱ منطقیه، چون فقط یه بار موقع ساخت اجرا می شه.

یه اشتباه رایج: فایل ها عوض می شن ولی .br و .gz قدیمی می مونن. فشرده سازی رو بذار توی اسکریپت بیلد یا دیپلوی تا هر بار از نو ساخته بشن.

Apache و هاست اشتراکی

توی Apache، mod_deflate برای Gzip و mod_brotli برای Brotli هست. توی .htaccess یا تنظیم سایت اینجوری می نویسی:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json application/xml image/svg+xml
</IfModule>
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css text/javascript application/javascript application/json application/xml image/svg+xml
</IfModule>

IfModule باعث می شه اگه ماژولی نصب نبود، سایت خطا نده. ولی همین یعنی ممکنه بی صدا کار نکنه. اگه هاستت mod_brotli نداره، باید از پشتیبانی هاست بپرسی. توی cPanel معمولاً بخش Optimize Website هم هست که فشرده سازی رو بدون ویرایش فایل روشن می کنه.

اگه جلوی سایتت CDN هست، تنظیم فشرده سازی خودش رو هم نگاه کن. سرور مبدا باید Vary درست بده و فشرده سازی رو هم دو جا همزمان انجام نده.

تنظیمت واقعاً کار می کنه؟ با curl چک کن

این دستور هدرهای جواب رو برای Gzip نشون می ده:

curl -sI -H "Accept-Encoding: gzip" https://example.com/assets/app.js | grep -i -E "content-encoding|vary"

برای Brotli فقط gzip رو با br عوض کن. حجم واقعی انتقال رو هم می تونی مقایسه کنی:

for e in identity gzip br; do
  echo -n "$e: "
  curl -s -H "Accept-Encoding: $e" -o /dev/null -w "%{size_download}\n" https://example.com/assets/app.js
done

چرا curl؟ چون مرورگر کش داره و افزونه ها هم ممکنه تست رو خراب کنن. اگه با مرورگر تست می کنی و تغییری نمی بینی، حتماً کش مرورگر را پاک کردی ولی تغییرات سایت هنوز دیده نمی شه؟ رو بخون. اگه با ترمینال راحت نیستی، چک لیست دستورات پرکاربرد لینوکس برای مدیر سایت؛ چک لیست هر هفته کمکت می کنه.

کی این تغییر واقعاً حس می شه؟

اگه الان هیچ فشرده سازی نداری: روشن کردن Gzip برای سایتی که هیچی فشرده نمی کنه بزرگ ترین تغییره. گزارش های سرعت مثل Lighthouse هم معمولاً فقط نبودن فشرده سازی رو مشکل می دونن، نه اینکه Gzip هست یا Brotli.

اگه فایل های JS و CSS بزرگ داری: صرفه جویی چند ده کیلوبایت روی بسته های بزرگ، مخصوصاً روی موبایل با اینترنت ضعیف، می تونه قابل حس باشه.

اگه کاربرهات اتصال خوبی ندارن: وقتی بیشترشون با اینترنت کند یا پرنوسان میان، هر کیلوبایت کمتر به چشم میاد. برعکس، اگه سرورت نزدیک کاربرهاست و اتصالشون خوبه، فرق Gzip و Brotli کمتر دیده می شه.

اگه سایتت کوچیکه: برای یه صفحه ۳۰ کیلوبایتی، صرفه جویی چند کیلوبایتی عملاً دیده نمی شه. وقتت رو بذار روی چیزهای مهم تر.

یه نکته درباره شاخص ها هم هست: فشرده سازی روی زمان دانلود اثر می ذاره و از اون راه روی شاخص هایی مثل FCP و LCP. پرش چیدمان رو درست نمی کنه. برای اون باید پرش چیدمان صفحه هنگام بارگذاری؛ علت CLS و راه رفعش رو ببینی. فشرده سازی تأخیر اسکریپت های شخص ثالث رو هم حل نمی کنه، فقط اندازه فایل ها رو کم می کنه. اگه حوصله این بررسی ها رو نداری، بهینه سازی سرعت رو ببین.

تو کدوم حالتی؟ توصیه برای هر وضعیت

• وردپرس روی هاست اشتراکی: اول با curl مطمئن شو Gzip روشنه. اگه پنل گزینه Brotli داره، اون رو هم روشن کن. اگه نداره، نگران نباش.
• VPS با Nginx: Gzip رو روی سطح ۵ روشن کن، Brotli رو با ماژول اضافه کن و برای محتوای پویا سطح ۴ یا ۵ بذار. برای فایل های ایستا از brotli_static استفاده کن.
• توسعه دهنده با بیلد ایستا: موقع بیلد .br و .gz بساز و سرور فقط همون ها رو بفرسته.
• پشت CDN: ببین CDN خودش فشرده می کنه یا نه. اگه می کنه، سرور مبدا رو شلوغ نکن.
• سایت هنوز HTTP: اول SSL، بعد Brotli. تا اون موقع Gzip کافیه.

اشتباه هایی که زیاد پیش میاد

• فشرده کردن تصویر و ویدیو، که فقط CPU می خوره.
• ننوشتن Vary: Accept-Encoding و در نتیجه ارسال نسخه اشتباه از کش.
• Brotli سطح ۱۱ روی صفحه های پویا، که زمان پاسخ رو بالا می بره.
• جا انداختن application/json یا image/svg+xml از لیست نوع ها.
• .br قدیمی که بعد از به روزرسانی سایت می مونه.
• فشرده سازی چندلایه (سرور و CDN) بدون اینکه معلوم باشه کدوم کار می کنه.
• فکر کردن اینکه صفحه درگاه پرداخت هم با تنظیم تو فشرده می شه. اون صفحه روی سرور بانک یا PSP هست و دست تو نیست.

سوالات متداول

اگه Gzip و Brotli رو با هم روشن کنم، تداخل پیدا می کنن؟

نه. مرورگر با Accept-Encoding می گه چی می فهمه و سرور فقط یکی رو می فرسته. تنها نکته اینه که Vary: Accept-Encoding درست باشه تا کش نسخه ها رو قاطی نکنه. با curl هر دو حالت رو تست کن.

Brotli مستقیم روی رتبه سایت اثر داره؟

اثر مستقیم و جداگانه ای براش مشخص نیست. ولی اگه سرعت بارگذاری رو بهتر کنه، می تونه به تجربه کاربر و شاخص های Core Web Vitals کمک کنه. فقط روی فشرده سازی حساب نکن؛ سرعت چند عامل داره.

تصاویر رو هم باید با Gzip یا Brotli فشرده کنم؟

نه. فرمت هایی مثل JPEG، WebP و AVIF از قبل فشرده هستن. برای تصاویر بهتره اندازه و فرمت رو درست انتخاب کنی. SVG استثناست، چون متنیه و فشرده سازی بهش می خوره.

چرا Content-Encoding رو توی جواب نمی بینم؟

چند دلیل رایج داره: نوع فایل توی لیست فشرده سازی نیست، فایل از min_length کوچک تره، سایت HTTP هست و Brotli فعال نمی شه، یا CDN یا کش جواب رو عوض می کنه. اول با curl مستقیم به سرور مبدا تست کن، بعد پشت CDN.

جمع بندی: اول Gzip، بعد Brotli برای فایل های ایستا

اگه چیزی فعال نیست، Gzip رو روشن کن و با curl تأیید کن. بعد اگه HTTPS داری، Brotli رو برای CSS و JS ایستا اضافه کن و سطح بالا رو فقط موقع بیلد بذار. برای صفحه های پویا سطح متوسط یا همون Gzip کافیه. هر بار هم قبل و بعد رو اندازه بگیر؛ همین بهت می گه ارزشش رو داشت یا نه.