Largest Contentful Paint (LCP)

ရည်ရွယ်ချက်

Largest Contentful Paint (LCP) ဆိုတာ ဘာကို တိုင်းတာတာလဲ၊ ဘာကြောင့် LCP နှေးရတာလဲ၊ LCP ဖြစ်စေတဲ့ အရာကို ဘယ်လိုရှာမလဲ ဆိုတာတွေကို နားလည်အောင် လေ့လာကြမယ်။

LCP ဆိုတာ ဘာကို တိုင်းတာတာလဲ

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

LCP အဖြစ် သတ်မှတ်ခံရနိုင်တဲ့ အရာတွေက ဘာတွေလဲ?

• Images
• Video Thumbnails (poster images)
• CSS နဲ့ ထည့်ထားတဲ့ Background Images တွေ
• Text blocks (စာသားအစုများ)

LCP အချိန် သတ်မှတ်ချက် (Google အရ):

• Good: 2.5 seconds or less
• Needs Improvement: Between 2.5 seconds and 4.0 seconds
• Poor: More than 4.0 seconds

LCP နှေးရခြင်းရဲ့ အဖြစ်များတဲ့ အကြောင်းရင်းများ

LCP နှေးတာက အောက်ပါ အဆင့်လေးဆင့်ထဲက တစ်ခုခု ကြာနေလို့ ဖြစ်တတ်ပါတယ်:

1. Server Response နှေးကွေးခြင်း (TTFB မြင့်မားခြင်း)။ Server ကနေ website ရဲ့ အခြေခံ HTML ကို ပို့ပေးဖို့ အချိန်အကြာကြီးယူနေရင် ကျန်တဲ့ အရာအားလုံးက နောက်ကျကုန်ပါတယ်။ ဆိုလိုတာက website စပေါ်လာဖို့ အချိန်ဆွဲနေသလို ဖြစ်သွားတာပါ။
2. JavaScript နဲ့ CSS တို့က Website တက်လာခြင်းကို ပိတ်ဆို့နှောင့်ယှက်ခြင်း။ Website ကို မြင်ရဖို့အတွက် အရင်ဆုံး download လုပ်ပြီး run ရတဲ့ Javascript code တွေ နဲ့ CSS ဖိုင်တွေ က website ပေါ်လာတာကို အနှောင့်အယှက် ဖြစ်စေနိုင်ပါတယ်။ ဒီဖိုင်တွေ အလုပ်လုပ်ပြီးမှ website ကို မြင်ရမှာဖြစ်လို့ပါ။
3. Resource ဖိုင်များ Load ဖြစ်ချိန် ကြာမြင့်ခြင်း။ ပုံကြီးတွေ၊ ဗီဒီယိုဖိုင်ကြီးတွေ ဒါမှမဟုတ် font ဖိုင်အကြီးစားတွေက Load ဖြစ်ဖို့ အချိန်အရမ်းယူနေရင်၊ ပြီးတော့ အဲ့ဒါတွေက LCP element ဖြစ်နေခဲ့ပါက LCP ကို တိုက်ရိုက် ထိခိုက်စေပါတယ်။ ဥပမာ - website မှာ အကြီးဆုံးမြင်ရမယ့် ပုံက Load ဖြစ်တာကြာနေရင် LCP လည်း ကြာသွားမှာပါ။
4. Client-Side Rendering ပြဿနာများ။ Website ရဲ့ အဓိက အကြောင်းအရာတွေကို ပြသဖို့ JavaScript ကို အလွန်အမင်း အားကိုးနေရတဲ့အခါ LCP ညံ့ဖျင်းမှုတွေ ဖြစ်လာနိုင်ပါတယ်။ ဆိုလိုတာက JavaScript က run ပြီးမှ အကြောင်းအရာတွေ ပေါ်လာမှာဖြစ်လို့ JavaScript ကြာရင် LCP လည်း ကြာသွားတာပါ။

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

သုံးနိုင်တဲ့ Tools တွေ:

• Chrome DevTools (Performance Tab): LCP Element ဆိုပြီး အမှတ်အသားလေး ပြထားပါတယ်။ အဲ့ဒါကိုနှိပ်ပြီး ဘယ်အရာက LCP ဖြစ်စေလဲ ကြည့်နိုင်ပါတယ်။
• Google PageSpeed Insights / Lighthouse: Report တွေမှာ LCP ဖြစ်စေတဲ့အရာနဲ့ အဲ့ဒါ ပေါ်ဖို့ ကြာချိန်ကို ဖော်ပြပေးပါတယ်။
• WebPageTest.org: LCP ဘယ်အချိန်မှာ ဖြစ်လဲဆိုတာ အသေးစိတ်တိုင်းတာချက်တွေနဲ့ Website ပွင့်လာပုံ အဆင့်ဆင့်ကို ပြပေးပါတယ်။