هدر Cache-Control که برای تعیین مدت زمان انقضا مورد استفاده می‌گیرد و بر حسب ثانیه مدت زمانی رو برای انقضا فایل‌های کش در نظر می‌گیرد و Expires که برای تعیین تاریخ انقضا است و بر اساس یک زمان دقیق انتخاب می‌شوند، مشخص می‌کنند که یک فایل باید چه مدت زمانی به عنوان کش در مرورگر نگهداری شود و اگه این وضعیت رو مشخص نکنید با خطای Leverage browser caching مواجه می‌شوید. استفاده از این دو درخواست در هدر ضروری نیست، اما حتماً باید حداقل از یکی از آن‌ها استفاده کنید تا وضعیت کش رو در سرور برای مرورگر مشخص کنید. استفاده از هر دو گزینه هم می‌تواند مفید باشد و در جهت بهبود سرعت سایت یک گام جلوتر بردارید.
تفاوت دو نوع هدر Expires و Cache-Control باهم چیست؟
همونطور که از معنی نوع هدر Expires مشخص است، ابتدا تاریخی در مرورگر توسط هدر HTTP برای تاریخ انقضای کش مشخص می‌شود و تا آن تاریخ مرورگر همچنان فایل‌های کش شده رو از حافظه سیستم می‌خواند و به کاربر نمایش می‌دهد. به محض اینکه تاریخ مورد نظر گذشت و در اصطلاح منقضی شد، دوباره درخواستی را به سرور برای خوندن فایل‌ها ارسال می‌کند که فایل‌ها را در حافظه خودش آپدیت کند و این بار هم تاریخ انقضایی را از سرور دریافت می‌کند که تا آن موقع فایل‌ها را به صورت کش شده در حافظه خودش داشته باشد.
در روش Cache-Control ما کنترل بیشتری روی کش داریم و علاوه بر تعیین مدت زمان می‌توانیم روش دلخواه برای کش را هم مشخص کنیم. در این حالت اگر برای فایلی مشخص شود که برای ۱ ماه در حافظه کش باقی بماند، تا مدت زمان یک ماه این فایل به جای درخواست از سرور، از حافظه مرورگر لود می‌شود و به محض این که یک ماه گذشت دوباره از سرور درخواستش می‌کند و منتظر پاسخ سرور بماند. در این صورت وقتی به صفحات دیگه هم مراجعه کنید و اون فایل در صفحات دیگه هم استفاده شده باشد، همین رفتار را خواهد کرد. این روند به صورت چرخه‌ای همان‌طور ادامه دارد تا این که مدت زمان انقضا برسد و مجدداً از سرور فایل را درخواست کند و بر اساس زمان تعیین شده دوباره فایل به صورت کش شده نمایش داده شود. در این حالت می‌توان گفت که کد زیر در حالت اجرا خواهد بود. کد زیر را در نظر بگیرید:
# ۱ Month for most static assets <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>
- خط اول: این خط دستوری رو شامل نمی‌شود و صرفا یک سری توضیحات است که قبل از اجرای دستورات داخل فایل htaccess. بیان شده است.
- خط دوم: توی این خط دستور ما آغاز شده و بعد اون یک سری فرمت فایل که شامل css،jpg،jpeg،png،gif،js و ico می‌شود که مشخص شده که به معنی این است که دستوراتی که در ادامه داده می‌شود، باید برای این نوع فایل‌ها اعمال شود.
- خط سوم: این خط شامل دستوراتی است که باید برای فایل‌هایی با فرمت‌های مشخص شده در خط دوم اجرا شود. توی این خط با استفاده از Header set Cache-Control مشخص شده که این درخواست به صورت HTTP هست و وظیفه دارد دستوری را برای Cache-Control اجرا کند که دستور هم این است که به مدت max-age=2592000 ثانیه، این فایل‌ها باید در حافظه مرورگر کش شود. این مدت زمان بر حسب ثانیه مشخص شده که در اینجا برابر با یک ماه است. در انتها هم از عبارت public استفاده شده که نشان‌دهنده این است که کش اعمال شده برای همه کاربرانی است که وارد این سایت خواهند شد.
- خط چهارم: این خط هم پایان اجرای دستورات هست.
چگونه خطای leverage browser caching در GTmetrix را رفع کنیم؟
حالا کاری که باید ما برای برطرف کردن ارور leverage browser caching انجام دهیم، این است که با استفاده از دو متد Expires و Cache-Control کش رو کنترل کنیم که در ادامه به معرفی قطعه کدهایی برای این کار می‌پردازیم.
رفع ارور leverage browser caching با متد Expires در htaccess.
در این روش ابتدا وارد هاست خودتون شده و سپس به File Manager هاست مراجعه کنید. فایل 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 ##
رفع ارور leverage browser caching با متد Cache-Control در htaccess.
در این روش ابتدا وارد هاست خود شوید و سپس به File Manager هاست مراجعه کنید. فایل htaccess. رو پیدا کرده و سپس قطعه کدهای زیر رو به ابتدای این فایل قرار دهید. دقت کنید که این دستورات باید در اولین سطر این فایل قرار بگیرند.
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>
رفع ارور leverage browser caching با متد Expires در NGINX
در این روش باید دسترسی به سرور داشته باشید و کدهای زیر رو داخل سرور قرار دهید.
location ~* .(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 2d;
}
رفع ارور leverage browser caching با متد Cache-Control در NGINX
در این روش باید دسترسی به سرور داشته باشید و کدهای زیر رو داخل سرور قرار دهید.
location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}
حالا بسته به نوع سرور، میزان دسترسی خود و قطعه کدهایی که ارائه کردیم، مجدداً سایت را با استفاده از GTmetrix تست کنید، شاهد برطرف شدن مشکل مطرح شده خواهید بود.
در مقاله بعدی به بررسی ادامه این بحث می‌پردازیم.
