اگر سایت خود را در ابزارهای تست سرعت همچون جی تی متریکس یا pingdom بررسی کرده باشید ممکن است هشداری را دریافت کنید که با نام leverage browser caching نشان داده می شود. در این مقاله سعی می کنیم معنای این هشدار، تاثیر آن بر روی سایت و نحوه برطرف کردنش را با هم مرور کنیم. پس همراه وب ایده باشید.
هشدار Leverage Browser Caching چیست؟
هشدار Leverage Browser Caching به کش مرورگر اطلاق می شود. هر وقت که شما از سایت بازدید می کنید دارایی ها و منابع آن همچون HTML، CSS ، جاوا اسکریپت و تصاویر را در کش لوکال مرورگر ذخیره می نمایید. به کمک این روش مجبور نیستید در هر بار لود سایت، منابع موجود را دوباره دانلود کنید. خود این هشدار زمانی نشان داده شود که وب سرور یا سرورهای ثالث هدر کش HTTP را به درستی در خود نداشته باشند . در برخی از شرایط هدر وجود دارد اما زمان کش بسیار کوتاه تنظیم شده است.
چگونه هشدار Leverage Browser Caching در وردپرس را برطرف کنیم؟
زمانی که می خواهید این هشدار را در وردپرس برطرف کنید، سناریوهای متعددی خواهید داشت که می توانید از آن ها بهره ببرید. شاید بتوان گفت رایج ترین مشکلی که باعث بروز چنین خطایی می شود زمانی است که وب سرور به درستی پیکربندی نشده باشد. دلیل دوم این است که اسکریپت گوگل آنالیتیکس چنین هشداری را ایجاد می کند. برخی از اسکریپت های ثالث نیز ممکن است چنین هشداری را ایجاد کنند.
Leverage Browser Caching بر روی سرور:
رایج ترین و مهم ترین دلیل بروز این هشدار زمانی است که وب سرور شما هدر مناسبی در اختیار ندارد. زمانی که صحبت از کش کردن به میان می آید دو روش اصلی به کار می رود. یکی از این روش ها هدر Cache-Control و دیگری هدر Expires است. با اینکه هدر Cache-Control کش سمت کلاینت را فعال می کند اما هدر Expires برای مشخص کردن بازه زمانی به کار می رود که در آن منابع دیگر معتبر نیستند. خوب حالا باید ببینیم چگونه می توانیم این هدرها را به وب سرور خود اضافه کنیم.
نکته: لازم نیست هر دو هدر را اضافه کنید. هدر Cache-Control قابلیت جدیدتری است و توسط بیشتر متخصصان توصیه می شود. با اینحال برخی از ابزارها همچون جی تی متریکس هنوز هم هدر Expires را بررسی می کنند. نکته مهم این است که ویرایش فایل آپاچی یا NGINX می تواند در صورت بروز مشکل و انجام نشدن صحیح آن، مشکلاتی را ایجاد کند. اگر نمی توانید اینکار را خودتان انجام دهید از یک متخصص کمک بگیرید.
اضافه کردن هدر Cache-Control در NGINX:
شما می توانید هدر Cache-Control را در NGINX با اضافه کردن خطوط زیر به فایل Config سرور ویرایش کنید:
1 2 3 4 5 6 7 | location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 30d; add_header Cache-Control "public, no-transform"; } |
اضافه کردن هدر Expires در NGINX:
شما می توانید کد زیر را به بلوک سرور خود اضافه کنید. در این مثال می توانید ببینید که چگونه می توان زمان های انقضای مختلف را بر اساس نوع فایل مشخص کرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 | location ~* \.(jpg|jpeg|gif|png)$ { expires 365d; } location ~* \.(pdf|css|html|js|swf)$ { expires 2d; } |
اضافه کردن هدر Cache-Control در آپاچی:
شما می توانید هدر Cache-Control را در آپاچی با اضافه کردن کد زیر به فایل htaccess ویرایش کنید. این کد را می توان به ابتدا و انتهای فایل اضافه کرد:
1 2 3 4 5 | <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch> |
اضافه کردن هدر Expires در آپاچی:
شما می توانید این هدر را در آپاچی به کمک کدهای زیر اضافه کنید. این کدها را به فایل htaccess فایل اضافه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | ## EXPIRES HEADER 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 application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES HEADER CACHING ## |
خطای leverage browser caching و گوگل آنالیتیکس:
رایج ترین موضوعی که باعث بروز این هشدار می شود از طرف گوگل آنالیتیکس است. این نوع خطا به اسکریپت خود گوگل مربوط می شود. مشکل اینجاست که آن ها زمان کش را روی ۲ ساعت تنظیم کرده اند. این موضوع بدین خاطر است که اگر به هر دلیلی نیاز به اصلاح چیزی باشد، کاربر بتواند تغییرات را به سرعت دریافت نماید. با اینحال چنین روشی می تواند مشکلاتی را هم در پی داشته باشد. شما می توانید افزونه Complete Analytics Optimization Suite را از مخزن وردپرس دانلود کنید. این افزونه به شما اجازه می دهد فایل های جاوا اسکریپت گوگل آنالیتیکس را به صورت محلی میزبانی کنید و آن را به روز نگه دارید.
