HTML Cache یا کش سایت راهی برای افزایش سرعت سایت

دیگه حتماً می‌دونین که ترافیک سنگین یه وبسایت ممکنه منجر به مشکلات عملکردی مثل کندتر شدن سرعت صفحه بشه. حالا امروز تو این پست یه فرآیند ساده درباره افزایش سرعت لود صفحه بهتون معرفی می‌کنم. به طور خلاصه می‌خوام بهتون بگم که نه تنها تصاویر و اسکریپت ها، بلکه محتوای HTML رو هم کش (Cache) کنین!

برای این که صحبت کردن درمورد کش سایت یا همون کش HTML رو شروع کنیم بهتره اول اصلاً ببینم خود کش چه مفهومی داره:

Cache به چه معناست؟

کش یا حافظه پنهان یکی از انواع حافظه‌ست که خیلی از بقیه سریع‌تره! این حافظه تو پردازنده قرار داره و شامل مقداری از اطلاعات حافظه رم میشه. وقتی که یه پردازنده به اطلاعاتی نیاز داره برای دسترسی سریع‌تر سراغ کش خودش میره. البته این یه تعریفی از کش تو وسایل حافظه دار مثل کامپیوتر بود اما هدف اصلی ما تو این پست کش سایت یا HTML Cache هست.

HTML Cache چیه؟

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

کش سایت مثل همون کش کامپیوتره و سرور وب مثل رم میمونه! یعنی وقتی کاربر فلان صفحه رو باز میکنه به جاب ابن که اطلاعات رو از سرور که سرعت کمتری داره، دریافت کنه از کش سایت استفاده میکنه تا سایت تو زمان کمتری لود بشه! حتماً برای خودتون پیش اومده که وارد سایتی بشین و هر بار که کلیک می‌‌کنین کلی طول بکشه تا صفحه بالا بیاد، به نظرتون اگه این صفحه کش داشت بازهم سرعتش به این کندی بود؟ معلومه که نه!

همونطور که تو اول پست گفتم اگه ترافیک یه سایتی زیاد باشه، درخواست از سرور هم افزایش پیدا میکنه پس در نتیجه سرعت بارگذاری صفحه یرای چندتا از کاربرها کند میشه ولی با داشتن کش HTML دیگه لازم نیست همه کاربرا اطلاعات رو از سرور درخواست کنن، در واقع اطلاعات از خود سایت درخواست میشه و تو سیستم کش ذخیره میشه و وقتی یه کاربر دیگه دوباره همین اطلاعات رو درخواست کرد به سرعت در اختیارش گذاشته میشه چراا؟ چون این بار اطلاعات از کش سایت درخواست شده و به همین ترتیب سایت سرعت پیدا میکنه!

استفاده از کش سایت برای ارتقای سرعت بارگذاری

تصویر زیر یه اسکرین شات از Macy هست و تاثیر کش نشدن HTML صفحه اصلی در شبکه ارائه محتوا سایت Macys.com رو نشون میده که یک ثانیه به زمان بارگذاری اضافه میکنه و از اونجایی که هر صفحه دیگه‌ای بعد از بارگذاری و تجزیه HTML بارگیری میشه، لود این صفحه حدود 16.84 ثانیه طول کشید که زمان زیادیه!

حالا بریم سراغ سایت Gap.com که در مارس سال 2019 به عنوان یه سایت کند معرفی شده بود. از اون زمان تا حالا این Gap یه وبسایت جدیدی رو راه اندازی کرده و محتوای اون رو در CDN خودش کش HTML کرده و ما شاهد این هستیم که HTML Cache باعث شده صفحه اصلی تو 3.60 ثانیه لود بشه (قبلاً بین 15 تا 20 ثانیه طول می‌کشید).

کش HTML تو سایت های تبلیغاتی و وب سایت های پویا کار ساده‌ای نیست چون که به صورت پیش فرض تو CDN اتفاق نمیفته و این کش کردن به صورت نرمال بیشتر برای صفحاتی با منابع Static مثل تصاویر، اسکریپت‌ها و غیره پیش میاد.

اگه محتوای سایت تغییر کرد چی میشه؟

حتماً به خودتون گفتین خب اوکی همه این حرف‌ها درست ولی اگه اومدیم و محتوای وب سایت رو تغییر دادیم اونوقت چی؟ نکنه پست جدید از دید کاربران خارج بشه چون اون رو کش نکردیم؟!!

باید بگم که نگران نباشین همه این اتفاق‌ها پیش بینی شده و یه کش HTMl فقط قابلیت ذخیره کردن فایل رو نداره بلکه یه راهی برای خالی کردن و بازسازی صفحه تو شرایط خاص مثل همین انتشار محتوای جدید رو هم داره!

HTML Cache در صفحات پویا و استاتیک

برای سایت هایی که محتوای استاتیک دارن (یعنی به هیچ وجه شخصی سازی نشدن) کش صفحه هیچ مشکلی به وجود نمیاره و راحته؛ ولی اون سایت هایی که محتوای پویا یا داینامیک دارن و این محتوا بین کاربران تغییر می‌کنه، کش HTML می‌تونه باعث ایجاد یه سری خطا بشه!

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

2 راه حل برای مشکل کش نشدن صفحات Dynamic

1. شخصی سازی صفحه وب رو تو پرونده‌های جاوا اسکریپت جداگونه‌ای پیاده سازی کنین و اون‌ها رو برای مدت کوتاه چه طولانی کش نکنین!
2. HTML Cache رو فقط برای کاربران ناشناس (اون‌هایی که وارد سایت نشده‌اند یا هیچ محصولی به سبد خریدشون اضافه نکردن) انجام بدین.

خب حالا بیایین هر گزینه‌ رو بررسی کنیم:

1. شخصی سازی در Script

اولین گزینه اجرای شخصی سازی در پرونده‌های جاوا اسکریپت JavaScript جداگونه بود که سایت Gap هم همین کار رو انجام میده.

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

(برای این که روش اسایت Gap رو تایید کنم خودم اومد تو مرورگر کروم و جاوا اسکریپت رو غیر فعال کردم (View>Developer>Developer tool) و بعد روی سه تا نقطه سمت راست کلیک کردم و گزینه Setting رو انتخاب کردم. (غیر فعال کردن جاوا اسکریپت زیر مجموعه قسمت Debugger است.)

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

2. کش سایت برای کاربران ناشناس

Gap یه وبسایت جدیدی راه اندازی کرد که از آخرین تکنولوژی‌ها استفاده میکرد. اگه شما به کش HTML روی پلتفروم تجارت الکترونیک موجود نیاز دارین، بهتره که از گزینه کاربران ناشناس استفاده کنین.

این تکنیک به عنوان “Punching a hole” هم شناخته میشه. خب بریم سراغ نحوه عملکردش:

وب سرور یا CDN همه صفحات رو کش می‌کنه بجز اون‌‌هایی که از قبل براشون استثنا قائل شده باشیم و درخواست کرده باشیم که کش نشن (مثلاً یه سری معیاری رو تعیین می‌کنین و میگین اون صفحاتی که این معیارها رو دارن نباید کش بشه)! حالا رایج‌ترین اون‌ها Session cookie هایی هستن که نرم افزار وقتی کاربری وارد صفحه میشه یا یه آیتمی رو به سبد خریدش اضافه می‌کنه براش اعمال می‌کنه.

تو عکس زیر یه سری از سشن کوکی هایی رو می‌بینین که برای eCommerce رایج هستن. بعضی از اونا برای سایت های وردپرس و فروشگاه اینترنتی ووکامرس Woocommerce هستن.

مجدداً میگم که این کوکی ها برای کاربرانی هست که محتوای شخصی سازی شده دارن (مثل همونایی که یه آیتمی رو به سبد خریدشون اضافه می‌کنن) و کش نکردن صفحاتشون باعث میشه که سرعت لود پیج کم بمونه و افزایشی نداشته باشه اما احتمالاً این افراد یه درصد کمی از بازدید کنندگان وبسایت رو شامل میشن و بیشتر کاربران شما یه سرعت خوبی رو تجربه می‌کنن!

بیایین تصور کنین که سرور سایت شما Nginx هست و Magento2 حافظه شما رو قوی می‌کنه! در زیر تنظیمات پیکربندی برای فعال کردن Cache کاربران ناشناس رو می‌بینین:

            location /{ proxy_cache my_cache; proxy_cache_bypass $cookie_admin $cookie_PHPSESSID $cookie_private_content_version; # ... }
                            

فعال کردن این مورد در سرور وب یا load balancer باعث افزایش عملکرد میکنه، اما بیشترین فایده‌ وقتی حاصل میشه که اون رو روی CDN پیاده کنین!

انواع کش

به طور کلی ما دونوع کش داریم؛ کش مرورگر Browser Cache و کش سرور Server Cache. کش مرورگر از سمت کاربر انجام میشه و کش سرور از سمت سرور!

کش سرور

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

احتمالاً شما اصطلاح کش قطعه و کش کامل رو شنیدین، این دوتا اصطلاح مربوط به کش سرور هستن، کش کامل همون چیزی بود که تا الان کلی درموردش حرف زدیم و کش قطعه فقط بیت‌ها و قطعات داده رو در مقایسه با کل صفحه ذخیره میکنه!

کش مرورگر

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

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

مزایای کش HTML

سوالی که بعد از این همه صحبت ممکنه براتون پیش بیاد اینه که آیا اصلاً کش سایت تاثیر مثبتی هم داره؟ یا ما می‌تونیم مثلاً وقتی ما میتونیم با کدنویسی بهینه یا Optimized سرعت سایت رو افزایش بدیم پس دیگه چه کاریه بخوایم صفحه رو کش کنیم!

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

البته یه خوبی دیگ کش کردن هم اینه که سایت تون می‌تونه تعداد بازدید بیشتری رو تحمل کنه طوری که اگه صد نفر هم از سایت شما بازدید کردن، این بازدید کردن زیادشون تاثیر چشمگیری تو سرعت سایت نداشته باشه!

حرف آخر درمورد HTML Cache

در پایان باید بگم که برای بعضی از سایت ها پیدا کردن کوکی Cookie برای دور زدن، امکان پذیر نیست. در این مورد می‌تونیم صفحات اصلی مثل هوم پیج Homepage ، صفحات لیست محصولات و صفحات جزئیات محصولات رو کش کنیم که البته یه نقطه ضعف یا شاید بهتره بگم یه ایراد داره و اونم اینه که قوانین کش کردن برای هر صفحه یا کتگوری جدیدی باید آپدیت بشن!

در کل کش کردن یه تکنولوژی جدیده که باعث میشه سرعت سایت شما بدون پرداخت هزینه های عجیب و غریب به طور شگفت انگیزی افزایش پیدا کنه! اگه بتونین از کش hTML به درستی استفاده کنین یه وب سایت خیلی خوب با سرعت زیاد دارین و دیگه بار اضافی روی دوش سرور سایت شما قرار نمی‌گیره!