Largest Contentful Paint (LCP)

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

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

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

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

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

• ပုံများ (Images - <img>)
• Video တွေရဲ့ အဖုံးပုံများ (Video Thumbnails / Poster Images)
• CSS နဲ့ ထည့်သွင်းထားတဲ့ နောက်ခံပုံများ (Background Images)
• စာပိုဒ်၊ ခေါင်းစဉ် စတဲ့ စာသားအစုများ (Block-level Text Elements)

LCP အချိန် သတ်မှတ်ချက် (Google စံနှုန်း)

• Good (ကောင်းမွန်သည်): ၂.၅ စက္ကန့် (2.5 seconds) သို့မဟုတ် ထို့ထက်နည်းရပါမယ်။
• Needs Improvement (တိုးတက်ရန် လိုအပ်သည်): ၂.၅ စက္ကန့်မှ ၄.၀ စက္ကန့် ကြား။
• Poor (ညံ့ဖျင်းသည်): ၄.၀ စက္ကန့် ထက် ပိုကြာနေခြင်း။

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

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

1. Server Response နှေးကွေးခြင်း (Time to First Byte - TTFB မြင့်မားခြင်း): Server ကနေ Website ရဲ့ အခြေခံ HTML ဖိုင်ကို ပြန်ပို့ပေးဖို့ အချိန် အကြာကြီး ယူနေရင် ကျန်တဲ့ လုပ်ငန်းစဉ်တွေ အားလုံး နောက်ကျကုန်ပါတယ်။ ဒါဟာ Website စတင် ပေါ်လာဖို့ အစကတည်းက အချိန်ဆွဲနေသလို ဖြစ်သွားတာပါ။
2. JavaScript နဲ့ CSS တို့က Website တက်လာခြင်းကို ပိတ်ဆို့ နှောင့်ယှက်ခြင်း (Render-blocking Resources): Website ရဲ့ ရုပ်ထွက်ကို မြင်ရဖို့အတွက် အရင်ဆုံး Download ဆွဲပြီး Run ရမယ့် JavaScript Code တွေနဲ့ CSS ဖိုင်တွေက ပိတ်ဆို့နေရင် LCP နှေးတတ်ပါတယ်။ အဲ့ဒီဖိုင်တွေ အလုပ်လုပ်ပြီးမှသာ အဓိက အကြောင်းအရာတွေကို မြင်ရမှာ ဖြစ်လို့ပါ။
3. Resource ဖိုင်များ Load ဖြစ်ချိန် ကြာမြင့်ခြင်း: အရည်အသွေးမြင့် ပုံကြီးတွေ၊ ဗီဒီယို ဖိုင်ကြီးတွေ ဒါမှမဟုတ် Font ဖိုင် အကြီးစားတွေက Load ဖြစ်ဖို့ အချိန် အရမ်းယူနေရင်၊ ပြီးတော့ အဲ့ဒီ အရာတွေက LCP Element လည်း ဖြစ်နေခဲ့မယ်ဆိုရင် LCP ကို တိုက်ရိုက် ထိခိုက်စေပါတယ်။ (ဥပမာ - စာမျက်နှာရဲ့ အပေါ်ဆုံးက Hero Image ကြီး Load ဖြစ်တာ ကြာနေတာမျိုးပါ)။
4. Client-Side Rendering ပြဿနာများ: Website ရဲ့ အဓိက အကြောင်းအရာတွေကို ပြသဖို့အတွက် JavaScript ကို အလွန်အမင်း အားကိုးနေရတဲ့အခါ (SPA တွေမှာ အဖြစ်များပါတယ်) LCP ညံ့ဖျင်းမှုတွေ ဖြစ်လာနိုင်ပါတယ်။ ဆိုလိုတာက HTML ပွင့်လာတာနဲ့ ချက်ချင်း မမြင်ရဘဲ၊ JavaScript ဖိုင်တွေ အကုန် Run ပြီးမှသာ အကြောင်းအရာတွေ ပေါ်လာမှာ ဖြစ်လို့ပါ။

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

အောက်ပါ Tools တွေကို အသုံးပြုပြီး အလွယ်တကူ ရှာဖွေနိုင်ပါတယ်။

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