افزونه Gzip چیست و چطور بر روی وردپرس نصب می شود؟

به عنوان مدیر یک وبسایت، قطعا به اهمیت سرعت سایت و بارگذاری صفحات آن پی برده اید. قطعا سرعت سایت تأثیر بسیار زیادی بر نرخ پرش یا Bounce Rate، تجربه کاربری و همچنین رتبه شما در موتورهای جستجو (به عنوان یکی از فاکتورهای تأثیر گذار در رتبه ی سایت) دارد. حقیقتا سرعت سایت بیش از گذشته مهم شده است و چنان تأثیری دارد که اگر سایت شما 1 ثانیه زودتر نسبت به رقیبتان برای کاربر نمایش داده شود، احتمال آنکه آن کاربر رقیبتان را بخواهد به این دلیل به شما ترجیح دهد کاهش می یابد.

میدانید خود من هم معمولا سایت هایی که خیلی دیر بارگذاری می شوند را معمولا می بندم و به سراغ دیگر گزینه های گوگل می روم. شاید خدمات آن سایت بهتر از رقیبش باشد ولی سرعت پایین آن باعث شد تا من حتی سایت او را ندیده قضاوت کنم و در ذهن خود بگویم اینکه چنین سرعتی دارد معلوم نیست خدماتش چگونه است.

اگر زیاد با کامپیوتر کار می کنید قطعا با فشرده سازی و نرم افزار Zip Archive آشنا هستید. نرم افزاری برای کاهش حجم فایل ها که انتقال فایل ها را آسان می کند. همین راه حل برای وبسایت ها هم وجود دارد، حال این سایت با وردپرس ساخته شده باشد و یا با لاراول کد نویسی شده باشد به هرحال فرقی نمی کند و برای استفاده از آن دلیل خوبی داریم. وقتی حجم فایل های شما پایین تر باشد، کاربر سریع تر می تواند آنها را دانلود کند و در نتیجه زودتر می تواند سایت شما را مشاهده کند.

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

فکر می کنم به اندازه کافی دلیل برای فشرده سازی صفحات سایت گفتیم. اینطور نیست؟ پس همراه من باشید تا ببینیم چطور می توانیم صفحات سایتمان را Compress کنیم.

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

فشرده سازی یعنی کاهش حجم فایل ها بوسیله ی الگوریتم هایی مشخص برای نقل و انتقال راحت تر آنها. اما فشرده سازی چطور کار می کند؟

ساختار ساده یک وبسایت

همانطور که می دانید اکثر سایت های مدرن امروزی شامل چندین فایل HTML،CSS و Javascript هستند و با تلفیق این فایل ها با یکدیگر ساخته شده اند و در واقعیت این فایل ها جز یک فایل متنی نیستند. زمانی که مرورگر شما درخواست یک صفحه از سرور را دارد مثل https://wikidemy.ir/index.html این مکالمه کوتاه بین آنها اتفاق می افتد:

1. مرورگر: لطفا صفحه ی /index.html را در اختیار من قرار بده
2. سرور: باشه، اجازه بده ببینم چنین صفحه ای وجود دارد …
3. سرور: پیداش کردم! پاسخ درخواست شما کد 200 است و من آن فایل را برای شما ارسال می کنم.
4. مرورگر: 100 کیلوبایت! اوه … صبر می کنیم … صبر می کنیم … و بالاخره بارگذاری شد.

البته که این مکالمات در هدر ها و پروتکل ها خیلی رسمی تر از مکالمه ی بالا هستند:).

اما اینکه کار کرد و صفحه نیز در انتها بارگذاری شد؟!

پس مشکل چیست؟

بله، سیستم کار می کند اما نه بهترین حالت. 100 کیلوبایت شامل متون خیلی زیادی است و بطور صریح باید بگویم یک فایل HTML دارای عبارات زائدی نیز هست. هر یک از تگ های html دارای تگ پایانی هستند که به تعداد خیلی زیاد تکرار شده و اینها همان عبارات زائد هستند. ولی هرکاری هم بخواهیم انجام دهیم نمی توانیم متن های داخل فایل HTML را بشکنیم.

پس راه حل این مشکل بزرگ چیست؟ فشرده سازی.

اگر ما بتوانیم یک فایل فشرده و دارای پسوند .Zip را به جای فایل اصلی (index.html) به سمت مرورگر ارسال کنیم (index.html.zip) آن موقع می توانیم پهنای باند کمتری را استفاده کنیم و زمان دانلود فایل ها را نیز کاهش دهیم. مرورگر می تواند به خوبی فایل Zip را از حالت فشرده خارج کند، آن را بخواند و سپس به کاربر نمایش دهد و چون سرعت بارگذاری در این حالت بالاست پس کاربر هم خوشحال می شود. احتمالا در این حالت مکالمه ای که بین مرورگر و سرور رخ می دهد به اینگونه است:

1. مرورگر: می توانی فایل /index.html را در اختیار من قرار بدهی؟ البته من نسخه ی فشرده شده را میخواهم البته اگر آن را در دسترس داری.
2. سرور: باشه، اجازه بده ببینم چنین صفحه ای وجود دارد … بله، چه خوب که صفحه ی فشرده را میخواهی.
3. سرور: پیداش کردم! پاسخ درخواست شما کد 200 است و من آن فایل را بعد از فشرده سازی برای شما ارسال می کنم.
4. مرورگر: عالیه.10 کیلوبایت! من اون از حالت فشرده خارج می کنم و به کاربر نمایش میدم.

یک فرمول خیلی ساده. فایل کم حجم = دانلود سریع تر = کاربر خوشحال

باور نمی کنید؟ ولی سایت گوگل با فشرده سازی توانسته حجم صفحه اصلی گوگل را از 228 کیلوبایت به 65 کیلوبایت کاهش دهد.

حالا که فهمیدیم فشرده سازی چیست و چطور کار می کند بیایید آن را روی وبسایت خود نصب کنیم. ما در این مقاله میخواهیم به شما بگوییم چطور از Gzip برای فشرده سازی فایل های وبسایتتان استفاده کنید. ابزار های دیگری نیز برای فشرده سازی مثل Brotli هم وجود دارد که سازنده ی آن گوگل است ولی توضیح آن را به زمان دیگری موکول می کنیم.

افزونه Gzip چیست و چه کاربردی دارد؟

راه های زیادی برای افزایش سرعت بارگذاری صفحات سایت وجود دارد ولی یکی از ساده ترین و سریع ترین راه های ممکن برای افزایش سرعت سایت، استفاده از Gzip است. افزونه Gzip یک نرم افزار بوده که باعث فشرده سازی و Uncompress کردن فایل ها می شود.این نرم افزار سمت سرور نصب می شود و خوب است بدانید همه ی مرورگرهای امروزی از آن پشتیبانی می کنند. Gzip حجم فایل های HTML,CSS و Js را تا حدود 70 درصد کاهش می دهد. اما این نرم افزار باعث کاهش حجم تصاویر نمی شود. برای کاهش حجم تصاویر نیز راه هایی وجود دارد ولی در محدوده ی این مقاله نیست.

هنگامی که مرورگر به سرور درخواست صفحه ای را می دهد ابتدا جستجو می کند که Gzip فعال هست یا خیر و این کار را بواسطه content-encoding: gzip در Header دریافتی از سرور انجام می دهد. اگر این مورد فعال بود آنوقت نسخه ی فشرده را استفاده می کند و اگر نبود نسخه ی عادی را بارگذاری می کند. اگر شما از Gzip استفاده نکنید احتمالا در سایت هایی که تست سرعت سایت انجام می دهند با پیغام خطا روبرو خواهید شد. پس خیلی مهم است که شما Gzip را برای سایتتان نصب کنید که در این مقاله نیز به شما طریقه ی نصب آن را برای همه ی سایت ها حتی وردپرس خواهیم گفت.

استفاده سایت Gtmetrix از Gzip برای افزایش سرعت سایت

چطور بفهمیم که Gzip بر روی سایت ما فعال است یا خیر؟

امروزه استفاده از Gzip بسیار رایج بوده و در اکثر هاست ها فعال و قابل استفاده هستند. در مورد پشتیبانی مرورگرها از این تکنولوژی نیز نگران نباشید چون بیش از 17 سال است که آنها از این تکنولوژی استفاده می کنند. در ادامه لیستی از مرورگرها را برای شما قرار داده ایم که در هدر دریافتی از سمت سرور پاسخ “content-encoding: gzip” به راحتی قبول می کنند:

• Internet Explorer 5.5+ (July 2000)
• Opera 5+ (June 2000)
• Firefox 0.9.5+ (October 2001)
• Chrome (soon after launch in 2008)
• Safari (soon after first launch in 2003)

اگر شما از هاست های وردپرسی استفاده می کنید باید حواستان باشد که این ویژگی در هاستتان فعال باشد زیرا اغلب شرکت ها از یاد میبرند که این ویژگی را فعال کنند. برای چک کردن فعال بودن Gzip در هاست می توانید از طریق زیر این کار را انجام دهید.

استفاده از ابزار Check GZIP Compression

یکی از راه های بررسی فعال بودن ویژگی Gzip بر روی سایتتان استفاده از ابزار رایگان Check GZIP compression می باشد. وارد سایت فوق شوید و آدرس سایت خود را وارد کنید. این ابزار به شما درصدی را اعلام میکند که مفهوم آن این است: چند درصد از حجم سایت شما بواسطه استفاده از Gzip کاهش پیدا کرده است. یا اینکه به شما خطایی مبنی بر استفاده از Gzip خواهد داد. مثلا در تست زیر 66.9% از حجم سایت بواسطه استفاده از Gzip کاهش پیدا کرده است.

اگر یادتان باشد، گفتیم که Gzip بر روی فایل های استاتیک مثل css و js کار می کند. ولی اگر ما از CDN استفاده کنیم بازهم این فایل ها توسط Gzip فشرده خواهد شد؟ خوشبختانه در اکثر CDN ها معتبر دنیا و ایران مثل ابرآروان Gzip را به راحتی پشتیبانی می کنند. برای اینکه متوجه شوید CDN شما از Gzip پشتیبانی می کند یا خیر، کافی است یکی از فایل های Css یا Js سایت خود را در ابزار فوق بررسی کنید. اگر مثل پیام بالا را برای فایل خود دریافت کردید پس مطمئن باشید که این مورد در CDN فعال است.

چطور Gzip را برای وبسایت خود فعال کنیم؟

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

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

اولین راه برای فعال کردن Gzip در سایت های وردپرسی استفاده از پلاگین های کش و افزایش سرعت سایتی است که از Gzip پشتیبانی می کنند. مثلا افزونه WP_Rocket قوانین Gzip را با استفاده از ماژول mod_deflate بطور خودکار در فایل .htaccess قرار می دهد. افزونه W3 Total Cache نیز به شما این امکان را می دهد که در بخش performance این ویژگی را برای سایت خود فعال کنید. اما این ها افزونه هستند و اگر دسترسی مورد نیاز برای  ویرایش فایل های وب سرور را نداشته باشند نمی توانند کد های مورد نظر را به فایل .htaccess اضافه کنند. پس اینجا خودتان باید این کدها را به این فایل اضافه کنید.

فعال سازی GZIP بر روی Apache

دومین راه برای فعال سازی Gzip، ویرایش فایل .htaccess است. اکثر هاست های اشتراکی از Apache استفاده می کنند، که در آن به آسانی می توانید کد را در پایین فایل .htaccess خود قرار دهید. شما فایل .htaccess را می توانید از طریق پوشه روت سایت وردپرسی خود پیدا کنید.

توجه: اطمینان حاصل کنید که mod_filter بر روی سرور شما لود شده باشد، در غیر این صورت، addOutputFilterByType کار نخواهد کرد و ممکن است یاعث ایجاد خطای 500 شود. پیشنهاد می کنیم که اگر با کد زیر مواجه شدید، لاگ های ارور خود را چک کنید.

<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.config اضافه کنید.

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 استفاده می کنید، دو نوع فشرده سازی وجود دارد، فشرده سازی استاتیک و فشرده یازی داینامیک. به شما پیشنها می کنم راهنمای مایکروسافت برای فعال کردن فشرده سازی  را بخوانید.