leverage browser caching یکی از خطاهای رایجی می باشد که هنگام تست سرعت سایت با ابزارهای آنلاینی همانند GTmetrix، مشاهده می شود که مربوط به کش سایت هست.
منظور ازاین خطا، کنترل قدرت نفوذ کش در مرورگر می باشد، به این معنا که، به گونه ای فایل های سایت را مدیریت کنید که بهترین نوع کش، برای انواع پسوندها در سایت، جهت کش شدن در مرورگر اعمال شود.
کش (Cache)
در هر بازدید از یک وب سایت مشخص، مرورگر شما نیاز دارد که یک سری از فایل های CSS، JS، HTML و حتی تصاویر را بارگذاری کند. اگر شما به صفحات دیگری از همان سایت وارد شوید که موارد تکراری (مثل تصویر هدر، لوگو، کد هدر CSS) در آن وجود داشته باشد، در نتیجه مرورگر شما باید دوباره این فایل ها را دانلود و بارگذاری نماید. کش کردن اطلاعات، از دانلود دوباره این فایل های تکراری جلوگیری می کند و در نتیجه، بدون اینکه نیاز باشد تا اطلاعات تکراری دوباره بارگذاری شوند، از طریق کش محلی مرورگر، فراخوانی خواهند شد.
به همین دلیل در اولین بازدید از یک سایت به نسب دفعات بعدی بازدید، زمان بیشتری جهت بارگزاری کامل سایت صرف می شود.
این عمل هم باعث صرفه جویی در حجم اینترنت بازدید کننده می شود و هم تعداد درخواست های سمت سرور را کاهش می دهد و صفحات سایت در دفعات بعدی سریع تر لود می شوند. منظور از این خطا این می باشد که وقتی شما بازدیدی از سایت می کنید، درخواست کش هدر HTTP به خوبی پیاده سازی نمی شود یا ممکن است درخواست کش هدر HTTP به خوبی ارسال شده و وجود داشته باشد ولی زمان کش بسیار کوتاه باشد.
فرآیند Cache درخواستی هست که تحت HTTP بین سرور و مرورگر رد و بدل شده و مشخص می شود که کدام فایل ها و برای چه مدت زمانی باید کش شوند.
متد های اصلی کش
شایان ذکر است که مدت زمان کش شدن، با استفاده از Expires و فرآیندی که در هر بازدید چک می کند آیا تغییری در فایل ها ایجاد شده است یا خیر، بر روی Cache-Control انجام می شود. این دو درخواست درواقع در هدر اجرا می شوند و در آخر، وضعیت Cache Length یا همان طول کش را مشخص می کنند.
در صورتی که Cache-Control در سمت کاربر فعال باشد، یک عدد بر حسب ثانیه جهت کش کردن فایل در نظر گرفته می شود که این عدد همان زمان انقضا فایل است، ولی Expires یک تاریخ مشخص می کند که تا آن تاریخ فایل کش شود. در صورتی که می خواهید کنترل بیشتری بر روی کش داشته باشید، توصیه می شود از دستور Cache-Control جهت ذخیره سازی فایل ها در مرورگر استفاده نمایید. شایان ذکر است که می توانید از هر دو یا تنها یکی استفاده نمایید ولی به طور کلی هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد.
در صورتی که با خطا Serve Scaled Images مواجه شدید، توصیه می شود این مقاله را از دست ندهید ….
علت خطا Leverage browser caching
هر بار که مرورگر یک صفحه را بارگذاری می کند، مجبور به دانلود تمام فایل های وب مانند Html و CSS و جاوا اسکریپت و تصاویر می باشد.
بعضی از وب سایت ها ممکن است تنها از چند فایل تشکیل شده باشند که اندازه های آن ها کم باشد، اما برای برخی وب سایت ها ممکن است حجم هر صفحه تا چند مگابایت هم برسد.
- توجه به این نکته ضروری می باشد که دانلود این فایل ها توسط کاربر (مخصوصا با داشتن اینترنت کند) بسیار وقت گیر می باشد.
- هر فایل یک درخواست جداگانه برای سرور ایجاد می کند که منجر به کند شدن وب سایت خواهد شد.
با ذخیره سازی این فایل ها (مانند تصاویر) به صورت محلی در مرورگر کاربر، دیگر نیازی به دانلود مجدد فایل های تکراری نمی باشد و در زمان صرفه جویی خواهد شد.
نحوه رفع خطا Leverage browser caching
جهت فعال سازی Leverage browser caching، باید اقدام به ویرایش HTTP headers جهت تنظیم expire times نمایید ( برای آن تاریخ انقضا مشخص نمایید ).
ابتدا باید فایل .htaccess را ویرایش نمایید، پس از ورود به پنل هاست خود، روی گزینه File Manager کلیک کنید (در صورتی که پنل شما سی پنل می باشد، فراموش نکنید از سمت چپ بالا بر روی گزینه Setting کلیک کنید و گزینه Show hidden files and diretory را انتخاب نمایید. )
حال اقدام به اضافه کردن کد های زیر در فایل .htaccess نمایید:
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg “access plus 2 year”
ExpiresByType image/jpeg “access plus 2 year”
ExpiresByType image/gif “access plus 2 year”
ExpiresByType image/png “access plus 2 year”
ExpiresByType text/css “access plus 2 month”
ExpiresByType application/pdf “access plus 2month”
ExpiresByType text/x-javascript “access plus 2 month”
ExpiresByType application/x-shockwave-flash “access plus 2 month”
ExpiresByType image/x-icon “access plus 2 year”
ExpiresDefault “access plus 2 days” ## EXPIRES CACHING ## “
همانطور که در کد بالا مشاهده می شود فایل استاتیک سایت (مانند عکس ها) تا دو سال و فایل های CSS تا دو ماه کش می شوند.
البته این مورد تا زمانی انجام پذیر می باشد که کاربر کش و کوکی مرورگر خود را حذف نکرده و کلید های ترکیبی ctrl + f5 را فشار نداده باشد.
رفع خطا 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 در htaccess.
در این روش ابتدا وارد هاست شده و سپس به File Manager هاست مراجعه کنید. فایل htaccess. را پیدا کرده و سپس قطعه کدهای زیر را در ابتدای فایل قرار بدهید.
Header set Cache-Control “max-age=84600, public”
آیا تا به حال با خطای Optimize images در GTmetrix
مواجه شده اید؟؟
دیدگاهی بنویسید