Leverage Browser Caching چیست؟

Leverage Browser Caching چیست؟

قبل از اینکه شیوه به کار بردن leverage browser caching را به شما آموزش بدم بهتره به معرفی خودش بپردازم:

وقتی کاربری از سایت شما بازدید می کند، کش مرورگر فایل های سایت را، در سیستم کاربر ذخیره می کند و با این کار باعث می شود در بازدیدهای بعدی سایت سریعتر لود شود.

leverage browser caching یعنی برنامه نویس سایت در کد نویسی خودش، به مرورگرها فرمان بدهد، چطور با منابع سایت برخورد کنند.

زمانی که مرورگر شما قصد دارد وب سایتی را بارگذاری کند، اطلاعات زیادی مانند تصاویر، فایل های CSS و … را دریافت می کند. برخی از این اطلاعات همواره ثابت و بدون تغییر هستند.

پس بهتر است که مرورگر این فایل ها را در حافظه کش (browser caching) خود ذخیره کند تا از دریافت آنها در هر بار مراجعه به وب سایت جلوگیری کرده و در نتیجه مدت زمان لازم برای بارگذاری وب سایت کاهش یابد.

وقتی مرورگر سایت شما رو نمایش می دهد، باید فایل های زیادی مثل لوگو، فایل های CSS، و بقیه منابع را بارگذاری کند.

کاری که leverage browser caching انجام می دهد، در واقع “به خاطر سپردن” منابعی است که قبلا آنها را بارگذاری کرده است. وقتی بازدیدکننده به صفحه دیگری از سایت شما می رود، نیازی به بارگذاری مجدد لوگو، فایل های CSS و غیره نیست، چون مرورگر آنها را قبلا ذخیره کرده یا به اصطلاح به خاطر سپرده است. به همین دلیل است که بارگذاری اولیه سایت بیشتر از بازدید مجدد آن زمان می برد.

وقتی دستورات استفاده از leverage browser caching را در کد سایت به کار میبرید، فایل های سایت در کش مرورگر ذخیره می شود. بنابراین نه تنها همان صفحه ای که یکبار باز شده بلکه تمام صفحاتی که از منابع کش شده استفاده می کنند، در بازدید های بعدی بسیار سریعتر لود می شوند.

اگر سایتتون رو از لحاظ سرعت بررسی کردید و به این نتیجه رسیدید که نیاز به استفاده از کش مرورگر leverage browser caching دارید این آموزش به شما بسیار کمک خواهد کرد.

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

1. هدرهای درخواست منابع سایت را طوری تغییر دهید که از کش استفاده کند.
2. استراتژی کش خود را بهینه سازی کنید.

نحوه رفع ارور leverage browser caching 

خیلی از افراد برای فعال کردن کش به فایل .htaccess روی هاست یا سرور خود، قطعه کدی اضافه می کنند. برای انجام این کار از طریق File Manager یا سرویس FTP هاست و سرورتون استفاده کنید. تنظیمات زیاد و مهمی از طریق فایل .htaccess روی سایت اعمال می شود.

فعال سازی و تنظیمات کش مرورگر از طریق فایل .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 ##

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

نظیم زمان های کش متفاوت برای نوع فایل های مختلف

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

به راحتی با جایگزین کردن One Month به جای One Year می توانید فایل های jpg را به جای یک سال یک ماه کش کنید. تنظیمات کد فوق برای بهینه سازی اغلب سایت ها و بلاگ ها استفاده می شود.

هدر Expires و Cache-Control چه فرقی با هم دارند؟

راه جایگزین برای کش از طریق فایل .htaccess با Cache-Control

راهی که در بالا ذکر کردیم “Expires” نام دارد. اغلب افرادی که تازه کار خودشون رو آغاز کردند از طریق این روش در فایل .htaccess برای تنظیمات کش استفاده می کنند.

همین افراد بعد از اینکه تسلط بیشتری به تنظیمات کش پیدا می کنند به سراغ نوع دیگری از کش می روند که امکانات بیشتری رو در اختیار میگذارد به نام Cache-Control.

ممکن است سرور یا هاستی که استفاده می کنید از متد Expire پشتیبانی نکند. در این صورت مجبور هستید از Cache-control استفاده کنید.

Cache-Control

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

مثالی از فایل .htaccess در زیر می بینید:

# ۱ Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

کد فوق مربوط به تنظیمات هدر Cache control بر اساس نوع فایل است.

Cache-Control چطور کار می کند؟

برای اینکه نحوه کار Cache Control را بفهمیم خط به خط آن را بررسی می کنیم.

# ۱ Month for most static assets

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

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

خط بالا به مرورگرمی گوید “اگر فایل یکی از این انواع را داشت سپس کاری برایش انجام بده”

نکته مهم کد بالا اینست که لیست فایل های مختلفی (css, js, jpeg, png, etc) وجود دارد و دستورات کش متفاوتی روی آنها اجرا می شود. مثلا، اگر نمی خواهید فایل jpg کش شود آن را حذف و مثلا HTML را اضافه کنید.

Header set Cache-Control "max-age=2592000, public"

خط فوق جاییست که هدرهای اصلی اضافه می شوند و مقدار می گیرند.

• قسمت “Header set Cache-Control” تنظیم یک هدر است.
• بخش “max-age=2592000” مشخص می کند فایل به چه مدت کش شود (واحد ثانیه است). مقدار در این مثال ۲۵۹۲۰۰۰ معادل یک ماه است.
• بخش “public” مشخص می کند که این فایل عمومی است ( که اگر میخواهید کش شود تنظیم خوبیست)

خط بالا عبارت را به اتمام می رساند و قطعه کد را می بندد.

مشکلات متداول کش 

حتما دقت کنید که اگر فایل های html و تصاویر سایت را برای دوره زمانی طولانی مثلا یکسال کش کنید، این فایل ها تا یکسال به خاطر سپرده می شوند و اگر تغییری در آنها ایجاد کنید این تغییرات به دست بازدیدکنندگان نمی رسد. چون کاربران سایت صفحات جدید شما رو نمی بینند بلکه صفحات کش شده قبلی رو می بینند.

اگر فایلی دارید که معمولا آپدیتش می کنید (مثل فایل های CSS) با استفاده از URL fingerprinting می توانید بر این مشکل غلبه کنید.

URL Fingerprinting

با اختصاص اسامی منحصر به فرد و غیر تکراری به راحتی می توانید کاری کنید که کاربر به جای فایل های کش شده فایل های جدید را بارگذاری کرده و ببیند. مثلا، اگر اسم فایل css اصلی سایت شما Main.css است.

نام آن را به main_1.css تغییر دهید. اگر مجددا محتوای آن آپدیت شد این بار نامش را به main_2.css تغییر دهید. این کار برای فایلهایی که مدام در حال تغییر هستند خیلی مفید است.

روش های کش

مهم است که حتما یکی از روش های Expires یا Cache-Control و Last-Modified یا Etag رو برای منابع قابل کش شدن سایت خودتون انتخاب کنید.استفاده همزمان از Expires یا Cache-Control با هم و یا از Last-Modified یا Etag بهینه نیست و توصیه نمی شود.

در نهایت امیدواریم که مطلب امروز در مورد آموزش فعال سازی کش مرورگر برای سایت و Leverage Browser Caching برای شما مفید باشد. چنانچه سوالی داشتید در قسمت نظرات برای ما ارسال کنید تا سریعا به شما پاسخ دهیم.