Cumulative Layout Shift (CLS)

ရည်ရွယ်ချက်

CLS ဆိုတာဘာလဲ၊ စာမျက်နှာပေါ်က အရာတွေ ဘာကြောင့်ရွေ့သွားရတာလဲ၊ ဘယ်အရာတွေကြောင့် ရွေ့လျားမှုဖြစ်နေသလဲဆိုတာကို နားလည်ရန်

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

• ဘာကိုတိုင်းတာ တာလဲ: CLS က စာမျက်နှာပေါ်က မမျှော်လင့်ဘဲ ရွေ့သွားတဲ့အရာတွေကို တိုင်းတာပါတယ်။ ဥပမာ - သင်ကလစ်လုပ်ဖို့ကြိုးစားနေတဲ့ခလုတ်က ရုတ်တရက်ရွေ့သွားတာမျိုး။

CLS နည်းလေ Page က တည်ငြိမ်လေဖြစ်ပါတယ်။

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

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

CLS အမှတ်သတ်မှတ်ချက်များ

• Good: 0.1 or less
• Needs Improvement: Between 0.1 and 0.25
• Poor: More than 0.25

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

1. Width/Height မပါတဲ့ ဓာတ်ပုံများ

ဓာတ်ပုံတွေမှာ width/height မသတ်မှတ်ထားရင် browser က နေရာဘယ်လောက်ယူမယ်ဆိုတာ မသိပါဘူး။ ဓာတ်ပုံအပြည့်ပေါ် လာတဲ့အခါ အခြားအရာတွေကို ရွေ့စေပါတယ်။

2. ကြော်ငြာတွေ၊ iframe တွေမှာ dimensions မသတ်မှတ်ထားခြင်း

ဒါတွေကလည်း ဓာတ်ပုံတွေလိုပဲ dimensions မသတ်မှတ်ထားရင် ရွေ့သွားတတ်ပါတယ်။

3. Dynamically Injected Content

စစခြင်း content တွေပေါ်ပြီးတဲ့ အချိန်မှ page အပေါ်မှာ content တစ်ခုထပ်ထည့်လိုက်တဲ့အခါ။ ဥပမာ - စာမျက်နှာအပေါ်ပိုင်းမှာ ရုတ်တရက် banner တစ်ခုပေါ်လာရင် အောက်က content တွေအားလုံး ရွေ့သွားပါတယ်။

4. Web Fonts တွေကြောင့် စာသားတွေပြောင်းသွားခြင်း

Font တွေ load ဖြစ်တဲ့အချိန်မှာ စာသားတွေက ပုံစံပြောင်းသွားတတ်ပါတယ်။

5. Network Response ကိုစောင့်ပြီးမှ DOM ကိုပြောင်းတဲ့အခါ

ဥပမာ - server က response ပေါ် မူတည်ပြီး content တွေကို ဂရုမစိုက်ဘဲ ပြောင်းလဲမယ်ဆိုရင် layout shift ဖြစ်ပေါ်စေပါတယ်။

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

• Chrome DevTools (Performance Tab) : CLS score နဲ့ layout shift ကို ကြည့်နိုင်ပါတယ်။

• Lighthouse / PageSpeed Insights : CLS ကိုဖြစ်စေတဲ့အရာတွေကို စာရင်းပြပေးပါတယ်။

• WebPageTest.org : Filmstrip ကြည့်ပြီး ဘယ်နေရာတွေရွေ့နေသလဲဆိုတာ မြင်နိုင်ပါတယ်။