Skip to content
GitHub

အဓိက Performance Metrics များကို နားလည်ခြင်း

ဘာတွေကို တိုင်းတာသလဲ၊ ဘာကြောင့် တိုင်းတာသလဲ?

Section titled “ဘာတွေကို တိုင်းတာသလဲ၊ ဘာကြောင့် တိုင်းတာသလဲ?”

Website တစ်ခု Loading ဖြစ်နေတဲ့ အချိန်အတွင်းမှာ ဖြစ်ပေါ်လာတဲ့ အဆင့်အမျိုးမျိုးကို မတူညီတဲ့ Metrics တွေနဲ့ ခွဲခြား တိုင်းတာရပါတယ်။ တိုင်းတာချက် (Metric) တစ်ခုတည်းနဲ့ Website တစ်ခုလုံးရဲ့ အခြေအနေကို ပုံဖော် ပြောပြလို့ မရနိုင်ပါဘူး။

  • ဘာကို တိုင်းတာတာလဲ: User က Website ကို ပထမဆုံး စတင် ဖွင့်လိုက်တဲ့အချိန် (ဥပမာ - Link ကို နှိပ်လိုက်တဲ့ အချိန် ဒါမှမဟုတ် URL ကို ရိုက်ထည့်လိုက်တဲ့ အချိန်) ကနေစပြီး၊ Server ဆီကနေ ပြန်ပို့ပေးတဲ့ ပထမဆုံး အချက်အလက် (HTML Response ရဲ့ ပထမဆုံး Byte) ကို User ရဲ့ Browser က လက်ခံရရှိတဲ့ အချိန်အထိ ကြာချိန်ကို တိုင်းတာပါတယ်။
  • ဘာကြောင့် တိုင်းတာတာလဲ: ဒါဟာ Server ရဲ့ တုံ့ပြန်မှု မြန်နှုန်းနဲ့ Network ရဲ့ နှေးကွေးမှု (Latency) ကို အဓိက ပြသပါတယ်။ TTFB စကတည်းက နှေးနေပြီ ဆိုရင်တော့၊ အနောက်က လိုက်လာမယ့် အရာအားလုံးကလည်း အလိုလို နှေးကွေးသွားမှာ သေချာပါတယ်။
  • ဘာကို တိုင်းတာတာလဲ: Website စာမျက်နှာ (Viewport) ပေါ်မှာ စာသား၊ ပုံ၊ ဒါမှမဟုတ် တခြား ရုပ်ထွက် အစိတ်အပိုင်း (Content) တစ်ခုခုရဲ့ ပထမဆုံး အပိုင်းအစလေး စတင် ပေါ်ထွက်လာတဲ့ အချိန်ကို တိုင်းတာတာပါ။
  • ဘာကြောင့် တိုင်းတာတာလဲ: User အတွက်တော့ မျက်နှာပြင် အဖြူကြီးကနေ တစ်ခုခု စတင် ပြောင်းလဲလာတဲ့ အချိန်ဖြစ်ပြီး၊ “အော်… Website က စတင် အလုပ်လုပ်နေပြီပဲ” လို့ ပထမဆုံး သိရှိ ခံစားရတဲ့ အချိန် ဖြစ်လို့ပါ။
  • ဘာကို တိုင်းတာတာလဲ: Website စာမျက်နှာပေါ်မှာ မျက်စိနဲ့ မြင်ရတဲ့ အကြီးဆုံးပုံ (Image) ဒါမှမဟုတ် အရွယ်အစား အကြီးဆုံး စာသားအစု (Text Block) အပြည့်အဝ ပေါ်လာတဲ့ အချိန်ကို တိုင်းတာပါတယ်။
  • ဘာကြောင့် တိုင်းတာတာလဲ: Website ရဲ့ အဓိကကျတဲ့ (အရေးအကြီးဆုံး) အကြောင်းအရာတွေ User ဆီ ရောက်ရှိလာတဲ့ အချိန်ကို ကိုယ်စားပြုလို့ ဖြစ်ပါတယ်။ (FCP က တစ်ခုခု စပေါ်တာကို တိုင်းတာပြီး၊ LCP က အဓိက အရာ ပေါ်လာတာကို တိုင်းတာတာပါ)။

၄။ First Input Delay (FID) နှင့် Interaction to Next Paint (INP)

Section titled “၄။ First Input Delay (FID) နှင့် Interaction to Next Paint (INP)”
  • FID (First Input Delay): User က Website ကို ပထမဆုံး စတင် အသုံးပြုတဲ့အချိန် (ဥပမာ - ခလုတ် နှိပ်တာ) မှာ၊ Browser က အဲ့ဒီ လုပ်ဆောင်ချက်ကို တကယ် စတင် တုံ့ပြန် (Response) ပေးနိုင်တဲ့ အချိန်အထိ ကြာချိန်ကို တိုင်းတာပါတယ်။ (မှတ်ချက် - ယခုအခါ FID အစား INP ကို ပိုမို အသုံးပြုလာကြပါပြီ)။
  • INP (Interaction to Next Paint): User က Website ထဲမှာ ရှိနေစဉ် တစ်လျှောက်လုံး အသုံးပြုမှုတွေ (နှိပ်တာ၊ ပွတ်ဆွဲတာ၊ Keyboard သုံးတာ) အားလုံးရဲ့ အပေါ်မှာ၊ Website က ဘယ်လောက် မြန်မြန် တုံ့ပြန်နိုင်စွမ်း ရှိသလဲ (Responsiveness) ဆိုတာကို ခြုံငုံ တိုင်းတာပါတယ်။
  • ဘာကြောင့် တိုင်းတာတာလဲ: ဒါဟာ Website က User ရဲ့ အသုံးပြုမှု (Action) တစ်ခုကို ဘယ်လောက် မြန်မြန်ဆန်ဆန်နဲ့ ချောချောမွေ့မွေ့ တုံ့ပြန် (Feedback ပြန်ပေး) နိုင်သလဲ ဆိုတာကို အတိအကျ ပြသလို့ ဖြစ်ပါတယ်။
  • ဘာကို တိုင်းတာတာလဲ: Website Loading ဖြစ်နေစဉ် ဒါမှမဟုတ် အသုံးပြုနေစဉ် အတွင်းမှာ၊ ရုတ်တရက် အရာဝတ္ထုတွေ နေရာ ရွေ့လျားသွားတာ (ဥပမာ - စာတွေ၊ ပုံတွေ အပေါ်အောက် ခုန်သွားတာ) တွေ အားလုံးရဲ့ စုစုပေါင်း ပမာဏကို တိုင်းတာပါတယ်။ Layout Shift ဆိုတာ မျက်စိနဲ့ မြင်နေရတဲ့ အရာတစ်ခုက မူလနေရာကနေ ရုတ်တရက် ရွေ့သွားတာကို ခေါ်တာပါ။
  • ဘာကြောင့် တိုင်းတာတာလဲ: ဒါဟာ Website ရဲ့ ရုပ်ထွက် တည်ငြိမ်မှု (Visual Stability) ကို တိုင်းတာတာပါ။ CLS များရင် User တွေ အရမ်း စိတ်အနှောင့်အယှက် ဖြစ်ရပါတယ်။
  • ဘာကို တိုင်းတာတာလဲ: Website တစ်ခုလုံး အပြည့်အဝ စိတ်ချလက်ချ အသုံးပြုလို့ရတဲ့ အခြေအနေကို ရောက်ဖို့ ဘယ်လောက် ကြာသလဲ ဆိုတာကို တိုင်းတာပါတယ်။ Website တစ်ခု TTI ရောက်ပြီဆိုရင် အသုံးဝင်တဲ့ အကြောင်းအရာတွေလည်း ပြသနေပြီ (FCP ဖြစ်ပြီးပြီ)၊ အများစုသော ခလုတ်တွေကို နှိပ်လို့ရနေပြီ၊ ပြီးတော့ User အသုံးပြုတာကိုလည်း ၅၀ မီလီစက္ကန့် အတွင်း ချက်ချင်း တုံ့ပြန် (Respond) နိုင်ပြီလို့ ဆိုလိုပါတယ်။
  • ဘာကြောင့် တိုင်းတာတာလဲ: ဒါဟာ Website က User အသုံးပြုဖို့အတွက် တကယ်ကို အပြည့်အဝ “အဆင်သင့် (Ready)” ဖြစ်သွားပြီ ဆိုတာကို ညွှန်ပြပေးလို့ပါ။
  • ဘာကို တိုင်းတာတာလဲ: FCP (တစ်ခုခု စပေါ်တဲ့အချိန်) နဲ့ TTI (အပြည့်အဝ သုံးလို့ရတဲ့ အချိန်) ကြားမှာ၊ Website ရဲ့ အဓိက အလုပ်လုပ်တဲ့ လမ်းကြောင်း (Main Thread) ကြီး ၅၀ မီလီစက္ကန့်ထက် ပိုပြီး ပိတ်ဆို့ (Block) ခံထားရတဲ့ အချိန်တွေ အားလုံးရဲ့ စုစုပေါင်းကို တိုင်းတာပါတယ်။ အဲ့ဒီ Block ဖြစ်နေတဲ့ အချိန်တွေ အတွင်းမှာ User က ဘာသွားနှိပ်နှိပ် Website က တုံ့ပြန်နိုင်စွမ်း (Response ပေးနိုင်စွမ်း) မရှိပါဘူး။
  • ဘာကြောင့် တိုင်းတာတာလဲ: Website က အပြည့်အဝ အသုံးပြုနိုင်တဲ့ အနေအထားကို ရောက်ဖို့ User က ဘယ်လောက်တောင် စိတ်ပျက်ဖွယ် စောင့်ဆိုင်းနေရသလဲ ဆိုတာကို တိုင်းတာဖို့ ကူညီပေးပါတယ်။ ဒါဟာ FID နဲ့ INP ကို ပိုကောင်းလာအောင် ပြင်ဆင်ဖို့အတွက် အလွန် အရေးပါတဲ့ Lab Metric တစ်ခုလည်း ဖြစ်ပါတယ်။

Metrics တွေက သုံးစွဲသူရဲ့ ခံစားချက်နဲ့ ဘယ်လို ဆက်စပ်နေသလဲ?

Section titled “Metrics တွေက သုံးစွဲသူရဲ့ ခံစားချက်နဲ့ ဘယ်လို ဆက်စပ်နေသလဲ?”

Metric တစ်ခုချင်းစီက Website ပွင့်လာတဲ့ (Loading) ဖြစ်စဉ် တစ်လျှောက်မှာ User ရဲ့ စိတ်ခံစားမှု အဆင့်ဆင့်ကို အောက်ပါအတိုင်း ကိုယ်စားပြု ပြောပြပေးနေပါတယ် ခင်ဗျာ။

  • FCP (First Contentful Paint)“အော်… တစ်ခုခုတော့ စပေါ်လာပြီ။ အလုပ်လုပ်နေတယ်ပဲ။” (Happening)
  • LCP (Largest Contentful Paint)“အဓိက အကြောင်းအရာကြီးတွေ ပေါ်လာပြီ။ ကြည့်လို့ ရနေပြီပဲ။” (Useful)
  • FID / INP / TTI (Responsiveness)“ငါ နှိပ်လိုက်တာ ချက်ချင်း အလုပ်လုပ်ရဲ့လား? နှေးကွေး ထစ်ငေါ့နေတာမျိုး ရှိလား?” (Usable)
  • CLS (Visual Stability)“ငါ ဖတ်နေတုန်း စာတွေ ခုန်သွားလား? မှားနှိပ်မိအောင် ခလုတ်တွေ ရွေ့သွားလား? တည်ငြိမ်မှု ရှိရဲ့လား?” (Delightful)