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

آموزش رفع خطای 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 در GTmetrix

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

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

در این روش ابتدا وارد هاست خودتون شده و سپس به File Manager هاست مراجعه کنید.

فایل htaccess. رو پیدا کرده و سپس قطعه کدهای زیر رو به ابتدای این فایل قرار بدین.

دقت کنید که این دستورات باید در اولین سطر این فایل قرار بگیرند.

  نمونه کد:   ## EXPIRES CACHING ## 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" ## EXPIRES CACHING ##    

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

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

برای حل مشکل leverage browser caching با این روش کد زیر را در بالای فایل htaccess. قرار دهید و دقت داشته باشید چه در روش expire header وcache control میتوانید زمان را نسبت به توضیحاتی که دادیم تغییر دهید و یا همین زمان ها را قرار دهید.   نمونه کد : Header set Cache-Control "max-age=84600, public"  

  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 شما به رنگ سبز نمایش داده می‌شود.

فرزانه جمع دار
sabteSefaresh

دیدگاهتان را بنویسید

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

footerimgfooterimg
Map

شیراز، بلوار شهید بهشتی، خیابان خلدبرین، رو به روی پارک خلدبرین، نبش کوچه 14، ساختمان اول سمت راست، طبقه دوم"

Phone

شماره تماس ضروری:093746192900971505081382

ما را در شبکه های اجتماعی زیر دنبال کنید.