Smarter Loading - Prefetching & Pre-rendering

Content များကို ကြိုတင် Load လုပ်ခြင်း

Website ပေါ်မှာ Page တစ်ခုကနေ နောက်တစ်ခုဆီ ကူးပြောင်း (Navigate) တာကို မျက်စိ တစ်မှိတ်အတွင်း ချက်ချင်း ဖြစ်သွားသကဲ့သို့ အလွန် လျင်မြန်အောင်၊ အောက်ပါ Predictive Loading (ကြိုတင် ခန့်မှန်း Load လုပ်ခြင်း) နည်းပညာတွေနဲ့ ဖန်တီး လုပ်ဆောင်နိုင်ပါတယ်။

Predictive Prefetching (ကြိုတင် ခန့်မှန်းပြီး Data များ Fetch ခြင်း)

ဘာလဲ? User က နောက်ထပ် ဘယ် Link ကို Click နှိပ်နိုင်ခြေ အရှိဆုံးလဲ ဆိုတာကို အလိုအလျောက် ခန့်မှန်းပြီး၊ User က လက်ရှိ Page ကို ဖတ်နေစဉ် (အားလပ်နေစဉ်) မှာတင် နောက် Page အတွက် လိုအပ်တဲ့ Content တွေကို နောက်ကွယ်ကနေ (Background မှာ) ကြိုတင် Download ဆွဲထားခြင်း ဖြစ်ပါတယ်။
ဘယ်လို အလုပ်လုပ်လဲ?
- အသုံးများဆုံး အချက်ပြမှု (Signal) တစ်ခုကတော့၊ အသုံးပြုသူက Link တစ်ခုပေါ်မှာ Mouse ကို သွားတင် (Hover) လိုက်ခြင်းဟာ အဲ့ဒီ Link ကို သေချာပေါက် Click နှိပ်နိုင်ခြေ ရှိကြောင်း ပြသတဲ့ အရိပ်အယောင် တစ်ခုပါပဲ။
- Quicklink လိုမျိုး JavaScript Libraries တွေက အဲ့ဒီလို အခြေအနေမျိုးကို ချက်ချင်း သိရှိနိုင်ပြီး၊ Page ကို နောက်ကွယ်ကနေ အလိုအလျောက် Prefetch လုပ် (Download ဆွဲ) ပေးနိုင်ပါတယ်။ တချို့ Libraries တွေ ဆိုရင် User ရဲ့ Screen ပေါ်မှာ Link တစ်ခု မြင်ရတာနဲ့ (Visible ဖြစ်တာနဲ့) ကြိုတင် ဆွဲထားပေးတာမျိုး အထိ ရှိပါတယ်။
ဘာကြောင့် မြန်တာလဲ? အသုံးပြုသူက အဲ့ဒီ Link ကို တကယ်တမ်း Click နှိပ်လိုက်တဲ့ အချိန်မှာ၊ လိုအပ်တဲ့ Page (HTML) ဟာ Browser ရဲ့ Cache ထဲမှာ ကြိုတင် Download ဆွဲပြီးသား အဆင်သင့် ဖြစ်နေတဲ့အတွက် ချက်ချင်း ဆိုသလို မျက်နှာပြင်ပေါ် ပေါ်လာလို့ပါပဲ။
စဉ်းစားရမည့် အချက်: အကယ်၍ သင် Prefetch လုပ်ထားတဲ့ (ကြိုဆွဲထားတဲ့) စာမျက်နှာကို အသုံးပြုသူက တကယ် ဝင်မကြည့်ဖြစ်ခဲ့ဘူး ဆိုရင်၊ User ရဲ့ Data (Mobile Data လိုမျိုး) နဲ့ Server ရဲ့ Bandwidth ကို အလကား ဖြုန်းတီးရာ ကျနိုင်ပါတယ်။ ဒါပေမဲ့ ဒီ ခေတ်မီ Tools တွေက စမတ်ကျ (Smart) တဲ့အတွက်၊ များသောအားဖြင့် User ရဲ့ အင်တာနက် Connection ကောင်းမွန် မြန်ဆန်မှသာ (သို့) Wi-Fi ချိတ်ထားမှသာ Prefetch လုပ်လေ့ ရှိကြပါတယ်။

Speculation Rules API

ဘာလဲ? ဒါက Chrome လို Browser တွေမှာ တစ်ခါတည်း ပါဝင်လာတဲ့ API အသစ် တစ်ခု ဖြစ်ပြီး၊ Developers တွေ အနေနဲ့ Custom JavaScript (Library တွေ) လုံးဝ မလိုအပ်ဘဲ HTML ထဲမှာတင် Pages တွေကို ကြိုတင် Render လုပ်ဖို့ Browser ကို တိုက်ရိုက် ညွှန်ကြား သတ်မှတ်နိုင်ပါတယ်။
ဘယ်လို အလုပ်လုပ်လဲ? <script type="speculationrules"> Tag လေးကို HTML ထဲ ထည့်ရေးလိုက်ရုံပါပဲ။ အဲ့ဒီအခါ Page ပေါ်ရှိ သတ်မှတ်ထားတဲ့ Link တွေကို User က Hover လုပ်တာ၊ ဒါမှမဟုတ် သေချာပေါက် နှိပ်တော့မယ့် အရိပ်အယောင် ပြတာနဲ့၊ Browser က အဲ့ဒီ Page ကို အလိုအလျောက် ကြိုတင် Render လုပ်ထားပါလိမ့်မယ်။
Pre-rendering နှင့် Prefetching ကွာခြားချက်: Pre-rendering က Prefetching ထက် နောက်ထပ် တစ်ဆင့် ပိုပြီး ရှေ့ရောက်ပါတယ်။ သူက HTML ဖိုင်ကို Download ဆွဲထားရုံ သက်သက် သာမကဘဲ၊ လိုအပ်တဲ့ Sub-resources အားလုံး (CSS, JS) ကိုပါ Download ဆွဲပြီး၊ Page ကြီး တစ်ခုလုံးကို နောက်ကွယ်က (မမြင်ရတဲ့) Tab တစ်ခုထဲမှာ အပြီးအစီး Render ပါ လုပ်ထားတာပါ။ ဒါကြောင့် အသုံးပြုသူက တကယ် Click နှိပ်လိုက်တဲ့အခါ၊ Browser က အဲ့ဒီ အဆင်သင့် ဖြစ်နေတဲ့ မမြင်ရတဲ့ Tab လေးကို ရှေ့ရောက်အောင် ပြသပေးလိုက်ရုံ (Swap လုပ်လိုက်ရုံ) သာ ဖြစ်ပါတယ်။
ဘာကြောင့် မြန်တာလဲ? ဤ Pre-rendering နည်းလမ်းက Page ကူးပြောင်းမှု (Navigation) ကို အမှန်တကယ် “စက္ကန့်ပိုင်းတောင် မကြာဘဲ ချက်ချင်း (Instant)” ဖြစ်သွားစေပါတယ်။