Cumulative Layout Shift (CLS)

💡 ရည်ရွယ်ချက်

CLS ဆိုတာ ဘာလဲ၊ စာမျက်နှာပေါ်က အရာတွေ ဘာကြောင့် သူတို့ဘာသာ ရွေ့သွားရတာလဲ၊ ဘယ်အရာတွေကြောင့် အဲ့ဒီလို ရွေ့လျားမှု (Layout Shift) တွေ ဖြစ်ပေါ်နေသလဲ ဆိုတာကို ရှင်းလင်းစွာ နားလည်စေရန် ဖြစ်ပါတယ်။

CLS - စာမျက်နှာ တည်ငြိမ်မှုကို တိုင်းတာခြင်း

• ဘာကို တိုင်းတာတာလဲ: CLS က စာမျက်နှာပေါ်က မမျှော်လင့်ဘဲ ရုတ်တရက် ရွေ့လျားသွားတဲ့ အရာ (Elements) တွေကို တိုင်းတာပါတယ်။ ဥပမာ - သင် ကလစ် နှိပ်ဖို့ ကြိုးစားနေတဲ့ ခလုတ်လေးက ရုတ်တရက် အောက်ကို ရွေ့သွားပြီး တခြား ဟာကို သွားနှိပ်မိတာမျိုး ကြုံဖူးပါသလား? အဲ့ဒါကို တိုင်းတာတာပါ။

အလွယ်မှတ်ရန်: CLS အမှတ် နည်းလေ၊ Page က ပိုပြီး တည်ငြိမ်လေ ဖြစ်ပါတယ်။

• ဘာကြောင့် အရေးကြီးသလဲ: စာဖတ်နေရင်းနဲ့ စာသားတွေ အပေါ်အောက် ရွေ့သွားရင်၊ ဒါမှမဟုတ် နှိပ်ချင်တဲ့ ခလုတ်က မထင်မှတ်ဘဲ ရွေ့သွားရင် သုံးစွဲသူတွေအတွက် အရမ်းကို စိတ်အနှောင့်အယှက် ဖြစ်စေပါတယ်။ (User Experience ကို အကြီးအကျယ် ထိခိုက်စေပါတယ်)။

• Layout Shift ဆိုတာ ဘာလဲ? စာမျက်နှာပေါ်က အရာတစ်ခု (ဥပမာ - ဓာတ်ပုံ၊ စာပိုဒ်၊ ခလုတ်) ရဲ့ မူလ နေရာ (Position) ဟာ မထင်မှတ်ဘဲ နောက်တစ်နေရာကို ပြောင်းလဲ ရွေ့လျားသွားတာကို ခေါ်ဆိုပါတယ်။

CLS စံနှုန်း သတ်မှတ်ချက်များ

• Good (ကောင်း): 0.1 သို့မဟုတ် ထို့ထက်နည်း။
• Needs Improvement (တိုးတက်ရန် လို): 0.1 မှ 0.25 ကြား။
• Poor (ညံ့): 0.25 ထက် ပိုများနေခြင်း။

CLS မကောင်းစေတဲ့ အဓိက အကြောင်းရင်းများ

၁။ Width/Height မပါတဲ့ ဓာတ်ပုံများ (Images without Dimensions)

ဓာတ်ပုံတွေ (Images) ကို ထည့်တဲ့အခါ width နဲ့ height အတိအကျ မသတ်မှတ်ထားရင်၊ Browser က အဲ့ဒီပုံအတွက် နေရာ ဘယ်လောက် ချန်ထားပေးရမယ် ဆိုတာကို ကြိုတင် မသိနိုင်ပါဘူး။ နောက်မှ ဓာတ်ပုံ အပြည့်အဝ ပေါ်လာတဲ့အခါ နေရာယူလိုက်တဲ့အတွက် အောက်က အရာတွေ အကုန်လုံး အောက်ကို ရွေ့သွားစေပါတယ်။

၂။ ကြော်ငြာတွေ၊ iframe တွေမှာ Dimensions မသတ်မှတ်ထားခြင်း

ဒါတွေကလည်း ဓာတ်ပုံတွေနဲ့ သဘောတရား အတူတူပါပဲ။ သူတို့ ယူမယ့် နေရာ (Space) ကို ကြိုတင် မသတ်မှတ်ထားရင် Content တွေ ရွေ့သွားတတ်ပါတယ်။

၃။ နောက်မှ ထပ်ထည့်လိုက်တဲ့ အကြောင်းအရာများ (Dynamically Injected Content)

စာမျက်နှာ စတင် ပွင့်လာပြီးနောက်ပိုင်းမှ၊ JavaScript နဲ့ အပေါ်ဘက်မှာ အကြောင်းအရာ တစ်ခုခုကို ထပ်ထည့်လိုက်တဲ့ အခါမျိုးပါ။ ဥပမာ - စာမျက်နှာ ပွင့်ပြီးမှ ရုတ်တရက် ကြီးမားတဲ့ ပရိုမိုးရှင်း Banner တစ်ခု အပေါ်ဆုံးမှာ ထွက်လာရင်၊ အောက်က Content တွေ အားလုံး အောက်ကို တွန်းချခံရသလို ရွေ့သွားပါတယ်။

၄။ Web Fonts တွေကြောင့် စာသားများ ပြောင်းလဲသွားခြင်း (FOUT/FOIT)

Custom Font တွေ Load လုပ်နေတဲ့ အချိန်မှာ၊ Browser က မူလ Font နဲ့ အရင် ပြထားပြီး၊ Custom Font ရောက်လာမှ ပုံစံပြောင်းလိုက်တဲ့အခါ စာလုံးအရွယ်အစား (Size) နဲ့ အကွာအဝေး (Spacing) တွေ ကွာခြားသွားတဲ့အတွက် စာပိုဒ်တွေ ရှည်ထွက်လာတာ ဒါမှမဟုတ် တိုသွားတာမျိုး ဖြစ်ပြီး Layout Shift ဖြစ်စေပါတယ်။

၅။ Network Response ကို စောင့်ပြီးမှ DOM ကို ပြောင်းလဲခြင်း

ဥပမာ - Server ဆီကနေ Data ပြန်လာတာကို စောင့်ပြီးမှ (Loading State ကို ဂရုမစိုက်ဘဲ) စာမျက်နှာပေါ်က Data တွေကို ရုတ်တရက် အစားထိုး ပြောင်းလဲလိုက်မယ်ဆိုရင်လည်း Layout Shift အကြီးအကျယ် ဖြစ်ပေါ်စေပါတယ်။

---

Layout Shift ဖြစ်စေတဲ့ အရာတွေကို ဘယ်လို ရှာဖွေမလဲ?

• Chrome DevTools (Performance Tab): “Experience” ဆိုတဲ့ လိုင်းလေးမှာ CLS Score နဲ့ ဘယ်အချိန်မှာ Layout Shift ဖြစ်သွားသလဲ ဆိုတာကို အနီရောင်လေးတွေနဲ့ ပြသပေးပါတယ်။ အဲ့ဒါကို နှိပ်ကြည့်ရင် ဘယ် Element တွေ ရွေ့သွားသလဲ အတိအကျ မြင်ရပါတယ်။

• Lighthouse / PageSpeed Insights: Report ထဲမှာ CLS ကို တိုက်ရိုက် ဖြစ်စေတဲ့ Elements တွေကို စာရင်းပြုစုပြီး တိတိကျကျ ပြသပေးပါတယ်။

• WebPageTest.org: Filmstrip (ဗီဒီယို ပုံစံ) ကို ကြည့်ပြီး Website ပွင့်လာတဲ့ အချိန်အတွင်းမှာ ဘယ်နေရာတွေက ရွေ့လျားသွားသလဲ ဆိုတာကို အလွယ်တကူ မြင်တွေ့နိုင်ပါတယ်။