افزایش سرعت بارگذاری سایت با GZIP

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

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

شاید خیلی‌ها هنوز ندانند که شیوه عمل ترفند GZIP و نحوه فشرده کردن صفحه به چه صورت انجام می‌شود. قبل از آنکه به سراغ معرفی این روش بپردازیم اجازه دهید تا با بیان یک مثال تصویری، نحوه انجام این کار را عنوان کنیم. هنگامی که فایل صفحه ای مانند http://weblogina.com/index.php را از مرورگر درخواست می کنید، اطلاعاتی بین مرورگر و سایت مورد نظر رد و بدل می‌شود که به طور مختصر شبیه به تصویر بالا است:
۱. مرورگر: سلام! لطفا فایل index.php را به من بده
۲. سرور: خوب! اجازه بده تا فایل مورد نظر را پیدا کنم
۳. سرور: پیدا کردم! این کد پاسخ شماست (200 OK). من فایل را برایتان می‌فرستم
۴. مرورگر: 100 کیلوبایت؟ اوه چقدر زیاد! انتظار... انتظار... بسیار خوب، بارگزاری شد
این یک مکالمه بسیار ساده (و نه کامل) از آن چیزی است که هنگام درخواست مشاهده صفحه از سوی مرورگر شما با سرور سایت انجام می‌گیرد.
کجای کار مشکل دارد؟

درواقع مشکل کار همین حجم بالای محتوای صفحه است. کدها و تگ‌های به‌کار برده شده و تکراری موجود در صفحات، باعث سنگین شدن فایل آن‌ها می‌شود و این امر، بارگزاری صفحه را برای کاربران آن سایت به تاخیر می‌اندازد. خوب حالا سوال اینجاست که چطور می‌توان بدون دست بردن به کد و محتوای سایت، حجم صفحات را کاهش داد؟
تصور کنید اگر یک فایل فشرده شده (ZIP) از صفحه درخواستی کاربر را، به جای صفحه کدهای معمول سایت‌تان برای مرورگر وی بفرستید، می‌توانید تا حد زیادی از پهنای باند مصرفی سرورتان را کاهش داده و از طرفی سرعت دانلود صفحه مورد نظر را برای او به میزان چشم‌گیری افزایش دهید. این دقیقا همان کاری است که GZIP برای شما می‌کند!


ضمیمه 64682
. مرورگر: سلام! می‌توانم index.php را دریافت کنم؟ اگر نسخه فشرده دارید لطفا آن‌را به من بدهید.
۲. سرور: اجازه بدهید فایل را پیدا کنم. بله، همین‌جاست! نسخه فشرده می‌خواهید؟ عالی است.
۳. سرور: من index.php را پیدا کردم (200 OK). فایل را فشرده و برای‌تان ارسال می‌کنم.
۴. مرورگر: فوق‌العاده است. فقط ۱۰ کیلوبایت! آن‌را از حالت فشرده خارج و به کاربر نمایش خواهم داد. در واقع هنگامی که مرورگر به سرور سایت مراجعه می‌کند، با ارسال پیامی، از سرور درخواست ارسال فایل فشرده را می‌کند. اگر این پیام از سوی سرور پاسخ داده شد (به عبارتی دیگر، اگر سایت مورد نظر از قابلیت gzip یا deflate استفاده کند)، فایل مورد نظر برای مرورگر ارسال خواهد شد. در غیر این‌صورت، همان روال عادی بارگزاری صفحه طی می‌شود.
به‌طور ساده برای فشرده کردن فایل‌های متنی خود می‌توانید از ماژول deflate آپاچی استفاده کنید. برای این کار کافی است کدهای زیر را در فایل .htaccess سایت خود کپی نمایید.

کد HTML:

---

<ifModule mod_deflate.c>
  <filesMatch "\.(css|js|x?html?|php)$">
    SetOutputFilter DEFLATE
  </filesMatch>
</ifModule>

---

این کد، فایل‌های CSS، JS، HTML، XHTML و PHP سایت شما را gzip می‌کند.
کد زیر نیز یک نمونه بسیار خوب برای فشرده سازی فایل‌های مورد اشاره روی سایت شما و نیز Cache کردن دیگر فایل‌های استاتیک است

کد HTML:

---

# BEGIN Compress text files
<ifModule mod_deflate.c>
  <filesMatch "\.(css|js|x?html?|php)$">
    SetOutputFilter DEFLATE
  </filesMatch>
</ifModule>
# END Compress text files
 
# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
 
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "max-age=216000, private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "max-age=600, private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers
 
# BEGIN Turn ETags Off
<ifModule mod_headers.c>
  Header unset ETag
</ifModule>
FileETag None
# END Turn ETags Off
 
# BEGIN Remove Last-Modified Header
<ifModule mod_headers.c>
  Header unset Last-Modified
</ifModule>
# END Remove Last-Modified Header


---

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

اين فشرده كردن بنظرم روي صفحاتي كه متن زيادي دارن هم خيلي مفيد باشه؛ چون خيلي صفحات هستن كه حجم عمده يا حداقل بخش قابل توجهي از حجم اونها نوشته هاي صفحه هست تا چيز ديگه. فقط بحث چنتا تگ HTML و CSS نيست.
البته چيزهايي مثل تصاوير و فايلهاي فلش و صوت و ويدئو و غيره رو با اين روش فشرده نميكنن، چون اين نوع فايلها تقريبا در تمام موارد از قبل با الگوريتم هاي ديگري فشرده شدن و چندان قابليت فشرده سازي بيشتري ندارن و با اعمال فشرده سازي بيهوده روي اونها، فقط بار پردازشي سرور زياد ميشه. اين مسئله رو در دستور filesMatch "\.(css|js|x?html?|php هم ميبينيم كه فقط فايلهاي غيرفشردهء معمول مثل HTML و CSS و غيره رو براي فشرده سازي انتخاب كرده.
راستي اگر هدرهاي Response خيلي از سايتهاي معروف رو با Add-on هايي كه فايرفاكس داره چك كنيد، متوجه ميشيد كه خيلي از اين سايتها از فشرده سازي استفاده ميكنن. منجمله گوگل.

یه سوال
اینکه ما که برنامه نویس سایت هستیم باید چطوری متوجه بشیم که مرورگر نوعی از فشرده سازی رو پشتیبانی می کنه ؟
منظورم اینه که اطلاعات پشتیبانی مرورگر از فشرده سازی در کدوم متغیر در php قابل دسترسی هست ؟

فکر میکنم الان تمام مرورگرهای معروف از فشرده سازی پشتیبانی میکنن. اما برای جزییاتش میتونید تست کنید! مثلا برای مرورگرهای موبایل بنظرم بد نیست تست کنید. یا اینکه دقیقا چه الگوریتم هایی توسط هر مرورگر پشتیبانی میشن.
این اطلاعات رو مرورگر در یک هدر (Accept-Encoding) به سرور ارسال میکنه.
با کد زیر میتونید محتویات این هدر رو که در Request ارسال میشه مشاهده کنید که در PHP تحت نام HTTP_ACCEPT_ENCODING نشون داده میشه:

<pre>

<?php

print_r($_SERVER);

?>

</pre>

نقل قول:

---

نوشته شده توسط elham1611

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

[/HTML]با امتحان کردن این روش خواهید دید که تا چه اندازه، سرعت بارگزاری صفحات شما تسریع می‌شود. برای بررسی صحت عملکرد gzip سایت خود نیز می‌توانید از این ابزار استفاده نمایید.

---

سلام

میخواستم بدونم چرا برخی از سایت ها مثلا فرضا 80 درصد فشرده و برخی کمتر دلیل این تفاوت فشردگی به نوع کدی که داخل httacess مینویسیم داره یا نه ؟

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

مثلا تو سایت http://www.gidnetwork.com/tools/gzip-test.php

http://www.istgah.com/

با سایت

www.yahoo.com

البته درصد فشرده سازی به نوع الگوریتم و عددی که بعنوان شدت فشرده سازی به بعضی الگوریتمها پاس میشه هم بستگی داره. ولی مهمترین و معمولترین عامل، خود محتوا هست. دو متن مختلف معمولا با درصدهای مختلفی فشرده میشن؛ حالا میخواد از هر الگوریتمی استفاده بشه. هر دو دیتای مختلف، معمولا درصد فشرده سازی مختلفی دارن که البته این اختلاف میتونه از جزیی تا مقدار خیلی زیادی باشه. این بستگی به توزیع و تکراری بودن مقدار بایتهای اون دیتا داره که الگوریتم فشرده سازی میتونه اون رو بیشتر یا کمتر فشرده کنه.
یه مثال میزنم. شما یک فایل در برنامهء Paint ویندوز ایجاد کنید و چنتا خط و دایره و غیره توش بکشید، بعد اون رو با فرمت BMP ذخیره کنید و بعد با یک نرم افزار فشرده سازی اون رو فشرده کنید و ببینید چند درصد فشرده میشه. حالا یک فایل عکس رو، البته با همون سایز، با Paint باز کنید و با فرمت BMP ذخیره کرده و فشرده کنید و ببینید درصد فشرده سازیش چقدر فرق میکنه. درحالیکه هردو فایل BMP قبل از فشرده سازی حجم یکسانی خواهند داشت، ولی درصد فشرده سازی اونها با هم اختلاف خیلی زیادی خواهد داشت.
ضمنا باید توجه داشت که وقتی عدد شدت فشرده سازی رو در الگوریتم هایی که این تنظیم رو دارن زیاد میکنیم، میزان پردازش مورد نیاز و همچنین حافظهء مورد نیاز برای عملیات فشرده سازی، میتونه به نحو قابل توجهی زیاد بشه که این بار CPU و سرور رو افزایش میده، اما اغلب در عمل فشرده سازی بیشتری که بدست میاد چندان زیاد نیست یا حتی ناچیزه و ارزشش رو نداره که چنین پردازشی و مصرف منابعی رو به سیستم تحمیل کنیم.