آموزش رفع خطای Minify JavaScript در GTmetrix
جولای 5, 2020
آموزش رفع خطای Specify Image Dimensions در gtmetrix
جولای 5, 2020

آموزش رفع خطای leverage browser caching در GTmetrix

آموزش رفع خطای leverage browser caching در GTmetrix

یکی از خطاهای رایجی که هنگام تست سرعت سایت با GTmetrix با آن روبه رو می شویم به عنوان leverage browser caching در جی تی متریکس نمایش داده میشود که مربوط به کش سایت است. همانطور که از معنی لغوی این خطا برداشت میشود این است که قدرت نفوذ کش را در مرورگر کنترل کنید. یعنی طوری فایل‌های سایت را مدیریت کنید که بهترین نوع کش را برای انواع پسوندها در سایت برای کش شدن در مرورگر انتخاب کنید.

منظور از کش چیست؟

زمانی که شما برای اولین بار وارد یکی از صفحات وب سایت می شوید برای مثال صفحه اصلی وب سایت مغز وردپرس ، لازم است یک سری از فایل ها مثل فایل های HTML , CSS , JS و غیره را توسط مرورگر خود دانلود کنید تا این اطلاعات در حافظه پنهان مرورگر ذخیره شود و سایت قابل مشاهده باشد و اگر وارد صفحات دیگر وب سایت شوید مواردی را که در صفحه اول در حافظه و کش مرورگر ذخیره شد دیگر نیاز به دانلود ندارد و همان موارد را بارگذاری میکند و مابقی اطلاعات جدید را که در صفحه جدید وجود دارد در کش مرورگر ذخیره می کند.برای همین منظور است که برای بار اولی که وارد یکی از صفحات وب سایت می شویم نسبت به بار دوم کمی کند تر است ، زیرا بار دوم دیگر نیازی به دانلود اطلاعات نیست و اطلاعات موجود در صفحه سایت از کش مرورگر شما خوانده می شود و شما سایت را نسبت به بار اول با سرعت بیشتری باز می کنید و مشاهده می کنید.خطا leverage browser caching به این علت به وجود می آید که درخواست کش کردن و درواقع کش هدر HTTP به خوبی پیاده سازی و انجام نشود و یا زمان انجام کش بسیار کوتاه باشد که در ادامه درباره زمان کش توضیح خواهیم داد.

این مقاله رو هم بخونید
حذف اکانت اینستاگرام

مزایای استفاده از کش کردن :

  • کاهش تعداد درخواستها از سرور
  • صرفه جویی در حجم اینترنت بازدیدکننده
  • کاهش ترافیک ماهیانه سرور

علت خطای Leverage browser caching در جی تی متریکس:

اگر این قسمت در  GTmetrixبرای  شما سبز نباشد ، دو حالت دارد : یا کش برای سایت شما فعال نیست و یا اینکه فعال است اما مدت زمان آن کم است. مثلاً با استفاده از کد برای دو ساعت کش تنظیم شده.  ما باید با استفاده از کدهایی که در فایل htaccess سایتمان  قرار میدهیم این خطا را برطرف کنیم. اصولا دو روش یا متد اصلی برای کش کردن به شکل درخواست Header داریم. Expires Header و Cache-Control Header .

Cache-Control Header: هدر cache-control زمانی که در سمت مرورگر کاربر فعال باشد یک عدد بر حسب ثانیه برای کش کردن فایل ها در نظر می گیرد . برای مثال می گوید اگر فایل html را از سایتی دانلود کردی و در حافظه کش مرورگر ذخیره کردی این فایل را برای مثال به مدت ۶۰ دقیقه ذخیره نگه دار و بعد این مدت آن را از حافظه کش پاک کن و سپس دوباره درخواست به سرور برای دانلود آن فایل می فرستد.

Expires Header : همانطور که از اسم آن مشخص است کش کردن را با یک تاریخ انقضا انجام می دهد. برای مثال می گوید اگر فایل یک عکس یا یک فایل html  را در حافظه مرورگر ذخیره کردی ، این فایل رو به مدت ۱ ماه در حافظه ذخیره نگه دار و بعد کش رو پاک کن و سپس دوباره درخواست به سرور برای دانلود آن فایل می فرستد.

این مقاله رو هم بخونید
چطور کسب و کار آنلاین داشته باشم و درآمدمو افزایش بدم؟

پس در هدر Cache-Control مدت زمان انقضا را می‌دهیم و در هدر Expires تاریخ زمان انقضا را می‌دهیم که تمامی این زمان ها در هر دو روش توسط خود ما انجام می شود و میتوانیو زمان کش کردن را بالا یا پایین ببریم که در ادامه به آن خواهیم پرداخت.

خطا leverage browser caching به این علت به وجود می آید که درخواست کش کردن و درواقع کش هدر HTTP به خوبی پیاده سازی و انجام نشود و یا زمان انجام کش بسیار کوتاه باشد

خطا leverage browser caching

آموزش رفع ارور leverage browser caching در GTmetrix

حالا کاری که باید ما برای برطرف کردن ارور leverage browser caching انجام بدیم اینه که با استفاده از دو متد Expires و Cache-Control کش رو کنترل کنیم.

  1. حل خطای 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 ##

 

 نکته : در کدهای بالا مشاهده می کنید که فایل های استاتیک سایت شما با تاریخ انقضای ۱ ساله و فایل های css و javascript شما با تاریخ انقضای یک ماهه معرفی شده اند.

 

شما می توانید مقادیر بالا را با توجه به نیاز خود تغییر دهید ( مانند ۱ month )

این مقاله رو هم بخونید
دیجیتال مارکتینگ یعنی چی؟

 

  1. حل خطای leverage browser caching با روش Cache Control در htaccess :

برای حل مشکل leverage browser caching با این روش کد زیر را در بالای فایل htaccess. قرار دهید و دقت داشته باشید چه در روش expire header وcache control میتوانید زمان را نسبت به توضیحاتی که دادیم تغییر دهید و یا همین زمان ها را قرار دهید.

 

نمونه کد :

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>

Header set Cache-Control “max-age=84600, public”

</filesMatch>

 

  1. حل خطای leverage browser caching با متد Expires در NGINX :

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

نمونه کد :

location ~* \.(jpg|jpeg|gif|png)$ {

expires 365d;

}

location ~* \.(pdf|css|html|js|swf)$ {

expires 2d;

{

  1. حل خطا با متد Cache-Control در NGINX :

در این روش هم باید به سرور دسترسی داشته باشید و کد ها را درون سرور قرار دهید:

نمونه کد :

location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {

expires 2d;

add_header Cache-Control “public, no-transform”;

{

 

با استفاده از کد بالا، فایل‌های jpg,jpeg,gif,png,css,pdf,js,swf و … در مرورگر کاربر کش خواهند شد، تا در بازدیدهای بعدی کاربر به سایت شما این فایل‌ها به‌جای اینکه از سرور شما برای بازدیدکننده بارگذاری شود از خود مرورگر کاربر لود می‌شود و درنتیجه باعث افزایش چشمگیر سرعت سایت شما خواهد شد.

حالا دوباره سایتتان را در جی‌‌تی‌‌متریکس اسکن کنید. خواهید دید که رتبه Browser Caching شما به رنگ سبز نمایش داده می‌شود.

مطلب قبلی :

آموزش رفع خطای minify javascript در gtmetrix

 

Aida Parvaresh
Aida Parvaresh
آیداپرورش هستم،علاقمند به تکنولوژی و تولید محتوا،مدتیه که با تیم خوب هفت وب همکاری دارم.

2 Comments

  1. […] آموزش رفع خطای leverage browser caching در GTmetrix […]

پاسخ دادن به آموزش رفع خطای  Specify Image Dimensions در gtmetrix لغو پاسخ

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