کش مرورگر چیست و چگونه آن را فعال کنیم؟

در این مقاله سعی داریم تا در رابطه با قابلیت کش (cache) کردن محتوا در مرورگرها و تاثیر آن بر سایت هایمان صحبت کنیم.

قابلیت کش کردن در مرورگر (browser caching) چیست؟

هنگامی که کاربری از یک وب سایت بازدید می کند، مرورگر منابع آن وب سایت (فایل های CSS و ...) را روی کامپیوتر کاربر ذخیره می کند تا با هر بار بازدید از سایت، نیازی به دریافت دوباره ی این فایل های تکراری نباشد. حال، فعال کردن این قابلیت زمانی اتفاق می افتد که یک وبمستر به مرورگرها بگوید چطور با وب سایت او رفتار کرده و تا چه حد از این قابلیت استفاده کنند. البته در زمان حال اکثر مرورگرها از این قابلیت به صورت خودکار پشتیبانی کرده و آن را فعال می کنند اما ما می خواهیم به جزئیات آن و شخصی سازی این قابلیت نیز بپردازیم.

زمانی که مرورگر صفحه ی وب سایت شما را نمایش می دهد باید چندین فایل (مانند لوگوی شما، فایل های CSS و دیگر منابع) را دانلود کند.

در واقع

کاری که browser caching انجام می دهد این است: منابعی را که قبلا بارگذاری کرده است، به یاد می آورد. بنابراین هنگامی که کاربر به صفحه ی دیگری از وب سایت شما می رود نیازی ندارد فایل های تکراری (مانند لوگو و فایل های CSS و ...) را دوباره دریافت و بارگذاری کند.

اگر دقت کرده باشید دفعه ی اولی که از یک وب سایت بازدید می کند سرعت کمی کندتر از زمانی است که قبلا به آن سر زده اید. علت همین است! مرورگر شما مجبور است در ارتباط اول، تمامی منابع را دریافت و بارگذاری کند.

یکی دیگر از موقعیت هایی که در آن از قابلیت browser caching یاد می شود بحث CDN ها است. ما فعلا وارد بحث CDN ها نخواهیم شد و در آینده مقاله ای مربوط به آن خواهیم نوشت اما اگر با این مبحث آشنایی دارید مثالی ساده برای شما می زنیم:

اگر از jQuery استفاده می کنید متوجه شده اید که در هنگام ورود به وب سایت و در قسمت documentation، به شما چندین راه برای بارگذاری فایل jQuery (در سند HTML) پیشنهاد می شود. یکی از این موارد استفاده از CDN است. چرا چنین موردی به بحث ما مربوط است؟ برای پی بردن به این موضوع باید ابتدا به مزایای استفاده از CDN اشاره کنم:

از آن جایی که فایل jQuery روی سرور دیگری میزبانی می شود، از منابع شما در جهت بارگذاری فایل jQuery هیچ استفاده ای نخواهد شد.
از آن جایی که فایل jQuery روی یک سرور دیگر پشتیبانی می شود، قابلیت کش کردن مرورگر برای تمامی وب سایت هایی که از این CDN استفاده می کنند فعال خواهد شد! چرا؟ به این دلیل که مرورگر به یاد خواهد داشت که فایل jQuery از فلان آدرس را قبلا بارگذاری کرده است بنابراین نیازی نیست در وب سایت دیگری که از jQuery استفاده می کند، دوباره آن را دانلود کند. به همین صورت یک فایل بین چند صد و یا چند هزار وب سایت کش می شود!

چطور این قابلیت را فعال کنیم؟

درخواست های header هایتان را به صورتی تنظیم کنید که از browser caching استفاده کنند.
استراتژی browser caching را برای خودتان بهینه کنید.

قسمت اول: تغییر header ها

برای اکثر شما، راه ساده ی فعال کردن این قابلیت اضافه کردن چند خط کد به فایلی به نام htaccess. است که روی هاست شما قرار دارد. برای این کار ابتدا به file manager (یا هر چیزی که از طریق آن فایل هایتان را در وب سایت خود آپلود می کنید) بروید. قبل از انجام هر کاری مطمئن شوید با فایل 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. را ذخیره کرده و صفحه ی مرورگرتان را refresh کنید.

کد بالا به سادگی قابل خواندن است و نیازی به توضیحات زیاد ندارد اما من چند مثال از آن را ذکر می کنم.

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

ExpiresByType image/jpg "access 1 year"

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

به روش بالا برای فعال کردن کش، روشِ "Expires" می گویند. این روش برای اکثر افراد جواب می دهد و نیازی نیست کار دیگری انجام دهند. بعدها اگر خواستید این کار را به صورت حرفه ای تری انجام دهید می توانید از متد Cache-Control استفاده کنید که گزینه های بیشتری پیش روی ما می گذارد.

روش Cache-Control چیست؟

این روش در زمینه ی کش کردن مرورگر و نسبت به روش "Expires" کنترل بیشتری به ما می دهد و اکثر وب مستران اعتقاد دارند پس از راه اندازی، کار با آن از روش "Expires" آسان تر است. من یک مثال از این روش را برای شما ذکر می کنم:

نمونه ی استفاده در فایل htaccess. :

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

کد بالا از یک header استفاده می کند که به مرورگر می گوید بر اساس نوع فایل چه کار کند.

بیایید کد بالا را خط به خط تحلیل کنیم.

# 1 Month for most static assets

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

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

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

نکته ی مهم در این خط از کد این است که دستورات بعدی روی تمام فایل های بالا اجرا خواهند شد. به طور مثال اگر نمی خواهید تصاویر شما به این مدت کش باشند می توانید آن ها را از دستور بالا حذف کنید و یا اگر می خواهید فایل HTML نیز کش شود می توانید آن را به دستور بالا اضافه کنید.

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

این خط، خطی است که وارد header ها می شود:

دستور Header set Cache-Control یک header ایجاد می کند.
دستور max-age=2592000 می گوید فایل های ما تا چه مدت کش باشند (در واحد ثانیه). در این مثال مدت کش را روی یک ماه (2592000 ثانیه) قرار داده ایم.
دستور public نیز می گوید که این یک دستور عمومی است.

</filesMatch>

این خط نیز پایان بلوکه ی کد را اعلام می کند.

هشدار: اگر فایلی را به مدت طولانی (مانند یک سال) کش کنید و سپس این فایل را در وب سایت خود تغییر دهید، تمام کاربران این تغییر را نخواهند دید چرا که مرورگر به جای استفاده از فایل جدید از فایل کش شده استفاده خواهد کرد! بنابراین اگر فایلی دارید که آن را به طور مرتب تغییر می دهید (مانند بعضی از فایل های CSS) و می خواهید از این مشکل دوری کنید، می توانید از روش URL fingerprinting (به معنی انگشت نگاری URL) استفاده کنید.

URL fingerprinting چیست؟

دریافت یک فایل تازه به جای یک فایل کش شده از راه تغییر نام فایل امکان پذیر است. به طور مثال اگر فایل CSS شما main.css نام دارد و آن را به مدت طولانی کش کرده اید، می توانید نام آن را به main_1.css تغییر دهید تا مرورگر دوباره آن را دانلود کند و از نسخه ی کش شده استفاده نکند. چرا؟ به این خاطر که پروسه ی یادآوری مرورگر به نام فایل بستگی دارد و اگر نام فایل تغییر کند، مرورگر نیز دیگر آن فایل را به یاد نمی آورد. بنابراین با هر تغییر باید یک بار نام فایل را تغییر بدهید؛ البته نمی توانید از نام های قبلی و تکراری استفاده کنید.

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

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