آموزش رفع خطای Leverage Browser Caching

خطای Leverage Browser Caching یکی از خطاهایی است که در پیج اسپید گوگل برای کاربران به نمایش در می‌آید. هر چند این اخطار به نظر گیج‌کننده می‌آید اما این اخطار نشان می‌دهد که سایت با سرعت کمی لود می‌شود و حافظه قادر به کش اطلاعات شما نیست.

در این مقاله می‌خواهیم زمان بارگذاری را کاهش بدیم، به کمک چند نکته مشکل حافظه کش را رفع کنیم و امتیاز پیج اسپید گوگل را افزایش دهیم.

• حافظه کش مرورگر( Leverage Browser Caching ) چیست
• چرا نیاز داریم کش مرورگر خود را پاک کنیم
• تعمیر سطح حافظه کش وردپرس در مرورگر بدون استفاده از افزونه
• رفع خطای Leverage Browser Caching در آپاچی
• رفع خطای Leverage Browser Caching در Nginx
• تنظیم حافظه کش به کمک پلاگین

حافظه کش مرورگر ( Leverage Browser Caching ) چیست

حافظه کش یک فضای ذخیره سازی موقت در حافظه یا دیسک است که صفحات لود شده در آن ذخیره می‌شود. هنگامی که یک بازدیدکننده بر روی لینکی کلیک می‌کند، درخواست از طریق مرورگر به سرور شما ارسال می‌شود.

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

در حافظه کش خود می‌توانید نتایج جستجوی داده ( از داده های دیتابیس ) یا پاسخ استاتیک HTML را برای صفحه ای درخواستی ذخیره کنید. این ذخیره موقت می‌تواند شامل اسکریپت، تصاویر و Style sheet برای مدتی مشخص باشد.

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

چرا نیاز داریم کش مرورگرخود را پاک کنیم

اگر به قسمت توزیع منابع سرور خود بروید به‌طورکلی حجم هر یک از منابع را به شما نشان می‌دهد و چه تعداد درخواست برای مرورگر نیاز است تا آن‌ها را ارسال کند.

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

البته روش آسان‌تر استفاده از ابزار GTmetrix است تا بتوانید میزان نیاز به حافظه کش را تعیین کنید. برای شروع آدرس دقیق Url خود را وارد کنید و با مشاهده نتایج ببینید چگونه می‌توانید سرعت وب‌سایت خود را افزایش دهید.

همان‌طور که مشاهده کردید جی تی متریکس در قسمت leverage Browser Cashing توصیه اصلی خود استفاده از حافظه کش در مرورگر می کند تا بهترین سرعت را برای صفحات خود داشته باشید.

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

شما می‌توانید از مقاله آموزش کار با Page Speed Insights برای دریافت نتیجه بهتر استفاده کنید.

تعمیر سطح حافظه کش وردپرس در مرورگر بدون استفاده از افزونه

اگر می‌خواهید بدون استفاده از افزونه تنظیمات کش خود را انجام دهید، می‌توانید از طریق تنظیمات سرور وب این کار را انجام دهید.

حال باید ببینیم سرور وب چگونه عمل می‌کند؟

سرور وب به مرورگر بازدیدکننده دستور می‌دهد تا منابع خاصی را در حافظه کش ذخیره کنید. مرورگر این پرونده را برای مدت زمانی خاص در محلی ذخیره می‌کند و در بازدیدهای بعدی صفحه از آن‌ها استفاده کنید.

روند تنظیم سرور وب برای شروع ذخیره‌سازی مرورگرها از یک سرور به سرور دیگر متفاوت است به همین خاطر در این قسمت ما به آموزش فعال‌سازی حافظه کش مرورگر در دو سرور محبوب Apache و Nginx می‌پردازیم.

برای خطای Leverage Browser Cashing مراحل زیر دنبال کنید.

هدرهای تاریخ انقضا ( Expires Headers ) را فعال کنید

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

هدرهای کنترل حافظه کش ( Cache-Control Headers ) را تغییر دهید

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

حافظه کش HTTP 1.1 می‌تواند از تنظیمات Cache-Control استفاده کند تا شما بتوانید از تغییرات ایجاد شده روی فایل ها بعد از هر بازدید باخبر شوید و علاوه بر تعیین مدت زمان ، بتوانید روش دلخواه را برای کش خود داشته باشید.

همچنین دستورالعمل های کنترل حافظه نهان را در مدیریت سرور خود داشته باشید. سپس با استفاده از Resource Picker دایرکتوری تنظیم هدر را انجام دهید.

تنظیمات هدر پاسخ ETag HTTP  

یک نوع هدر ( HTTP Header ) شناسه برای نسخه خاص از یک منبع است ومانند Checksum ، مثل اعتبار سنج ها عمل می کند و رابطه مستقیمی با پایداری سرور دارد.

زمانی که ETags از سمت کاربر به سرور ارسال می شود با ردیابی ( به طور نامحدود ) سریع تر از هدر های تاریخ انقضا متوجه می شوید که چه اطلاعاتی تغییر کرده است و نیاز به بروزرسانی دارد که البته ترکیب هر دو آنها می تواند موثرتر باشد.

این هدر کمک می کند تا حافظه کش کارآمد باشد و پهنای باند را ذخیره کند. ( در صورت تغییر نکردن مطالب سرور وب نیازی به ارسال پاسخ کامل ندارد )

رفع خطای Leverage Browser Caching در آپاچی

اگر از سرور آپاچی استفاده می‌کنید، از روش پایین می‌توانید برای رفع خطای Leverage Browser Cashing استفاده کنید.

فایل .htaccess را ایجاد و پیدا کنید

در وب سرور Apache می توانید تمام پارامترهای لازم را در فولدر .htaccess را تنظیم کنید. برای تنظیمات Apache به‌صورت دستی کد زیر را به فایل .htaccess اضافه کنید.

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

این کد را می‌توانید قبل از شروع یا پایان کدهای وردپرسی خود اضافه کنید. در این حالت حافظه کش بعد از 84600  ثانیه منقضی می‌شود.

درواقع پارامترهای Apache توسط فایل های متنی ساده‌ای را ذخیره می‌شوند، سپس مجوز و تنظیماتی را برای دایرکتوری که برای آن ها نیاز دارید را تنظیم می‌کند.

اگر فولدر .htaccess را برای فهرست اصلی وب سایت تنظیم کردید، برای تمام صفحات سایت اعمال می‌شود. درواقع می‌توانید .htaccess را دریکی از زیرمجموعه ها قرار دهید و مجوزهای خاصی برای آن مکان تعیین کنید.

هدرهای تاریخ انقضا را اضافه کنید

اولین تنظیمی که باید درفایل .htaccess انجام دهید، فعال سازی هدرهای منقضی شده است. برای فعال کردن این گزینه می توانید، خط زیر را در فایل .htaccess وارد کنید.

ExpiresActive On

بعد از آن می‌تواند بر اساس نوع فایلی که دارید کد مربوطه را وارد کنید. برای انواع فایل های متنی مختلف که  از مدل نمایشی زیر استفاده می‌کنند، با کد زیر زمان را تنظیم می‌کنیم.

ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"

و برای تعیین زمان انقضا تصویر باید از تصاویری ( مانند جملات زیر ) استفاده کنید که با اسلش و پسوند همراه هستند.

ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/svg "access 1 month"

اگر بخواهید زمان انقضا برای برنامه ها تعیین کنید باید نوع فولدر برنامه را در کد خود قرار دهید و مثلاً PDF را  برای پسوند فولدر انتخاب کنید.

ExpiresByType application/pdf "access 1 month"

برای کاور بقیه فایل های که با هیچ تنظیم خاصی برای آن‌ها تنظیم نشده، می توانید از کلمه ExpiresDefault مانند نمونه زیر استفاده کنید.

ExpiresDefault "access 1 month"

روند حافظه کش را تعریف کنید

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

• تعیین منبع خود کش
• تنظیم محل انجام کش
• تنظیم تاریخ انقضا کش

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

مثلاً اگر شما صفحه اصلی بلاگ را در CDN ذخیره کنید می توانید با اضافه کردن کد زیر آن را برای یک تنظیم عمومی نیز آنجا دهید.

<IfModule mod_headers.c>
    Header set Cache-Control "public"
</IfModule>

همچنین می توانید با افزودن فیلتر های زیر به ماژول هدرها ، خطاهای مختلفی را برای انواع فولدرها تعیین کنید.

<ifModule mod_headers.c>
   <filesMatch "\.(ico|jpeg|jpg|png)$">
      Header set Cache-Control "public"
   </filesMatch>
   <filesMatch "\.(php)$">
      Header set Cache-Control "private"
   </filesMatch>
</ifModule>

کد بالا مشخص می کند که مرورگر می‌تواند فایل های تصویر را در هر نقطه ذخیره کند اما فولدرهای PHP را فقط می‌تواند در دستگاه کاربر کش کند.

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

Header set Expires 0

تگ های موجود در آپاچی را غیرفعال کنید

در آخرین مرحله باید تگ های موجود زیر را غیرفعال کنید.

FileETag None

با غیرفعال کردن ETags مرورگر مجبور می شود به تنظیمات انجام شده حافظه کش اعتماد کند و از آپلود مجدد فولدر در هر بار بارگیری صفحات جلوگیری کند.

فایل .httaccess را ذخیره می‌کند و آپاچی را مجدداً راه اندازی می‌کند تا تغییرات به مرحله اجرا درآید.

رفع خطای Leverage Browser Caching در Nginx

در وب سرور Nginx می‌توانید فولدر nginx.conf را در مسیر ( /etc/nginx/sites-enabled/default location ) پیدا کنید. با استفاده از کد زیر می‌توانید یک هدر تاریخ انقضا ( Expires Header ) را به انواع فولدر های خاص مانند نمونه زیر اضافه کنید.

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

همچنین می‌توانید یک هدر ( Cash-Control ) را به همان بلوک کد اضافه کنید.

location ~* \.(ico|jpeg|jpg|png)$ {
    expires 30d;
    add_header Cache-Control "public";
}

درنهایت فایل تنظیم شده را ذخیره کنید و دوباره Nginx را اجرا کنید تا تغییرات به مرحله اجرا درآید.

تنظیم حافظه کش به کمک پلاگین

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

در ادامه می‌خواهیم به کمک افزونه های زیر خطای Leverage Browser Caching را رفع کنیم.

1. LiteSpeed Cache

افزونه LiteSpeed Cache اجازه می دهد تا بتوانید کش مرورگر را برای سایت خود همراه با ویژگی های دیگر به سادگی فعال کنید. بعد از نصب و فعال کردن این افزونه به تب مرورگر بروید و گزینه Browser Cache را فعال کنید.

علاوه بر این می‌توانید زمان انقضا را تعیین کنید. فقط باید در نظر داشته باشید که با فعال شدن این گزینه بر همه فولدر های ذخیره شده در وب‌سایت اعمال می‌شود.

2. WP Fastest Cache

افزونه WP Fastest Cache  افزونه ذخیره سازی دیگری برای وردپرس است که دو نسخه ارائه می کند، نسخه رایگان آن به شما امکان می دهد تا حافظه کش خود را فعال کنید موارد لازم را برای سایت خود داشته باشید.

در نسخه پریمیوم این افزونه امکان کاهش حجم HTML و CSS ، فعال سازی Gzip ، ترکیب کردن کدهای CSS ، JS و غیرفعال سازی ایموجی وجود دارد.

به طور کلی راه اندازی این افزونه بسیار آسان است نیازی به تغییر پرونده . htacces ندارید و به‌صورت خودکار اصلاح می‌شود.

3. W3 Total Cache

افزونه W3 Total Cache یک افزونه محبوب حافظه کش است که به شما طیف خوبی از امکانات را در اختیار می‌گذارد. بعد از نصب این افزونه می‌توانید برای دسته‌ای خاصی از پرونده‌ها تصاویر، اسکریپت و Stylesheets را تنظیم کنید.

برای هر دسته از انتخاب‌های خود می‌توانید هدرهای تاریخ انقضا Expires و ETag را تنظیم کنید.

پایان

امیدواریم این مقاله توانسته باشد خطای Leverage Browser Caching سایت شما را رفع کند و بتوانید موارد بهتری را برای تنظیم کش صفحات داشته باشید از کش موارد غیرضروری جلوگیری کنید.

خوشحال می‌شویم که نظرات و پیشنهادات خود را در قسمت نظرات برای آی وحید درج کنید.