سرعت لود بالای وبسایت یکی از پارامترهای اصلی سایت و کسب و کار است. یکی از پارامترهایی که سرعت لود وبسایت را بالا می برد کاهش حجم صفحه است. سایتی را فرض کنید که زیر یک ثانیه بازگذاری یا لود می شود و سایتی دیگر که به کندی لود می شود، خب تفاوت این دو سایت چقدر است؟ کدام سایت مشتری یا بازدید کننده را جذب می کند و کدام یک مشتری را فراری می دهد؟

چگونه حجم صفحه وب را کاهش دهیم؟

فعالسازی Gzip روی سرور یکی از راه های موثر برای کاهش حجم صفحه است پس با کاهش حجم صفحه سرعت لود هم بالا می رود البته در کنار افزایش سرعت برای کاربر باعث می شود کاربر برای لود صفحه دیتا کمتر و حجم اینترنت کمتری مصرف کند.

در کنار اینکه سرور باید از ویژگی Gzip پشتیبانی کند، مرورگرها هم باید از این ویژگی فشرده سازی پشتیبانی کنند. اما جای نرگانی نیست و تمام مروگرهای مدرس به صورت پیشفرض از این خصوصیت پشتیبانی میکنند و روی تمام درخواست های HTTP فشرده سازی Gzip را اعمال می کنند. در این مقاله هم قصد داریم تا این ویژگی در سرور را بررسی کنیم و اگر فعال نبود آن را فعال کنیم و سرعت سایت خود را بالا ببریم.

Gzip چیست؟

همانطور که با نرم افزار فشرده ساز winZip آشنا هستید Gzip هم یک نرم افزار فشرده سازی فایل های متنی است و فایل هایی که با این نرم افزار فشرده می شوند پسوند .gzip دارند. پس اگر فشرده سای Gzip را سمت سرور فعال کنیم می توانیم فایل های متنی مثل html, css, javascript را فشرده کنیم و حجم آن را کاهش دهیم.

دقت کنید همانطور که اشاره شد Gzip برای فشرده سازی فایل های متنی استفاده می شود و روی تصاویرکه باینری هستند کار نمی کند چون خود این فایل ها خود به روش دیگری فشرده شده اند البته فشرده سازی تصاویر برای خود راه های مختلفی دارد که یکی از این روش ها استفاده از ابزار Imagemin است.

با روش فشرده سازی توسط Gzip حتی شاهد بودیم که حجم برخی از فایل ها تا ۷۰ درصد کاهش پیدا کرده و در کل اگر به دنبال ساده ترین روش برای بهینه سازی حجم فایل های سایت وردپرس هستنید حتما Gzip را امتحان کنید. در زیر می توانید نتیجه فشرده سازی Gzip روی برخی کتابخانه های پرکاربر را مشاهده کنید.

نتیجه فشرده سازی Gzip روی کتابخانه های پرکاربرد

فشرده سازی فرآیند کد گذاری اطلاعات با استفاده از تعداد بیت های کمتر است.

Ilya Grigorik از گوگل

زمانیکه وبسایتی را لود می کند ابتدا بررسی می کند که سرور از Gzip پشتیبانی می کند یا نه. اما چطور بررسی می کند؟ وب سرور اگر Gzip را فعال کرده باشد در سرآیند پاسخ خود به مرورگر از عبارت content-encoding: gzip استفاده می کند مرورگر هم وقتی این سرآیند را ببیند محتوا را از حالت فشرده خارج می کند و از آن استفاده می کند اگر هم مرورگر عبارت ذکر شده را مشاهده نکرد با اسناد دریافتی مثل یک فایل معمولی رفتار می کند. در ابزارهای تست سرعت سایت مثل Google PageSpeed Insight و GTmetrix هم اگر سرور سایت شما Gzip را فعال نداشته باشد هشدار و امتیاز منفی به این خاطر خواهید گرفت.

هشدار GZIP در ابزار Google PageSpeed Insights

فرض کنید سایت خود را در ابزار تست سرعت گوگل یا Google SpeedPage Insight آزمایش کرده ایم. در نتیجه گوگل به شما خواهد گفت که فشرده سازی منابع با استفاده از Gzip باعث کاهش تعداد بایت های ارسالی در شبکه می شود

هشدار GZIP در ابزار Google PageSpeed Insign

خطای GZIP در ابزار GTmetrix

ابزار GTmetrix هم فعالسازی ویژگی GZIP را برای کاهش حجم تبادل فایل ها توصیه می کند.

پیشنهاد فعالسازی GZIP در ابزار GTmetrix

چگونه فعال بودن فشرده سازی GZIP را بررسی کنیم

فشرده سازی Gzip امروزه خیلی رایج شده است و به طور پیشفرض روی خیلی از سرورها و هاست ها فعال است. اما در رابطه با مرورگرها نیاز به نگرانی از پشتیبانی مرورگرها از این ویژگی نیست به طوری که حدود ۱۷ سال است که از این ویژگی پشتیبانی می شود. می توانید لیست مرورگر های که از ویژگی فشرده سازی Gzip پشتیبانی می کند را اینجا ببینید.

  • اینترنت اکسپلورر ۵٫۵ به بالا (از جولای ۲۰۰۰)
  • اپرا ۵ به بالا(از جولای ۲۰۰۰)
  • فایرفاکس ۰٫۹٫۵ به بالا(از اکتبر ۲۰۰۱)
  • گوگل کروم(بعد از اولین اجرا سال ۲۰۰۸)
  • سافاری(بعد از اولین اجرا از سال ۲۰۰۳)

باید همیشه فعال بودن این ویژگی را بررسی کنید تا سایت شما بهترین عملکرد را داشته باشد. دو راه برای بررسی این ویژگی روی هاست شما وجود دارد:

ابزار بررسی فشرده سازی GZIP

اولین و سریع ترین روش برای بررسی فعال بودن فشرده سازی Gzip روی سایت شما استفاده از ابزار رایگان Check GZIP compression است. استفاه از این ابزار ساده است آدرس سایت خود را داخل بخش مشخص شده وارد کنید و روی search کلیک کنید. این ابزار مقداری که به واسطه فشرده سازی GZIP ذخیره شده است را نشان خواهد داد و یا خطا بر می گرداند و شما می فهمید که Gzip فعال نیست. همانطور که در تصویر زیر می بینید بررسی ما ۶۶٫۹ درصد ذخیره را نشان می دهد

بررسی فعال بودن GZIP توسط ابزار Check GZIP compression

دقت داشته باشید که Gzip نه تنها روی کد Html بلکه باید روی تمام منابع یا فایل های متنی شما مثل css، javascript ها هم اعمال شود.این یعنی اگر این فایل ها را از CDN می گیرید باید مطمئن شوید که شرکت CDN شما هم فشرده سازی Gzip را فعال کرده باشند. ارائه دهنده های CDN مطرح دنیا فشرده سازی Gzip را هم پشتیبانی می کنند مثل Cloudeflare، KeyCDN و CloudFron. برای تست Gzip روی این CDN ها کافی است یکی از فایل های css و یا javascript که روی CDN هست را با استفاده از این ابزار تست کنید.

بررسی Content-encoding در سرآیند پاسخ HTTP

روش دوم برای بررسی فعال بودن GZIP بررسی content-encoding: gzip در سرآیند پاسخ HTTP سایت شماست. این همان چیزی است مرورگر به دنبال آن می گردد و در صورت مشاهده محتوا را از حالت فشرده Gzip خارج می کند. می توانید با زدن میانبر F12 ابزار توسعه گوگل کروم را باز کنید و سرآیند پاسخ اولین درخواست را زیر بخش Network بررسی کنید.

شما می توانید روی تنظیم view large request کلیک کنید و اندازه اصلی و اندازه فشرده شده صفحه را ببینید. همانطور در پایین می بینید اندازاه صفحه ۵۱٫۶ کیلوبایت بوده که نسخه فشرده شده Gzip آن ۱۷٫۷ کیلوبایت است.

چگونه فشرده سازی GZIP را فعال کنیم

اگر فشرده سازی GZIP برای شما فعال نیست می توانید دو روش زیر را برای فعالسازی این ویژگی روی وب سرور خود استفاده کنید

فعال سازی Gzip با افزونه وردپرس

اولین و ساده ترین روش استفاده از افزونه کش است که از فعالسازی امکان Gzip پشتیبانی کند. WP Rocket به عنوان امکان Gzip را به صورت خودکار روی فایل .htaccess شما با استفاده از ماژول mod_deflate فعال می کند. افزونه W3 Total Cache هم در بخش کارایی روشی را برای فعالسازی این ویژگی ارائه داده است. هر چند افزونه های زیادی وجود دارد اما هنوز وابسته به دسترسی ها برای تغییر فایل ها روی وب سرور شما تست. اگر افزونه کش شما دسترسی برای این کار را ندارد لازم است تا میزبان خود بخواهید یا از تکه کد زیر استفاده کنید.

فعال کردن Gzip در آپاچی

دومین روش فعالسازی فشرده سازی Gzip ویرایش فایل .htaccess است. اکثر هاست های اشتراکی از آپاچی استفاده می کنند که با ویرایش یک فایل .htaccess می توانید برخی تنظیمات آن را تغییر دهید. این فایل در ریشه وردپرس وجود دارد که معمولا در هاست شما پوشه public_html است و با FTP در دسترس است.

نکته مهم: مطمئن شوید که ماژول mod_filter روی سرور شما لود شده باشد در غیر این صورت AddoutputFilterByType کار نخواهد کرد و خطای ۵۰۰ تولید می کند. البته توصیه می کنیم اگر با اضافه کردن کدهای زیر خطایی دریافت کردید فایل لاگ و گزارش را بررسی کنید، کدها را به حالت قبل برگردانید و از میزبان خود در این باره مشورت بگیرید.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

مطمئن شوید که کدها را زیر محتوای فعلی فایل .htaccess خود وارد کردید. مثل زیر:

فعالسازی GZIP روی NGINX

اگر از وب سرور NGINX استفاده می کنید به راحتی کد زیر را داخل فایل nginx.conf وارد کنید.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

فعالسازی Gzip روی IIS

اگر از وب سرور IIS استفده می کنید دو نوع مختلف فشرده سازی وجود دارد، ثابت و پویا البته ما توصیه می کنیم برای فعالسازی به مستندات مایکروسافت مراجعه کنید.

منبع: کینستا