رفع خطای Leverage Browser Caching در وردپرس
FIX LEVERAGE BROWSER CACHING ERROR IN WORDPRESS
اگر تا به حال وبسایت وردپرسی خود را از طریق Google PageSpeed Insights یا Pingdom اجرا کرده باشید، احتمالا با خطای Leverage Browser Caching برخورد کردهاید. شاید هم به خاطر مشاهده همین خطا باشد که اکنون به سراغ این مقاله آمدهاید. نت افزار در این مقاله توضیح خواهد داد که برای رفع خطای Leverage Browser Caching در وردپرس چه کاری باید انجام دهید و رفع آن چه تاثیری بر عملکرد وب سایت شما دارد. پس با ما همراه باشید.
خطای Leverage Browser Caching چیست؟
خطای Leverage Browser Caching، که در شکل زیر نشان داده شده است، به حافظه نهان (cache) مرورگر ربط دارد. وقتی شما سایتی را باز میکنید بخشی از دادهها و داراییهای (assets) سایت مانند کد HTML، CSS، JavaScript و عکسهای سایت در حافظه نهان مرورگرتان ذخیره میشود. در این صورت لازم نیست هر بار که به آن سایت سر میزنید، این دادهها از نو دانلود شوند. خطای Leverage Browser Caching زمانی اتفاق میافتد که سرآیندهای حافظه نهان HTTP (HTTP cache headers) به درستی اجرا نشده باشند یا زمان کش (cache time) کوتاه در نظر گرفته شده باشد.
اگر با این خطا مواجه شدید، میتوانید مشکلتان را با وبسایت https://testmysite.thinkwithgoogle.com که توسط Google PageSpeed Insights راهاندازی شده در میان بگذارید. این ابزار در ابتدا به عنوان یک ابزار بازاریابی توسط گوگل طراحی شد، ولی اکنون بسیاری از مشتریان از آن برای مطرح کردن مشکلاتشان استفاده میکنند. توسعه دهندگان و طراحان وردپرس بعد از دریافت خطا برای رفع آنها و کمک به مشتریان تلاش خواهند کرد.
رفع خطای Leverage Browser Caching در وردپرس
چند سناریوی مختلف برای هشدار Leverage Browser Caching وجود دارد. اول اینکه ممکن است سرور وب به درستی پیکربندی نشده باشد (این مسئله علت اصلی خطا است). همچنین ممکن است این هشدار از طرف اسکریپت Google Analytics باشد. عامل سوم اسکریپتهای سایر ابزارها است. در زیر به توضیح هر کدام از این موارد میپردازیم.
خطای Leverage Browser Caching در سرور
اولین و مهمترین علت هشدار Leverage Browser Caching این است که سرور از سرآیندهای (header) مناسب استفاده نکرده باشد. در شکل زیر، که یک اسکرین شات از Google PageSpeed Insights است، ملاحظه میکنید که علت این خطا معین نبودن زمان انقضاء (expiration not specified) ذکر شده است. زمان انقضاء در حافظه نهان به دو روش Cache-Control header و Expires header معین میشود.
فرق آنها این است که Cache-Control header بیشینه طول عمر ریسورسها را مشخص میکند ولی Expires header زمانی را تعیین میکند که بعد از آن ریسورس کارایی خود را از دست میدهد.
حال ببینیم که چطور میتوان این سرآیندها را به سرور اضافه کرد (نکته: لازم نیست هر دو سرآیند را با هم اضافه کنید). Cache-Control header جدیدتر است و معمولا توصیه میشود که از آن استفاده شود ولی بعضی ابزارها مانند GTmetrix هنوز با Expires header کار میکنند. مثالهایی که در ادامه آورده ایم فقط جنبه آموزشی دارند. شما میتوانید از مقادیر دلخواه خود استفاده کنید.
نکته مهم: ویرایش پیکربندی Nginx یا فایل Apache .htaccess اگر به درستی انجام نشود منجر به از کار افتادن سایت میشود و پیشنهاد می گردد قبل از انجام از پشتیبانی هاست خود کمک بگیرید.
اضافه کردن Cache-Control header به Nginx
برای انجام این کار کدهای زیر را در بلوک سرور خود وارد کنید.
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$
{
expires 30d;
add_header Cache-Control “public, no-transform”;
}
این کد میگوید که فایلهایی که پسوند آنها آورده شده است، برای مدت یک ماه بدون تغییر باقی میمانند. بنابراین به جای آنکه هر بار این فایلها دانلود شوند، باید در حافظه نهان ذخیره شوند. به تبع این کار سرعت بازدید کنندگان سایت را بالا میبرد.
اضافه کردن Expires header به Nginx
برای انجام این کار کدهای زیر را در بلوک سرور خود وارد کنید. در این مثال میبینید که چطور میتوان به پسوند مختلف زمانهای انقضاء مختلفی نسبت داد.
location ~* \.(jpg|jpeg|gif|png|svg)$
{
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$
{
expires 2d;
}
اضافه کردن Cache-Control header به Apache
برای انجام این کار کدهای زیر را به فایل htaccess. اضافه کنید. این کدها را میتوان در ابتدا یا انتهای فایل وارد کرد (قبل از # BEGIN WordPress یا بعد از # END WordPress).
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”
</filesMatch>
اضافه کردن Expires header به Apache
برای انجام این کار کدهای زیر را به فایل htaccess. اضافه کنید.
## 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 image/svg “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 و Google Analytics
دومین علت مهم خطای Leverage Browser Caching، Google Analytics است. جالب است که اسکریپت خود گوگل هم باعث این خطا میشود. مسئله این است که آنها مقدار کم ۲ ساعت را برای زمان کش در نظر گرفتهاند (به شکل زیر نگاه کنید). علت این کار احتمالا این است که گوگل میخواهد کاربران خیلی زود از تغییرات مطلع شوند. با این حال میتوان این مشکل را برطرف کرد. کافیست اسکریپت Google Analytics را در سرور خودتان قرار دهید. البته توجه داشته باشد که گوگل از این کار پشتیبانی نمیکند.
دان فن دن برگ (Daan van den Bergh) یک افزونه کوچک رایگان به نام Complete Analytics Optimization Suite ساخته که با استفاده از آن میتوان Google Analytics را به طور موضعی در وبسایت وردپرسی خود میزبانی کرد.
میتوانید Complete Analytics Optimization Suite را از مخزن وردپرس دانلود کنید. این افزونه به شما امکان میدهد که فایل جاوا اسکریپت Google Analytics (analytics.js) را به طور موضعی میزبانی و آپدیت کنید. از جمله امکانات دیگر این افزونه میتوان به مخفی کردن IP بازدیدکنندگان و تنظیم مکان اسکریپتها اشاره کرد.
از دیگر مزایای میزبانی موضعی اسکریپت Google Analytics این است که کنترل کامل آن در اختیار شما قرار خواهد گرفت و بعد میتوانید از سرآیندهای حافظه نهان، آنطور که در بالا به آن اشاره شد، استفاده کنید.
تنها کافیست Complete Analytics Optimization Suite را نصب کرده و آی دی Google Analytics Tracking خود را وارد کنید. این افزونه کدهای ردگیری ضروری برای Google Analytics را به سایت شما اضافه میکند. سپس فایل analytics.js را دانلود و در سرور شما ذخیره میکند و در صورت نیاز آن را آپدیت خواهد کرد. بهتر است در قسمت Position of tracking code، Footer را انتخاب کنید. نکته: این افزونه با سایر افزونه های Google Analytics وردپرس کار نمیکند.
سایر اسکریپتها
اگر مشغول کسب و کار در وبسایت وردپرسی خود هستید، احتمالا از سایر اسکریپتهایی که توسط شرکتهای دیگر تهیه شده است نیز استفاده میکنید. مثلا Facebook conversion pixels، Twitter، CrazyEgg، Hotjar و غیره. متاسفانه، از آنجایی که نمیتوان این اسکریپتها را به طور موضعی میزبانی کرد، نمیتوان فراید ذخیرهسازی در کش را در این اسکریپتها کنترل کرد. ولی اگر سایت شما کوچک باشد همان روشهایی که در بالا توضیح دادیم برای رفع خطای Leverage Browser Caching کافی خواهد بود.
نتیجهگیری
با روشهایی که در این مقاله ارائه دادیم، در بسیاری از مواقع میتوان هشدار Leverage Browser Caching را پاک کرد. البته ما توصیه نمیکنیم که زیاد از حد در مورد این هشدار حساسیت و وسواس داشته باشید. ولی اگر بتوانید آن را رفع کنید، سرعت سایت شما بالا خواهد رفت.
اگر از این مقاله خوشتان آمده است، در این صورت از سرویس های نت افراز هم راضی خواهید بود. ما با پشتیبانی ۲۴ ساعته در ۷ روز هفته در خدمت مشتریان خود هستیم. در نت افراز به کیفیت و امنیت توجه ویژهای میشود. به وبسایت ما سر بزنید و تفاوتها را احساس کنید.
https://www.netafraz.com/blog/fix-leverage-browser-caching/
