رفع خطای Leverage browser caching و هر آنچه که باید درباره کش بدانید

آموزش افزایش سرعت سایت با GTmetrix

درود، از سری دوره‌های آموزش کار با GTmetrix در خدمت شما هستیم قصد داریم در این دوره سایتی بهینه توسط ابزارهای آنلاین مثل جی تی متریکس ایجاد کنیم. در جلسه قبل درباره رفع ارور Inline small CSS and JavaScript صحبت کردیم. در این جلسه قصد داریم درباره مشکل Leverage browser caching و حل اون در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای افزایش سرعت سایت ما اهمیت دارد.

خلاصه‌ی از خطا Leverage browser caching

قطعا شما هم از ابزارهای پیج اسپید، جی تی متریکس یا Pingdom جهت تست سرعت سایت خودتان استفاده کردید و یکی از خطاهای معروف و ایرادهایی که این ابزارهای آنلاین می‌گیرید Leverage browser caching هست، حال با خواندن این پست وقت آن رسیده که مشکل را حل کنید. برای حل مشکل Leverage browser caching در این ابزارها راه‌کارهای ساده‌ای وجود دارد مخصوصا اگر از CMS های اماده و رایگان برای سایتتان استفاده کرده باشید. در این مقاله درباره معنی این اخطار، چه تاثیراتی بر سایت دارد، و گزینه‌های موجود برای رفع این خطا را به شما خواهیم گفت.

Leverage browser caching چیست (کش)

خطای Leverage browser caching که اسکرین‌شات آن را در Pagespeed گوگل مشاهده می‌کنید به کش مرورگر شما اشاره می‌کند درواقع باید گفت کش چیست ؟

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

این عمل هم باعث صرفه‌جویی در حجم اینترنت بازدیدکننده می‌شود و هم تعداد درخواست‌های سمت سرور  را کاهش می‌دهد و صفحات سایت در دفعات بعدی سریع‌تر لود می‌شوند. این خطا این را می‌گوید که وقتی شما بازدیدی از سایت می‌کنید درخواست کش هدر HTTP به خوبی پیاده‌سازی نمی‌شود یا ممکن است درخواست کش هدر HTTP به خوبی ارسال شود و وجود داشته باشید ولی زمان کش بسیار کوتاه است.

اصولا به شکل درخواست Header دو روش یا متد اصلی برای کش کردن داریم. Expires Header و Cache-Control Header . هدر Cache-Control در HTTP/1.1 معرفی شد و اگر در سمت کاربر فعال باشد یک عدد بر حسب ثانیه برای کش کردن فایل در نظر می‌گیرد این عدد همان زمان انقضا فایل است، ولی Expires یک تاریخ را مشخص می‌کند که مثلا تا فعلان تاریخ فایل کش شود. Expires روشی ساده است. پس در هدر Cache-Control مدت زمان انقضا را می‌دهیم و در هدر Expires تاریخ زمان انقضا را می‌دهیم. اگر قصد دارید کنترل بیشتری بر روی کش داشته باشید و به دنبال آپشن بیشتر برای دسترسی به کش مرورگر دارید از دستور Cache-Control برای ذخیره سازی فایل‌ها در مرورگر است، می‌توانید استفاده کنید. استفاده از هر دو هدر  Expires  و  Cache-Control لازم نیست، ولی حداقل استفاده از یکی در جهت افزایش سرعت سایت لازم و  ضروری است ولی اگر هر دو را اضافه کنید جز محکم‌کاری در جهت کش شدن فایل‌ها کار خاص دیگری نکرده‌اید ولی به شکل کلی هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد.  Cache-Control  جدیدتر و معمولا این متد توصیه می‌شود ولی با این حال هنوز برخی سایت‌های آنالیز سرعت مثل Gtmetrix  هدر Expires را چک می‌کنند

جزئیات تفاوت هدر Expires و Cache-Control

• Expires Header

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

  <IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresDefault "access 2 days"
  </IfModule>
  

  و مثلا خروجی که در هدر HTTP مرورگر می‌توان دید:

  

• Cache-Control Header

  همان‌طور که گفتیم Cache-Control به ما اجازه بیشتری می‌دهد برای کش کردن در مرورگرها پیدا کنیم. اساس هدر Cache-Control مقدار زمان و روشی که باید کش شود را تعریف می‌کند. وقتی به یک فایل به‌وسیله مرورگر دانلود و در لوکال دسترسی پیدا کند، هدر HTTP آن فایل نیز مورد ارزیابی قرار می‌گیرد. وقتی محتویات هدر Cache-Control را مرورگر بخواند،کش آن فایل را اعمال می‌کند.
  اگر یک مرورگر بعد از ارزیابی ببیند که یک فایل باید برای یک روز کش شود، آن فایل در کش مرورگر برای یک روز می‌ماند و اگر آن فایل بعد از یک روز دوباره فراخوانی شود مرورگر دوباره آن فایل را از سرور درخواست می‌کند و منتظر پاسخ سرور می‌شود. به‌طور مثال تصویر لوگو سایت شما که اصولا در صفحات مختلف ثابت است و اگر یک بازدیدکننده به یک صفحه از وب‌سایت شما بیاید و تصویر لوگو سایت شما را دانلود کند، هنگامی‌که بازدیدکننده به صفحات دیگر سایت شما برود، تصویر لوگو دوباره دانلود نمی‌شود، و از کش مرورگر فراخوانی می‌شود این روند همینطور ادامه دارد تا وقتی که مدت زمان انقصا تمام شود.

  به کد زیر توجه کنید:

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

  کد بالا تنظیمات  Cache-Control  است که به شکل هدر HTTP ارسال می‌شود. و اعمال این کد بستگی به نوع فایل‌هایی که تعریف می‌کنیم، دارد.

  حال به بررسی خط به خط دستور بالا می‌پردازیم

  1. خط یک هیچ عملی را انجام نمی‌دهد جز اینکه یاداور برای شما است درواقع دستورات را تشریح می‌کند و  .htaccess آن را نادیده می‌گیرد چرا که با # شروع شده است. به شکل خلاصه کامنتی جهت آگاهی و یاداوری برای استفاده کننده از کد بالا است.
  2. خط دو که قسمت مهم دستور ما است میگه “اگر فایل‌ها از این نوع بودند ما یک سری عملیات را انجام می‌دهیم” . درواقع عمل کش فقط برای این نوع فایل‌ها صورت می‌گیرد. شما اگر تمایلی ندارید مثلا فایل gif کش شود کافیست آن را از لیست نوع فایل‌ها بردارید و یا اگر تمایل دارید فایل‌های HTML کش شود کافیست آن را به لیست نوع فایل‌ها اضافه کنید تا آن عمل خاص که در اینجا کش کردن است اعمال شود.
  3. خط سه همان عملیاتی هست که باید انجام شود، هدر  Cache-Control مقداری را می‌گیرد. Header set Cache-Control نام هدری است که به شکل HTTP در مرورگر فراخوانی می‌شود و  max-age=2592000 بمدت زمان برحسب ثانیه است و اشاره می‌کند که فایل باید چه مدت در کش مرورگر بازدیدکننده ذخیره شود و مقدار 2592000 برابر با یک ماه است یعنی همان زمان انقضا یک فایل.
     مقادیر رایج، موارد زیر هستند:
     یک دقیقه: MAX-AGE=60
     یک ساعت: MAX-AGE=3600
     یک روز: MAX-AGE=86400
     یک هفته: MAX-AGE=604800
     یک ماه: MAX-AGE=2628000
     یک سال: MAX-AGE=31536000و یکی از دستورات کش ممکن است Public باشد یعنی کش مورد نظر به شکل عمومی است اگر شما در جهت افزایش سرعت سایت خود قرار هست کش را به هاست اضافه کنید و اطلاعات موجود خصوصی نیست میتوانید از  Public استفاده نمایید که اصولا اکثر فایل‌ها از این نوع دستور هستند. می‌توان به جای  Public  دستورات دیگر هم درج کرد، به شکل کلی سه دستور دیگر هم در Cache-Control وجود دارد:
     • PUBLIC
       در بالا توضیح داده شد.
     • PRIVATE
       دستور Private به این معناست که کش شدن برای یک کاربر خاص است. مثلا اگر من به حساب فیسبوک خود یعنی آدرس facebook.com/mizfacom بروم قطعا مواردی برای من کش خواهد شد که اگر شما به آن آدرس بروید، برای شما کش نخواهد شد چرا که من وارد اکانت خود شده و دارای حریم اطلاعاتی هستم که فیسبوک تعیین کرده و همین موضوع برای شما هم هست و وقتی شما وارد اکانت خود می‌شوید و به آدرس فیسبوک خود مراجعه می‌کنید مواردی که برای شما کش می‌شود لزوما همه آنها برای من کش نمی‌شود.
     • NO-STORE
       دستور No-Store یک دستور قوی‌تری است که از کش شدن تحت هر شرایطی جلوگیری می‌کند.
  4. خط چهار هم جمله را به پایان می‌رساند و اعلام می‌کند دستورات به پایان خود رسیدند و آماده برای دستورات بعدی می‌شوند (اگر موجود داشته باشد).

   

کد برای حل مشکل Leverage browser caching در .htaccess

حل مشکل کش با متد Expires

کد زیر از نوع متد Expires  است. کد را در بالای فایل .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 ##

کد دو:

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS

    ExpiresByType text/css                              "access plus 1 year"


  # Data interchange

    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"


  # Favicon (cannot be renamed!) and cursor images

    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML

    ExpiresByType text/html                             "access plus 0 seconds"


  # JavaScript

    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"


  # Manifest files

    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"


  # Media files

    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/bmp                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
    ExpiresByType image/webp                            "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"


  # Web fonts

    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType font/eot                              "access plus 1 month"

    # OpenType
    ExpiresByType font/opentype                         "access plus 1 month"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 month"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/x-font-woff               "access plus 1 month"
    ExpiresByType font/woff                             "access plus 1 month"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 month"


  # Other

    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"

</IfModule>

حل مشکل کش با متد Cache-Control

کد زیر از نوع متد Cache-Control  است. کد را در بالای فایل .htaccess قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

کد برای حل مشکل Leverage browser caching در Nginx

حل مشکل کش با متد Expires

کد زیر از نوع متد Expires  است. کد را می‌توانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

حل مشکل کش با متد Cache-Control

کد زیر از نوع متد Cache-Control  است. کد را می‌توانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

نحوه چک کش اعمال شده

شما می‌توانید بعد از اعمال کدهای بالا در سایت خود، کش سایت را توسط مرورگرها بررسی کنید که آیا به درسی تنظیم شده‌اند یا خیر، به این منظور بر روی سایت خود کلیک راست کرده و وارد بخش DevTools گوگل کروم شوید و سپس وارد تب Network شده و سایت خود را دوباره رفرش کنید و یکی از فایل‌های سمت چپ را انتخاب کرده و در سربرگ Response Header کش‌های اعمال شده را مشاهده کنید. البته می‌توانید از ابزارهای آنلاین Gtmetrix هم استفاده کنید.

رفع ارور Leverage browser caching برای Google Analytics

یکی از خطاهای رایج و سوال‌های زیادی که از بنده می‌شود نحوه بهینه سازی و کش کردن لینک JS آمارگیر گوگل آنالیتیکس در سایت است. چرا که این فایل فقط ۲ ساعت کش می‌شود و به همین خاطر ابزارهای آنلاین نیز یک نوع خطا حساب می‌کنند زیرا مدت زمان انقضا دو ساعت بسیار کم می‌باشد به مانند اسکرین شات زیر که مشاهده می‌کنید. علت آن این است که گوگل می‌خواهد اگر تغییراتی اعمال کرد این تغییرات سریع برای همه کابران صورت بپذیرد و در این پست گفته از روش انتقال آنالیتیکس به لوکال اجتناب کنید و اشاره می‌کند که:

به هر حال یک راه برای تغییر زمان کش فایل جاوا اسکریپت Google Analytics موجود دارد.

به کمک افزونه  Complete Analytics Optimization Suite به سادگی می‌توانید کش آمارگیر گوگل آنالیتیکس را در لوکال دست خوش تغییرات دهید، این افزونه را از مخزن وردپرس دانلود و نصب کنید و سپس اطلاعات لازم برای چنین عملی مثل Google Analytics Tracking ID را به این پلاگین بدهید، Position of traking code را هم توصیه میکنیم Footer  را انتخاب نمایید و بعد سیو کنید. تغییرات انجام شد و لذت برید 🙂

افزونه کش وردپرس

پیشنهاد ما برای کش کردن در وردپرس استفاده از روش‌های بالا است، چرا که نصب هر افزونه باعث کاهش سرعت سایت وردپرس می‌شود، به هر حال اگر مایل به استفاده ازکدهای بالا نیستید می‌توانید از افزونه‌های زیر برای فعال سازی کش در وردپرس استفاده نمایید.

• افزونه Cache Enabler
• افزونه W3 Total Cache
• افزونه WP Super Cache
• افزونه WP Rocket (بهترین افزونه از نگاه ما)

خطاهای مرتبت با ارور Leverage browser caching را می‌توانید در لیست زیر بررسی کنید و اصولا با خواندن این مقاله خطاهای زیر هم رفع می‌شوند.

• رفع ارور Specify a cache validator
• رفع ارور Add Expires headers

سعی شده در این آموزش‌ها با بالا بردن سرعت سایت که یکی از فاکتورهای مهم در سئو می‌باشد، کمک شایانی کنیم، اگر سوالی داشتید حتما در نظرات مطرح کنید. این جلسه از آموزش GTmetrix که مربوط به رفع ارور Leverage browser caching بود، هم به پایان رسید در جلسه بعد به معرفی خطاهای Minify فایل‌ها در pagespeed  گوگل میپردازیم (خطای minify html خطای minify css و خطای minify JS). با ما همراه باشید.

برای نوشتن مقاله‌ها زحمات بسیاری شده است، لطفا در صورت بازنشر پست با ذکر دقیق منبع به همراه لینک انتشار پیدا کند.