leverage browser caching

Leverage Browser Caching چیست؟ نحوه فعال سازی کش مرورگر

2.3/5 - (6 امتیاز)

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

سرعت سایت یکی از فاکتورهایی است که می تواند موفقیت شما را در برابر رقبایتان تضمین کند. برای افزایش سرعت سایت، نیاز به کارهای پیچیده ای نیست. Leverage Browser Caching یکی از بهترین و ساده ترین روش ها برای این کار است.

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

احتمالا نام ابزارهایی مانندPageSpeed ، Pingdom، GTMetrix، YSlow به گوشتان خورده است؛ این ابزارها کارشان این است که سرعت سایت را اندازه بگیرند و آنالیز کنند و در راستای رفع خطای Leverage Browser Caching (که سبب کندی در عملکرد سایت می شود) تلاش و کوشش کنند!

احتمالا این سوال را دارید که چگونه متوجه خطای Leverage Browser Caching شویم؟ شما می توانید به کمک ابزار GTMetrix وارد بخش pagespeed شوید و اگر خطای Leverage Browser Caching وجود داشت، می توانید آن را مشاهده کنید. احتمالا این سوال را دارید که اگر با این خطا مواجه شدیم چه نکنیم؟ اصلا نگران نباشید؛ ما اینجا هستیم تا شما بگوییم چگونه باید شرایط را مدیریت کنید. همراهمان باشید.

کش مرورگر چیست؟

زمانی که در مورد حافظه کش مرورگر صحبت می کنیم، یعنی داریم در مورد قسمتی از حافظه جانبی صحبت می کنیم که وظیفه اش حفظ کردن فایل های استاتیک مانند عکس ها، css ها و … است که کاربر قبلا آن ها را مرور کرده است. بگذارید قضیه را کمی ملموس تر کنیم. زمانی که شما برای اولین وارد سایت ما در آسام سرور می شوید، فایل هایی که در سایت ما وجود دارد، مانند فایل های css ، javascript، html ، تصاویر و … دانلود می شود و شما می توانید آن ها را مشاهده می کنید.

برای بار دوم که وارد سایت می شوید، اگر کش مرورگر فعال باشد، دیگر نیازی به دانلود تمام این موارد نیست، چرا که این کار سبب افزایش مصرف پهنای باند اینترنت کابر و نیز افزایش تعداد درخواست ها به سرور می شود که چندان مطلوب نیست.

کش مرورگر

حافظه کش مرورگر چگونه بر سرعت صفحات تاثیر می گذارد؟

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

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

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

چگونه کش مرورگر را در وردپرس فعال کنیم؟

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

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

کش مرورگر

چگونه با افزونه Leverage Browser Caching کار کنیم؟

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

برای آن که بتوانید از این افزونه استفاده کنید، باید ابتدا این افزونه را از مخزن وردپرس نصب کنید؛ جالب است بدانید که این افزونه تاکنون بیش از 30 هزار نصب فعال در سایت های مختلف داشته است.

نصب افزونه Leverage Browser Caching

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

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

## EXPIRES CACHING ##

<IfModule mod_expires.c>

<span dir="LTR" style="font-family: Consolas;">ExpiresActive On
</span><span dir="LTR" style="font-family: Consolas;">ExpiresByType image/jpg "access 1 year"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType image/jpeg "access 1 year"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType image/gif "access 1 year"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType image/png "access 1 year"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType text/css "access 1 month"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType text/html "access 1 month"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType application/pdf "access 1 month"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType text/x-javascript "access 1 month"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType application/x-shockwave-flash "access 1 month"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresByType image/x-icon "access 1 year"</span>

<span dir="LTR" style="font-family: Consolas;">ExpiresDefault "access 1 month"</span>

<span dir="LTR" style="font-family: Consolas;"></IfModule></span>

<span dir="LTR" style="font-family: Consolas;">## EXPIRES CACHING ##</span>

پس از اضافه کردن این فایل به htaccess ، حتما آن را ذخیره کنید و سایت را رفرش کنید.

در کد بالایی اگر دقت کنید، دوره های زمانی مانند یک سال و یک ماه را می توانید ببینید این دوره ها به انواع خاصی از فایل تعلق دارند.برای مثال در کد نوشته شده است که فایل هایی که  در قالب jpg هستند، به مدت یک سال کش شوند. شما می توانید این دوره های زمانی که کش کنید و هر مدتی که خواستید، قرار دهید.

کش مرورگر

تفاوت میان هدر Expires و Cache-Control در چیست؟

روشی که در این جا به شما یاد دادیم، Expires نام دارد و بیشتر افرادی که کار خودشان را تازه آغاز کرده اند، به راحتی می توانند از این روش در htaccess برای تنظیمات کش استفاده کنند. زمانی که کمی تخصص و تسلط بیشتری به تنظیمات کش پیدا کردند، به سراغ روشی با امکانات بیشتر می روند که یکی از این روش ها Cache-Control است. توجه داشته باشید که این امکان وجود دارد که سرور یا هاست شما از متد Expire ساپورت نکند، در این صورت شما مجبور هستید که از Cache-Control استفاده کنید.

اگر کنجکاو هستید تا در مورد Cache-Control بیشتر بدانید، ادامه مقاله برای شماست.

Cache-Control چیست؟

Cache-Control یکی از روش هایی است که امکان کنترل بیشتر بر روی کش مرورگر را در اختیار شما می گذارد و شما می توانید به سادگی از آن استفاده کنید. ما مثالی از فایل htaccess را در زیر برایتان آورده ایم.

<span style="font-family: Consolas;"># 1 Month for most static assets
</span><span style="font-family: Consolas;"><filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
</span>
<span style="font-family: Consolas;">Header set Cache-Control "max-age=2592000, public"</span>
<span style="font-family: Consolas;"></filesMatch></span>

کدی که برایتان آورده ایم مربوط به تنظیمات هدر Cache-Control بر اساس نوع فایل است.

عملکرد Cache-Control چگونه است؟

برای آن که به خوبی با عملکرد Cache-Control آشنا شوید، باید کد های آن را خط به خط بررسی کنیم.

<strong># 1 Month for most static assets</strong>

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

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

<strong> <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"></strong>

همانطور که مشاهده می کنید، داخل پرانتز فرمت های مختلفی آورده شده است؛ این به معنای آن است که اگر فایلی این فرمت ها را داشت، کاری را برایش انجام بده. لیست فایل های مختلفی در این جا می توانید مشاهده می کنید که دستورات کش متفاوتی روی آن ها اجرا می شود. اگر شما نخواهید که مثلا فایل هایی با قالب gif کش شوند، می توانید آن را حذف کنید و فایل هایی با قالبhtml  را جایگزین کنید.

<strong>Header set Cache-Control "max-age=2592000, public"</strong>

در این خط کد هدرهای اصلی جایگزین می شوند و مقدار می گیرند.

بخش اول این خط کد یعنی Header set Cache-Control مربوط به تنظیم یک هدر است. بخش دوم یعنی max-age=2592000 تعیین کننده این است که یک فایل برای چه مدت کش شود، در این جا مدت کش با ثانیه تنظیم می شود. یعنی شما باید مدت زمانی که می خواهید فایل ها کش شوند را به واحد ثانیه تبدیل کنید. در این جا 2592000 همان یک ماه است.

بخش سوم این کد یعنی public عمومی بودن فایل را تعیین می کند و اگر بخواهید کش شود، یک تنظیمات هوشمندانه است.

<strong></filesMatch></strong>

این خط به معنای این است که عبارت به پایان رسیده و این قطعه کد را می بندد.

کش مرورگر

معایب مشکلاتی که کش به همراه دارد

اگر بخواهید که فایل های html یا موارد دیگر سایتتان را برای مدت طولانی مانند 1 سال کش کنید، این فایل ها در حافظه مرورگر برای 1 سال به خاطر سپرده می شوند و برای بازدیدکنندگان سابقتان، آپدیت نخواهد شد؛ دلیل این موضوع نیز این است که کاربران شما صفحات جدید را نمی بینند، بلکه صفحات کش شده قبلی را می بینند. اگر فایلی دارید که آن را آپدیت می کنید (برای مثال فایل های css) را با استفاده کردن از URL fingerprinting می توانید به راحتی این مشکل را حل کنید.

اما URL fingerprinting به چه معناست و چگونه می تواند این مشکل را حل کند؟ شما می توانید اسامی جدیدی به فایل هایی مانند css بدهید و با این اقدام، کاری کنید که کاربران به جای آن که فایل های کش شده قبلی را ببینند، فایل های جدیدی را ببینند. فرض کنید که نام فایل css شما، main.css است، اگر شما این فایل را به روز کرده اید و می خواهید که کاربرانی که قبلا از صفحه شما بازدید کرده اند، فایل قبلی را نبینند و فایل جدید برایشان نمایش داده شود، باید نام آن را به main_1.css تغییر دهید؛ تا هر زمان که نسبت به آپدیت اقدام کنید، می توانید نام فایل ها را تغییر دهید.

 سخن آخر

در این مقاله در مورد Leverage Browser Caching صحبت کردیم و به شما یاد دادیم که چگونه از این روش برای افزایش سرعت سایتتان استفاده کنید. برای افزایش سرعت سایت به جز Leverage Browser Caching و Cache-Control، روشی به نام ETAGS و Expiry Headers وجود دارد که شما می توانید مقاله ETAGs چیست و چگونه کار می کند را در سایتمان مطالعه کنید.

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

سوالات متداول

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

دیدگاهتان را بنویسید

آدرس ایمیل خود را را با خیال راحت وارد کنید، چون نمایش داده نخواهد شد