اهرم ذخیره مرورگر

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

کش مرورگرو Expire Headers چیست؟

استفاده از کش مرورگر و header expire به کم کردن درخواست های Http کمک می کند که این نکته باعث بهترشدن کیفیت بازدید بازدید کنندگانی می شود که مرتب به سایت شما باز می گردند و سایت شما را بیشتر از یکبار مشاهده می کنند . اولین باری که بازدید کننده یک سایت را مشاهده می کند همه عکس ها و سی اس  اس های سایت به علاوه اسکریپت ها در مرورگر بازدید کننده ذخیره می شود که البته به صورت عادی هر بار که کاربر به سایت باز می گردد این کار دوباره اتفاق می افتد وقتی که شما Expire Headers تعریف می کنید به مرورگر کاربر اعلام می کنید عکس ها و سی اس اس های سایت شما برای مدتی تغییر نمی کند به طور مثال یک ماه که به این ترتیب مرورگر متوجه می شود لازم نیست هر بار که وارد سایت شما می شود تا مدت زمان خاصی عکس هاو اسکریپت های شما را مجدادا دانلود کند. اگر کش شده باشد از قسمت کش انها را بازیابی می کند تا زمانی که مدت زمان کش به پایان برسد.

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

چگونه Expire Headers اضافه کنیم؟

 به طور مثال من فایلهای زیر را دارم که مدت زمان زیادی ممکن تغییر نکند و شما هم ممکن است همین ها را داشته باشید.

  • images: jpg, gif, png
  • favicon/ico
  • javascript
  • css

فکر کنید چه فایلهایی دارید و در چه مدت زمانی این فایل ها تغییر نمی کنند یک هفته یک ماه یک سال . برای این کار ما در سرور آپاچی چند خط به فایل htaccess اضافه می کنیم تا به مرور گراعلام کنید تا چه مدت زمانی این فایل ها بدون تغییر باقی می مانند.

برای فایلی مثل facicon که اصولا تغییر نمی کند ما مبنا را بر یکسال می گذاریم وخط زیر را به فایل htaccess اضافه می کنیم.

ExpiresByType image/x-icon "access plus 1 year”

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

Expire Headers برای تصاویر داخل سایت شما:

شما خیلی زود به زود عکس ها تون را عوض کنید چه موقع است برحسب ان زمان این خط را بسنجید و زمان مناسب خودتان را انتخاب کنید.

ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

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

Expire Headers برای سی اس اس های  داخل سایت شما:

ExpiresByType text/css "access plus 1 month”

Expire Headers برای جاوا اسکریپت ها:

ExpiresByType application/j-avascript "access plus 1 year"

با دستور بالا اعلام می کنید که فایلهای جاوا اسکریپت شما تا یکسال بدون تغییر باقی می مانند.

چه چیزی به فایلهای htaccess خود اضافه کنیم؟

بهتر است یک کپی از فایل اصلی خود نگه دارید و فایل کپی شده را دستکاری کنید تا در صورتی که مشکلی به وجود آمد امکان بازگرداندن داشته باشید. ابتدا ماژول Expire headers را فعال کنید.

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

</IfModule>

 خوب است که قسمت Default directive را هم فعال کنیم پس دو خط زیر را به خود فایل Htaccess اضافه می کنیم.

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

# Default directive
ExpiresDefault "access plus 1 month"

</IfModule>

 در آخر همه خطوطی را که لازم دارید به فایل htaccess خود اضافه کنید ما به این شکل نمایش دادیم تا شما خط به خط با روند کار آشنا شوید ولی اگه همه موارد بالا را در نظر داشته باشید کد شما به شکل زیر می شود.

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault "access plus 1 month"

# My favicon
ExpiresByType image/x-icon "access plus 1 year”

# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

# CSS
ExpiresByType text/css "access 1 month”

# Javascript
ExpiresByType application/j-avascript "access plus 1 year"

</IfModule>

حالا بعد از اضافه کردن این خط باز هم کیفیت سایت خود را کنترل کنید یک تغییر قابل توجه مشاهده می کنید.