آموزش فعال کردن Gzip برای افزایش سرعت سایت

فشرده‌سازی Gzip می‌تواند حجم فایل‌های CSS، JS و HTML را تا 70٪ کاهش دهد. این مقاله دو روش ساده ویرایش فایل htaccess و استفاده از افزونه‌های کش را معرفی می‌کند تا فوراً فشرده‌سازی Gzip را در سایت وردپرسی خود فعال کنید و سرعت بارگذاری را بهبود بخشید.

میثم حیدری (مدیر)

بروزرسانی مقاله: 22 خرداد، 1404

0

دسته‌بندی: آموزش وردپرس و افزونه‌ها،عمومی،مقالات افزایش سرعت سایت

فعال کردن Gzip (فشرده سازی متن) برای افزایش سرعت سایت

آموزش فعال کردن Gzip برای افزایش سرعت سایت یا همان فعال کردن Gzip (فشرده‌سازی متن) در وردپرس به شما کمک می‌کند تا سرعت بارگذاری وبسایت را افزایش دهید و موارد خاص در گزارش‌های PageSpeed Insights را برطرف کنید. این مقاله همه چیزهایی را که باید در مورد فشرده سازی متن بدانید، به شما آموزش می‌دهد.

فعال‌سازی فشرده‌سازی متن در وردپرس یکی از بهترین تکنیک‌های بهینه‌سازی عملکرد برای حفظ سرعت بارگذاری سریع سایت شما است. زمانی که آزمون سرعت را در Google PageSpeed Insights اجرا می‌کنید، ممکن است ببینید که «فعال‌سازی فشرده‌سازی متن» یکی از توصیه‌هایی است که از Lighthouse ارائه می‌شود.

فعال کردن فشرده سازی متن برای افزایش سرعت سایت

در این مقاله، روش کار فشرده‌سازی داده‌ها، فعال‌سازی آن در سایت وردپرس و نحوه بررسی فعال بودن آن شرح داده می‌شود.

آنچه در این مقاله می خوانید :

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

فشرده‌سازی داده فرایندی است که طی آن اندازه فایل‌ها قبل از ارسال به مرورگرهای کاربران، با استفاده از الگوریتم‌هایی مانند LZ77 و هافمن، کاهش می‌یابد. روش‌های مختلفی مانند GZIP یا Brotli برای فشرده‌سازی وجود دارد، که نقش بسیار مهمی در نمایش میلیاردها صفحه وب به کاربران در هر روز دارد.

به‌عنوان مثال، یک فایل HTML فشرده شده قبل و بعد از فرآیند فشرده‌سازی اینگونه به نظر می‌رسد:

قبل از فشرده‌سازی: ۳۲۹ کاراکتر

&lt;html>
&lt;head>
    &lt;style>
    /* my-banner for desktop only */
    .my-banner { font-size: 150% }
    .my-banner { width: 75% }
&lt;/style>
&lt;/head>
&lt;body>
    &lt;!-- my banner START -->
    &lt;div>...&lt;/div>
    &lt;!-- my banner END -->
    &lt;script>
    my Scripts(); // just some scripts used on the web page
    &lt;/script>
&lt;/body>
&lt;/html>

با فشرده‌سازیGZIP: ۱۴۲ کاراکتر

&lt;html>&lt;head>&lt;style>.my-banner{font-size:160%;width:65%}&lt;/style>&lt;/head>&lt;body>&lt;div>...&lt;/div>&lt;script>myScripts();&lt;/script>&lt;/body>&lt;/html>

بیایید به بررسی دو نوع الگوریتم فشرده‌سازی که توسط Lighthouse شناسایی شده‌اند، بپردازیم:

فشرده‌سازی GZIP
فشرده‌سازی Brotli

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

GZIP یک الگوریتم فشرده‌سازی متن‌باز است که کاراکترهای تکراری موجود در فایل‌های متنی شما را شناسایی و حذف می‌کند. دلیل اصلی GZIP فشرده سازی صفحات وب در سمت سرور و بازگرداندن حالت اولیه آن‌ها در مرورگر است. هدف نهایی این کار کاهش اندازه فایل‌های سایت (HTML، جاوا اسکریپت وCSS) و در نتیجه افزایش سرعت بارگذاری سایت می‌باشد.

طبق گزارش W3Techs.com، حدود ۸۸.۲٪ از وب‌سایت‌های موجود در اینترنت از فشرده‌سازی استفاده کرده و ۵۲.۷٪ از تمام وب‌سایت‌ها از فشرده سازی GZIP بهره می‌برند.

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

Brotli نیز مانند GZIP یک الگوریتم فشرده سازی است که توسط گوگل توسعه یافته و برای فشرده سازی متن صفحات وب به کار می‌رود. البته با این تفاوت که Brotli از ابتدا برای فشرده سازی جریان‌های داده در حین پردازش طراحی شده است. به‌طورکلی،Brotli در مقایسه با GZIP در فشرده سازی محتوا در سرور و بازگرداندن آن در مرورگر سریع‌تر عمل می‌کند.

سفارش خدمات افزایش سرعت سایت وردپرسی (تضمینی)

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

این فرایند در هر صفحه وب به یک روش انجام می‌شود. با کمک الگوریتم‌های LZ77 و کدگذاری هافمن، کل این سیستم را می‌توان به ۵ مرحله اصلی تقسیم کرد:

هنگامی‌که یک سرور، درخواستی برای یک صفحه وب دریافت می‌کند، ابتدا هدر، درخواست را بررسی می‌کند تا ببیند آیا مرورگر از GZIP پشتیبانی می‌کند یا خیر.
اگر مرورگر از GZIP پشتیبانی کند: سرور ابتدا کدهای HTML صفحه را تولید کرده و سپس آن‌ها را فشرده می‌کند.
فشرده‌سازی GZIP، داده‌ها را به یک جریان فشرده تبدیل می‌کند که حجم بسیار کمتری نسبت به داده‌های اولیه دارد. سپس این جریان فشرده به مرورگر ارسال می‌شود.
مرورگر پس از دریافت این جریان فشرده، آن را باز کرده و صفحه وب را نمایش می‌دهد.
اگر مرورگر از GZIP پشتیبانی نکند: سرور به جای ارسال داده‌های فشرده، نسخه اصلی و فشرده‌نشده صفحه را ارسال می‌کند.

برای درک بهتر نحوه کار فشرده‌سازی GZIP، بیایید نگاهی دقیق‌تر به نحوه عملکرد الگوریتم‌های LZ77 و کدگذاری هافمن بیندازیم.

ابتدا، فشرده‌سازی GZIP الگوریتم LZ77 را روی بخش کوچکی از داده‌های خام اجرا کرده تا داده‌های تکراری را حذف کند:

سپس فشرده‌ساز GZIP از الگوریتم کدگذاری هافمن برای فشرده‌سازی بیشتر استفاده می‌کند. کاراکترهایی که بیشتر تکرار می‌شوند کمترین تعداد بیت را دریافت می‌کنند، درحالی‌که کاراکترهای کمتر تکرار شده، بیشترین تعداد بیت را دریافت خواهند کرد:

در نهایت، اگر می‌خواهید یک مثال واقعی ببینید، Kinsta توضیح جالبی با کلمه «Bookkeeper» ارائه داده است.

این کلمه ۱۰ کاراکتر دارد، اما تنها ۶ کاراکتر منحصربه‌فرد (۲ بار “o”، ۳ بار “e” و غیره) در آن به چشم می‌خورد.

الگوریتم کدگذاری هافمن، کل رشته متن را بدون هیچ‌گونه حذف اطلاعاتی، فشرده می‌کند. این کار با ایجاد یک درخت دودویی انجام می‌گیرد که در آن هر حرف منحصربه‌فرد به‌عنوان یک برگ در نظر گرفته می‌شود. این الگوریتم به هر کاراکتر بر اساس فراوانی آن یک کد دودویی اختصاص می‌دهد.

نتیجه :GZIP تقریباً ۷۰٪ از حافظه را برای ما ذخیره کرد. با تبدیل هافمن، اندازه از ۸۰ بیت به ۲۵ بیت کاهش یافت.

تأثیر فشرده‌سازی داده‌ها بر عملکرد وب‌سایت

فشرده‌سازی داده‌ها تأثیر مثبتی بر عملکرد وب‌سایت وردپرسی شما دارد. فعال کردن فشرده‌سازی متن به شما اجازه می‌دهد تا منابع متنی کوچک‌تری را به کاربران خود ارائه دهید. فایل‌های کوچک‌تر به معنای دانلود سریع‌تر هستند. در نتیجه، بازدیدکنندگان خوشحال خواهند شد زیرا مجبور نیستند برای مشاهده محتوای صفحه شما منتظر بمانند.

یک مطالعه در وب.دِو نشان می‌دهد که فشرده‌سازی GZIP چه تأثیری بر محبوب‌ترین فریم‌ورک‌های جاوا اسکریپت و CSS دارد. نتایج بسیار چشمگیر است: فشرده‌سازی GZIP می‌تواند تا ۶۵ تا ۸۸ درصد صرفه‌جویی داشته باشد.

تأثیر فشرده‌سازی داده‌ها بر عملکرد وب‌سایت

تأثیر فشرده‌سازی GZIP بر FID ، LCP و FCP

فشرده‌سازی داده‌ها همچنین بر برخی از معیارهای اصلی وب (Core Web Vitals) تأثیر می‌گذارد.

این معیارها، سه شاخص کلیدی هستند که توسط گوگل برای اندازه‌گیری عملکرد و تجربه کلی کاربری یک صفحه وب توسعه یافته‌اند. از جمله آن‌ها می‌توان به بزرگ‌ترین عنصر محتوای رنگ‌شده (Largest Contentful Paint یا LCP)، تأخیر در اولین ورودی (First Input Delay یاFID) و جابه‌جایی تجمعی طرح‌بندی (Cumulative Layout Shift یا CLS) اشاره کرد.

معیار عملکرد دیگری که ارزش ذکر کردن دارد، اولین رنگ‌آمیزی محتوا (First Contentful Paint یا FCP) است. در پاراگراف بعدی متوجه خواهید شد که چرا.

ابتدا، بیایید درک کنیم که این معیارهای عملکرد برای چه چیزی هستند.

LCP مدت زمانی را که طول می‌کشد تا عناصر اصلی صفحه بارگذاری شوند، اندازه‌گیری می‌کند.

FCP مربوط به اولین نمایش هر نوع محتوای صفحه است و FID به واکنش‌پذیری مرورگر نسبت به اقدام کاربر اشاره دارد.

حال ممکن است بپرسید ارتباط بین این سه شاخص و فشرده‌سازی GZIP چیست. خوب، این شاخص‌ها زمان در دسترس بودن داده‌ها برای کاربر را اندازه‌گیری می‌کنند؛ بنابراین، اگر داده‌ها را فشرده کنید، فایل‌های سبک‌تری خواهید داشت که سریع‌تر برای کاربر در دسترس هستند.

در واقع، فشرده‌سازی GZIP با ارائه فایل‌های کوچک‌تر به مرورگر، امتیازهای FID ،FCP و LCP شما را افزایش می‌دهد. در نتیجه هنگامی‌که از فشرده‌سازی استفاده می‌کنید، احتمال اینکه این شاخص‌ها در محدوده سبز مربوط به خود قرار بگیرند، بیشتر خواهد بود.

تأثیر فشرده‌سازی داده‌ها بر امتیازهای عملکرد Lighthouse

الگوریتم فشرده‌سازی GZIP می‌تواند اندازه منابع را تا ۹۰٪ کاهش دهد! در نتیجه، زمان بارگذاری صفحه را تا ۵۰٪ کاهش می‌دهید و می‌توانید آزمون خاص PageSpeed Insights را با موفقیت پشت سر بگذارید.

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

قبل از فعال کردن GZIP در سایت خود، بهتر است بررسی کنید که آیا قبلاً فعال شده است یا خیر. روش‌های مختلفی برای بررسی پشتیبانی هاست شما از فشرده‌سازی GZIP وجود دارد. در ادامه، چهار شیوه را بررسی خواهیم کرد:

تست‌های سرعت: ابزارهایی مانند PageSpeed Insights (PSI) و GTmetrix می‌توانند به شما بگویند که آیا GZIP در سایت شما فعال است یا خیر.
ابزارهای آنلاین بررسی فشرده‌سازی GZIP: ابزارهای آنلاین بسیاری وجود دارند که به شما اجازه می‌دهند آدرس وب‌سایت خود را وارد کرده و بررسی کنید که آیا فشرده‌سازی GZIP فعال است یا خیر.
بررسی هدر پاسخ: در ابزارهای توسعه‌دهنده مرورگر می‌توانید هدر پاسخ “content-encoding: gzip” را جستجو کنید. وجود این هدر نشان‌دهنده فعال بودن GZIP است.
ایجاد فایل :phpinfo با ایجاد یک فایل phpinfo می‌توانید اطلاعات دقیقی در مورد تنظیمات سرور خود، از جمله فعال بودنGZIP، به دست آورید.

در ادامه، هر یک از این روش‌ها را به طور مفصل‌تر بررسی خواهیم کرد.

۱. تست‌های سرعت با استفاده از Lighthouse) PSI ، GTmetrix و غیره)

برای بررسی فعال بودن و کارکرد صحیح فشرده‌سازی GZIP، می‌توانید از ابزارهای ارزیابی عملکرد مانند PageSpeed Insights یا GTmetrix استفاده کنید. در بخش‌های ارزیابی این ابزارها، اگر برخی از محتوای متنی فشرده نشده باشد، هشدار زیر ظاهر خواهد شد:

Audit section on GTmetrix

Audit section on PSI

۲. ابزار آنلاین بررسی فشرده‌سازی GZIP

ساده‌ترین راه برای بررسی فعال بودن GZIP در سایت شما این است که به وب‌سایت‌هایی مانند Giftofspeed یا HTTP Compression Test مراجعه کرده و سایت خود را اسکن کنید. هر دو ابزار بررسی می‌کنند که آیا سرور وب شما هدر HTTP GZIP را به مرورگرهای بازدیدکنندگان شما ارسال می‌کند یا نه.

کافی است URL خود را وارد کرده و روی دکمه “Test URL” کلیک کنید تا فرایند تأیید آغاز شود.

۳. بررسی هدر پاسخ “content-encoding: gzip” در ابزارهای توسعه‌دهنده

سومین روش برای بررسی اینکه آیا یک وب‌سایت محتوای فشرده‌سازی شده با GZIP را ارائه می‌دهد، تأیید هدر پاسخ HTTP “content-encoding: gzip” از طریق ابزارهای توسعه‌دهنده است.

برای انجام این کار، ابزار توسعه‌دهنده (Dev Tools) خود را باز کرده و به بخش “network” مراجعه نمایید. سپس به قسمت “Response Headers” بروید. اگر در ردیف content-encoding، عبارت “GZIP” یا “Brotli” را مشاهده کنید، به این معنی است که محتوای متنی شما فشرده شده است.

بررسی هدر پاسخ “content-encoding: gzip” در inspect مرورگر

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

فعال کردن فشرده‌سازی متن در وردپرس به معنای استفاده از الگوریتم‌های GZIP یا Brotli برای داده‌های متنی شما است تا فایل‌های کوچک‌تر ایجاد شده و عملکرد سایت بهبود یابد.

اگر هنوز فشرده‌سازی GZIP فعال نشده است، می‌توانید از روش‌های مختلفی استفاده کنید:

از ارائه‌دهنده هاست خود بخواهید این قابلیت را برای شما فعال کند.
یک شبکه تحویل محتوا (CDN) تنظیم کنید.
این کار را به‌صورت دستی روی وب سروری که سایت شما را میزبانی می‌کند انجام دهید.

روش اول: درخواست از هاستینگ

یکی از ساده‌ترین روش‌ها برای فعال سازی Gzip و فشرده سازی Brotli در سایت شما، اطمینان از فعال بودن آن به‌صورت پیش‌فرض توسط هاستینگ است. در حال حاضر بسیاری از شرکت های ارائه دهنده هاستینگ، بصورت پیشفرض فشرده‌سازی GZIP را فعال کرده اند. با اینحال در صورت فعال نبود، با شرکت هاست خود در تماس باشید.

روش دوم: استفاده از CDN (شبکه تحویل محتوا)

استفاده از یک شبکه تحویل محتوا (CDN) مانند Cloudflare یکی دیگر از راه‌های آسان برای فعال کردن GZIP است. CDNها به طور خودکار فشرده‌سازی GZIP را برای تمام داده‌های شما فعال می‌کنند. CDN به طور خودکار فایل‌های JS، HTML، CSS و فایل‌های متنی را فشرده می‌کند.

همچنین ابر آروان، یکی دیگر از CDN های محبوب ایرانی می باشد.

روش سوم: فعال کردن فشرده‌سازی GZIP در آپاچی

برای فعال‌سازی فشرده‌سازی GZIP روی سرورهای آپاچی Apache، باید از ماژول‌های mod_filter و mod_deflate استفاده کرده و تنظیمات مربوطه را انجام دهید. برای راهنمایی آپاچی جهت فشرده‌سازی داده‌ها پیش از ارسال آن به مرورگر، می‌توانید از دستورالعمل‌ها (directives) استفاده نمایید.

دو حالت برای ویرایش تنظیمات سرور Apache وجود دارد که به سطح دسترسی شما مرتبط است:

حالت :A اگر به فایل پیکربندی اصلی سرور (معمولاً به نام httpd.conf) دسترسی دارید، عالی است! می‌توانید از آن برای تنظیم Apache استفاده کنید.

حالت :B اگر به فایل httpd.conf دسترسی ندارید، باید Apache را از طریق فایل htaccess پیکربندی کنید.

در اکثر موارد، تنها به فایل htaccess دسترسی خواهید داشت؛ بنابراین آموزش ما برای حالت B (فعال‌سازی GZIP از طریق فایل htaccess) خواهد بود. مطمئن شوید که کد مربوطه را بعد از سایر دستورالعمل‌های موجود در فایل htaccess اضافه کنید.

&lt;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 ancient 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 &lt;/IfModule>

روش چهارم: فعال‌سازی فشرده‌سازی GZIP یا Brotli در سرور وب IIS

توجه داشته باشید که سرور وب IIS که توسط مایکروسافت ایجاد شده است، کاملاً با وردپرس سازگار نیست، بنابراین بسیار نادر است که سایت وردپرسی از این فناوری استفاده کند. بااین‌حال، اگر از این تنظیمات استفاده می‌کنید، لطفاً به مستندات رسمی مایکروسافت مراجعه نمایید.

چگونه فشرده‌سازی داده‌ها را در وردپرس فعال کنیم (استفاده از افزونه)

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

بیشتر پلاگین‌های کش و عملکرد وردپرس دارای قابلیت فشرده‌سازی GZIP هستند. این پلاگین‌ها به‌طور پیش‌فرض آن را فعال کرده و یا گزینه‌ای را در بخش تنظیمات کش ارائه می‌دهند.

به‌عنوان‌مثال، پلاگین WP Rocket را در نظر بگیریم که یکی از بهترین پلاگین‌های کش برای وردپرس محسوب می‌شود.

بهترین افزونه افزایش سرعت وردپرس

اگر سایت وردپرس خود را روی سرور Apache یا Litespeed میزبانی می‌کنید، WP Rocket به‌طور خودکار به شما امکان می‌دهد که قوانین فشرده‌سازی GZIP را اضافه نمایید. این پلاگین با فعال‌سازی خود، ماژول mod_deflate را به فایل htaccess اضافه کرده و فشرده‌سازی GZIP را فعال می‌کند.

علاوه بر این، Lighthouse استفاده از پلاگینی مانند WP Rocket برای فعال‌سازی فشرده‌سازی متن را توصیه می‌کند:

افزونه راکت تنها فشرده‌سازی GZIP را فعال نمی‌کند.

این پلاگین همچنین به بهبود Core Web Vitals و عملکرد کلی وب‌سایت شما کمک خواهد کرد. از ویژگی‌های قدرتمند آن می‌توان به بارگذاری تنبل (lazy-loading)، حذف CSSهای غیرضروری، فشرده‌سازی CSS و JS، تاخیر در بارگذاری JSهای غیرضروری و بسیاری موارد دیگر اشاره کرد!

جمع بندی نهایی

حالا باید متوجه شده باشید که چرا فشرده‌سازی داده‌ها و فعال کردن GZIP برای سرعت وب و تجربه کاربری اهمیت دارد.

فشرده‌سازی داده‌ها به‌صورت دستی می‌تواند چالش‌برانگیز باشد، اما با استفاده از افزونه‌ های کشینگ، این تکنیک بهینه‌سازی مبتنی بر متن، بسیار آسان می‌شود. برای مثال استفاده از WP Rocket و تمام ویژگی‌های بهینه‌سازی آن، می‌توانید نمره Core Web Vitals و امتیاز عملکرد سایت وردپرس خود را بهبود ببخشید.

نکته مهم: در نظر داشته باشید نمره Core Web Vitals تنها مربوط به فشرده سازی کد های CSS و JS نمی باشد و برای داشتن Performance عالی، نیاز به بهینه سازی های مختلف در سایت می باشد.

به منظور داشتن سرعت عالی و Performance مطلوب، از خدمات تخصصی افزایش سرعت سایت استفاده نمایید.