محتوای آموزشی وبلاگ نت‌آرام
در این مقاله قصد داریم تا آموزش رفع خطا Leverage browser caching در نتایج Gtmetrix به شما کاربران عزیز آموزش بدهیم، اگر شما در حال مطالعه این مقاله آموزشی هستید، احتمالا در هنگام بررسی سرعت سایت توسط Gtmetrix با خطا Leverage browser caching مواجه شده اید، شما می توانید با ویرایش یک فایل و اضافه کردن چند خط کد این مشکل را رفع نمایید.
علت خطا Leverage browser caching :
هر بار که مرورگر یک صفحه را بارگذاری می کند، مجبور به دانلود تمام فایل های وب مانند Html و CSS و جاوا اسکریپت و تصاویر می باشد.
بعضی از وب سایت ها ممکن است تنها از چند فایل تشکیل شده باشند که اندازه های آنها کوچک باشد ( شاید در حدود چند کیلوبایت ) اما برای برخی وب سایت ها مانند Twitter و یا Instagram ممکن است حجم هر صفحه چند مگابایت شود.
- دانلود این فایل ها توسط کاربر مخصوصا در صورتی که یک اینترنت کند ( مانند اینترنت تلفن همراه ) داشته باشد بسیار سخت و دردناک است.
- هر فایل یک درخواست جداگانه برای سرور ایجاد می کند که منجر به کند شدن وب سایت خواهد شد.
با ذخیره سازی این فایل ها ( مانند تصاویر ) به صورت محلی در مرورگر کاربر، دیگر نیازی نیست برای فایل های تکراری مرورگر هربار مجبور به دانلود آنها باشد، با انجام این روش هنگامی که کاربر برای اولین بار سایت شما را باز می کند، مرورگر مانند قبل تمام فایل ها را دانلود خواهد کرد، با این حال معمولا کاربران به سمت صفحات دیگر حرکت می کنند و یا مجدد وب سایت را بازبینی می کنند، در اینصورت فایل های که در سیستم محلی آنها ذخیره شده باشند، به جای دانلود از سرور، از سیستم خود آنها نمایش داده می شوند.
این روش چگونه کار می کند ؟
برای مثال لوگو وب سایت شما بسیار بعید است که روز به روز تغییر کند، با استفاده از این روش ما می توانیم تنظیم کنیم که مرورگر برای بار اول تصویر را دانلود و تا یک هفته نیازی به دریافت مجدد نداشته باشد.
چگونگی فعال کردن Leverage browser caching :
برای فعال کردن نیاز است تا شما HTTP headers را برای تنظیم expiry times ویرایش نمایید ( برای آن تاریخ انقضا مشخص نمایید )
پیکربندی Apache برای هدر مناسب :
شما باید فایل .htaccess را ویرایش نمایید، پس از ورود به پنل هاست خود ( سی پنل و یا دایرکت ادمین خود )، روی گزینه File Manager کلیک کنید ( اگر پنل شما سی پنل است، فراموش نکنید از سمت چپ بالا روی گزینه Setting کلیک کنید و تیک Show hidden files and diretory را علامت بزنید )
سپس فایل .htaccess را Edit نمایید و کد های زیر را به آن اضافه نمایید :
کد / دستور## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##
همانطور که در کد های بالا مشاهده می کنید فایل استاتیک سایت شما مانند عکس های شما تا یک سال و فایل های سی اس اس یک ماه کش می شوند، البته این مورد تا زمانی است که کاربر کش و کوکی مرورگر خود را حذف نکرده باشد و کلید های ctrl + f5 را فشار ندهد.
شما می توانید مقادیر بالا را با توجه به نیاز خود تغییر دهید ( مانند 1 month )
توصیه :
- حتما تمام فایل های استاتیک را تنظیم نمایید.
- تاریخ انقضا حداقل یک ماه ( توصیه می شود : access plus 1 year )
- مقدار را بیش از یک سال تنظیم نکنید.
مراقب باشید :
لطفا در فعال سازی این مورد دقت زیادی داشته باشید، فعال سازی این امکان ممکن است باعث شود تا کاربر نتواند نسخه جدید وب سایت شما را دریافت کند و در آینده مشکلاتی برای آن ایجاد کند ( هرچند معمولا با تغییر نام فایل ها و css ها این مشکل باید رفع شود )
این نکته به ویژه زمانی اهمیت دارد که شما در حال اعمال تغییرات در سایت خود باشید، پس از اعمال تغییرات کاربران ممکن است نسخه قدیم را حتی به صورت ناقص مشاهده کنند.
مقاله خطا Leverage browser caching به پایان رسید، امیدواریم این مقاله برای شما مفید بوده باشد، منتظر نظرات ارزشمند شما هستیم …
توضیح بیشتر برای انجام مراحل
تفکیک پاسخ
برای فایل CSS، JavaScript و تصویر نسخه‌دار می‌توان عمر طولانی تعیین کرد. برای پنل، سبد و حساب کاربری، کش عمومی با دادهٔ شخصی مجاز نیست.
نسخه‌گذاری
اگر مرورگر اجازه دارد فایلی را برای مدت طولانی نگه دارد، انتشار نسخهٔ تازه باید آدرس تازه‌ای هم معرفی کند. مثلاً style.a1.css بعد از تغییر محتوا نام دیگری می‌گیرد. گزینهٔ immutable به مرورگر می‌گوید همان آدرس فایل ثابت است؛ بنابراین برای فایلی که مرتب با همان نام عوض می‌شود مناسب نیست. بعد از تغییر یک فایل، بررسی کنید مرورگر نسخهٔ تازه را می‌گیرد و ظاهر قدیمی باقی نمی‌ماند.
کنترل هدر
Cache-Control، ETag و پاسخ CDN را در درخواست واقعی ببینید. Apache و Nginx تنظیمات متفاوت دارند؛ قرار دادن چند قانون متعارض نتیجه را مبهم می‌کند.
با بارگیری دوم و تغییر یک فایل، هم استفاده از کش و هم دریافت نسخهٔ جدید را بررسی کنید.
منابع و ادامهٔ مطالعه
برچسب‌ها:
اشتراک‌گذاری:
لینکدینتلگرامایکس
مقاله قبلی
مقاله بعدی
کوچک کردن CSS وردپرس و حذف سبک‌های بی‌استفاده
۲۵ بهمن ۱۳۹۵دیدگاه‌ها (۰)
دیدگاه‌های تاییدشده و پاسخ‌های تیم نت‌آرام