افزایش سرعت سایت با فعال سازی Browser Caching

فعال سازی کش مرورگر یکی از تکنیک های موثر افزایش سرعت سایت محسوب می شود، قابلیت Browser Caching به مرورگر وب (Web Browser) این امکان را می دهد تا فایل های ایستای یک وب سایت (HTML ،CSS ،JS،تصاویر) را در حافظه کش خود ذخیره کرده و در مراجعات بعدی کاربران به جای اینکه این فایل ها را مجددا از سرور دانلود نماید آنها را از حافظه کش خود که بسیار سریعتر است فراخوانی کرده و نمایش می دهد.

Browser Caching معمولا با کلمه Leverage به صورت Leverage Browser Caching استفاده می شود، به فعال سازی و اعمال تنظیمات کش مرورگر، Leveraging گفته می شود، پس این دو عبارت یک مفهوم را می رسانند و هیچ تفاوتی با یکدیگر ندارند.

کش مرورگر(Browser Caching) چیست؟

همانطور که قبلا هم اشاره کردیم صفحات وب ترکیبی از فایل های HTML، CSS، JS، تصاویر و … می باشند، زمانی که به یک وب سایت مراجعه می کنید مرورگر وب کلیه فایل های مورد نیاز را از سرور مربوطه دانلود کرده و به شما نشان می دهد.

در تصویر زیر فایل های دانلود شده وب سایت یاهو را با استفاده از ابزار Developer Tools کروم مشاهده می کنید.

ابزار Developer tools

به طور کلی ساختار زیر در تمامی وب سایت ها یکسان و مشابه است:

  • قالب سایت ظاهر ثابت و رنگ بندی مشخصی دارد.
  • لوگوی سایت در تمامی صفحات به یک شکل نمایش داده می شود.
  • منوهای سایت اغلب بدون تغییر هستند.
  • از تصاویر ثابت و ایستا استفاده شده است.
  • و …

حال که بسیاری از این عناصر ثابت و ایستا هستند چرا کاربران باید هر دفعه ای که با سایت ما مراجعه می کنند این موارد را مجددا از سرور دانلود کنند؟

راه حل منطقی و بهینه بدین صورت است که:

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

با پیاده سازی این تکنیک به ظاهر ساده می توانیم سرعت بارگذاری صفحات وب را افزایش داده و مصرف پهنای باند را نیز کاهش دهیم.

روش ۱: فعال سازی کش مرورگر با استفاده از فایل htaccess.

به منظور فعال سازی Browser Caching در وب سرور آپاچی خطوط زیر را به فایل htaccess اضافه کنید، در صورتی که با این فایل آشنایی ندارید، پیشنهاد می کنیم مطلب چگونه از فایل htaccess. استفاده کنیم؟ را مطالعه فرمائید.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

در خطوط بالا دو تنظیم اساسی باید در نظر گرفته شود(Leveraging):

  • چه نوع فایل هایی می توانند در کش مرورگر ذخیره شوند.
  • فایل های کش شده تا چه بازه زمانی می توانند در حافظه مرورگر باقی بمانند(زمان انقضا).

و اما چند نکته:

  • تعیین مدت زمان انقضا کاملا به ساختار وب سایت شما بستگی دارد، در صورتی که سایت تان دائما در حال تغییر است و یا در مراحل اولیه راه اندازی هستید مدت زمان کمتری را در نظر بگیرید(مثلا یک هفته، access plus 1 week) در غیر این صورت ممکن است کاربران متوجه تغییرات نشوند و مرورگر اطلاعات کش شده را به آنها نشان دهد.
  • مدت زمان انقضا را بیشتر از یک سال تنظیم نکنید.
  • برای تمامی فایل های ایستا کش مرورگر را فعال کنید.
  • تنظیمات فعال سازی بسته به نوع وب سرور(Apache، Nginx، Litespeed) متفاوت است.
  • در صورتی که کاربران از کلیدهای ترکیبی CTRL + F5 استفاده کنند مرورگر بدون توجه به زمان انقضای تعیین شده آخرین اطلاعات را مجددا از سرور دریافت می کند.
  • مرورگر بر اساس Expires Header دریافتی از وب سرور تشخیص می دهد که قابلیت کشینگ در وب سایت شما فعال است یا خیر.

بررسی عملی یک سایت

در ابتدا با ابزار GTmetrix وضعیت جاری وب سایت هدفمان را که بر روی وب سرور آپاچی میزبانی می شود را مورد ارزیابی قرار می دهیم، همانطور که در تصویر زیر مشاهده می کنید قابلیت Browser Caching در این سایت غیرفعال می باشد و از GTmetrix نمره بسیار ضعیف (F) را دریافت کردیم.

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

تاثیر فعال سازی gzip در سرعت سایت

disable browser caching

پس از اینکه امکان Browser Caching را از طریق فایل htaccess فعال کردیم نمره Yslow هفت درصد افزایش پیدا کرد.

تاثیر این تغییر و دریافت نمره عالی (A) در تصاویر زیر کاملا واضح و مشخص است.

بررسی کش مرورگر در gtmetrix

فعال سازی browser caching

روش ۲: فعال سازی Browser Caching با استفاده از افزونه W3 Total Cache

در صورتی که به فایل htaccess دسترسی ندارید می توانید از افزونه های وردپرسی استفاده کنید، W3 Total Cache افزونه ای عالی برای افزایش سرعت سایت است که یکی از امکانات آن فعال سازی Browser Caching می باشد.

پس از نصب افزونه Total Cache از طریق منوی Performance گزینه Browser Cache و سپس مطابق تصویر زیر گزینه های مورد نظر را انتخاب کنید.

فعال سازی کش مرورگر در افزونه w3 total cache

جمع بندی

با فعال سازی کش مرورگر تعداد درخواست های ارسالی(رفت و برگشتی) بین مرورگر کاربر و وب سرور کاهش می یابد و همین مورد به تنهایی می تواند در عملکرد سایت تان تاثیر گذار باشد، در صورتی که وب سایت تان دائما در حال تغییر است یا در مرحله توسعه می باشد قابلیت Browser Caching را با وسواس بیشتری تنظیم نمائید.

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *