Google เผย 5 วิธีแก้ปัญหาคะแนน LCP (Core Web Vitals)

Largest Contentful Paint (LCP) เป็นหนึ่งใน Core Web Vitals ที่สำคัญที่ช่วยเพิ่มคุณภาพเว็บไซต์ Barry Pollard ผู้เชี่ยวชาญด้าน Web Performance จาก Google Chrome ได้เผย 5 เคล็ดลับที่ช่วยแก้ปัญหาคะแนน LCP ต่ำ และเพิ่มประสบการณ์ผู้ใช้งานได้อย่างมีประสิทธิภาพ ไม่ว่าคุณจะเป็นนักการตลาดดิจิทัลหรือ SEO การเข้าใจและแก้ไขปัญหา LCP อย่างถูกวิธีจะช่วยให้เว็บไซต์ของคุณโดดเด่นและเป็นมิตรกับผู้ใช้งานมากขึ้น

Largest Contentful Paint (LCP) คืออะไร?

LCP เป็นหนึ่งใน Core Web Vitals ที่ใช้วัดระยะที่ใช้ในการแสดงองค์ประกอบเนื้อหาขนาดใหญ่ที่สุด ที่ปรากฏในมุมมองของผู้เยี่ยมชมไซต์ (Viewport) ซึ่งองค์ประกอบนี้อาจเป็นภาพหรือข้อความก็ได้

สำหรับ LCP องค์ประกอบที่ใหญ่ที่สุดมักเป็น HTML block-level elements เช่น ย่อหน้า <p> ,หัวข้อในแท็ก <h1-h6> หรือรูปภาพในแท็ก <img>

Barry Pollard แชร์ 5 เคล็ดลับสำคัญทำอย่างไรให้ LCP ดีขึ้น

1. ทำความเข้าใจข้อมูลที่คุณกำลังดู

Barry Pollard ชี้ให้เห็นข้อผิดพลาดที่พบบ่อยในกลุ่มผู้ดูแลเว็บไซต์และนัก SEO เมื่อพบว่าคะแนน LCP (Largest Contentful Paint) ใน PageSpeed Insights (PSI) ต่ำ ผู้ใช้มักจะเปลี่ยนไปดีบักผ่าน Lighthouse หรือ Chrome Dev Tools

อย่างไรก็ตาม Barry แนะนำให้เริ่มต้นด้วย PSI เนื่องจากมีคำแนะนำและข้อมูลเชิงลึกที่ช่วยให้คุณเข้าใจปัญหาที่ทำให้ LCP ต่ำ

ทำไมต้องใช้ PSI?

1. PSI ให้ข้อมูลสำคัญที่ช่วยระบุสาเหตุของคะแนน LCP ต่ำ
2. ข้อมูลที่แสดงใน PSI มาจาก Chrome User Experience Report (CrUX) ซึ่งรวบรวมข้อมูลจากผู้ใช้ Chrome โดยไม่เปิดเผยตัวตน แบ่งข้อมูลออกเป็น 2 ประเภท

• URL-Level Data: คะแนนที่แสดงเฉพาะสำหรับหน้าเว็บนั้น ๆ
• Origin-Level Data: คะแนนรวมของทั้งเว็บไซต์

PSI จะเลือกแสดงข้อมูลระดับ URL หากมีปริมาณการเข้าชมหน้าเว็บนั้นเพียงพอ หากไม่เพียงพอ ระบบจะเปลี่ยนไปแสดงข้อมูลระดับ Origin ซึ่งเป็นคะแนนที่ได้จากการรวบรวมข้อมูลของเว็บไซต์ทั้งหมด

2. ตรวจสอบคะแนน TTFB (Time to First Byte)

Barry อธิบายว่า TTFB เป็นจุดเริ่มต้นของทุกอย่างในการโหลดหน้าเว็บ ซึ่งแสดงให้เห็นว่าเวลาตอบสนองของเซิร์ฟเวอร์เป็นสาเหตุที่ทำให้ LCP ทำงานไม่ดีหรือไม่

TTFB (Time to First Byte) เป็นหน่วยข้อมูลดิจิทัลที่เล็กที่สุดที่ใช้แทนข้อความ ตัวเลข หรือสื่อมัลติมีเดีย ส่วน TTFB เป็นค่าที่วัดระยะเวลาที่เซิร์ฟเวอร์ใช้ตอบสนองต่อคำขอครั้งแรกของผู้ใช้

และยังชี้ให้เห็นว่าการพยายามปรับปรุงหน้าเว็บจะไม่สามารถแก้ไขปัญหาได้ หากปัญหานั้นมีต้นตอจาก TTFB ที่ช้า

เขาอธิบายเพิ่มเติมว่า

• ปัญหาที่อาจทำให้ TTFB ช้าคือ:
  • ใช้เวลานานเกินไปในการส่งคำขอไปยังเซิร์ฟเวอร์
  • เซิร์ฟเวอร์ใช้เวลาตอบสนองนานเกินไป

แต่การระบุว่าคืออะไร (และทำไม!) อาจเป็นเรื่องยากที่จะระบุสาเหตุ เพราะมีหลายสาเหตุที่เป็นไปได้ในแต่ละกรณี

Barry ได้แนะนำให้ดำเนินการตรวจสอบเพิ่มเติม โดยสามารถ เปรียบเทียบ TTFB กับผลลัพธ์จาก Lighthouse Lab Test เพื่อช่วยระบุและวิเคราะห์ปัญหา TTFB ได้อย่างละเอียด

3. เปรียบเทียบ TTFB กับ Lighthouse Lab Test

Pollard แนะนำให้ทดสอบด้วย Lighthouse Lab Tests การทดสอบนี้ช่วยแยกสาเหตุของปัญหา โดยเฉพาะการตรวจสอบ "Initial server response time" ซึ่งเป็นการวิเคราะห์เวลาในการตอบสนองของเซิร์ฟเวอร์ครั้งแรก จุดประสงค์คือเพื่อตรวจสอบว่าปัญหา TTFB นั้นเกิดขึ้นซ้ำหรือไม่ เพื่อยืนยันว่าไม่ได้เป็นเพียงกรณีที่ PSI แสดงค่าที่เร็วกว่าความเป็นจริงที่ผู้ใช้งานเห็น

Lab Results หรือผลลัพธ์จาก Lab Test นั้นเป็นข้อมูลที่สร้างขึ้น (Synthetic) โดยไม่อิงกับการเข้าชมของผู้ใช้งานจริง ซึ่งหมายความว่าเป็นผลลัพธ์ที่จำลองขึ้นจากอัลกอริทึมที่ถูกกระตุ้นโดยการทดสอบใน Lighthouse

เหตุผลที่การทดสอบแบบ Synthetic มีประโยชน์:

• สามารถทำซ้ำได้
• ช่วยแยกสาเหตุเฉพาะของปัญหาได้

หาก Lighthouse Lab Test ไม่สามารถจำลองปัญหา TTFB ได้ หมายความว่าการทดสอบไม่ได้พบปัญหาเดียวกันกับที่ผู้ใช้งานจริงพบ

Pollard ให้คำแนะนำว่า:

• "สิ่งสำคัญคือต้องตรวจสอบว่าปัญหา TTFB ที่ช้านั้นเกิดขึ้นซ้ำหรือไม่ ดังนั้น ดูผลการทดสอบใน Lighthouse Lab Test ตรงกับ TTFB ของผู้ใช้จริงที่ช้านี้หรือไม่ เมื่อทำการทดสอบหน้าเว็บ มองหาการตรวจสอบในส่วน "Initial server response time"

4. ตรวจสอบว่า CDN ซ่อนปัญหาหรือไม่

CDN (Content Delivery Network) ช่วยเพิ่มความเร็วการโหลดเว็บไซต์โดยการเก็บสำเนาไว้ในศูนย์ข้อมูล แต่บางครั้ง CDN อาจซ่อนปัญหาที่แท้จริงในระดับเซิร์ฟเวอร์

วิธีเลี่ยงการแคชของ CDN:

• ทดสอบหน้าที่ช้า โดยเพิ่มพารามิเตอร์ใน URL เช่น ?XYZ ลงท้าย URL
• ทดสอบหน้าที่ไม่ค่อยมีผู้เข้าเยี่ยมชม

นอกจากนี้ Barry ยังมีแนะนำเครื่องมือที่ใช้ทดสอบประเทศเฉพาะได้อีกด้วย

“คุณยังสามารถตรวจสอบได้ว่าประเทศใดมีความเร็วช้าเป็นพิเศษ โดยเฉพาะอย่างยิ่งหากคุณไม่ได้ใช้ CDN โดยใช้ CrUX และ Treo ของ @alekseykulikov.bsky.social เป็นหนึ่งในเครื่องมือที่ดีที่สุดที่จะทำได้

คุณสามารถทำการทดสอบได้ฟรีที่นี่: treo.sh/sitespeed แล้วเลื่อนลงไปที่แผนที่แล้วสลับไปที่ TTFB

หากประเทศใดมี TTFB ที่ช้า ให้ตรวจสอบว่ามีปริมาณการใช้งานจากประเทศเหล่านั้นมากเพียงใด ด้วยเหตุผลด้านความเป็นส่วนตัว CrUX จะไม่แสดงปริมาณการใช้งานให้คุณเห็น (นอกจากว่ามีปริมาณการใช้งานเพียงพอที่จะแสดงหรือไม่) ดังนั้น คุณจะต้องดูข้อมูลวิเคราะห์สำหรับเรื่องนี้”

แม้ว่าข้อมูล CrUX จะช่วยให้เห็นภาพรวมของการเชื่อมต่อในพื้นที่ต่าง ๆ แต่จะไม่เปิดเผยว่าคะแนนต่ำของแต่ละประเทศมาจากปริมาณการใช้งานเท่าไหร่ นอกจากนี้ เครื่องมือวิเคราะห์ส่วนใหญ่ก็ไม่สามารถแสดงข้อมูลที่ลึกถึงระดับนี้ได้

5. แก้ไขปัญหาที่เกิดซ้ำ ๆ ได้

Barry สรุปว่า ปัญหาควรได้รับการแก้ไขก็ต่อเมื่อได้รับการยืนยันแล้วว่าเป็นปัญหาที่เกิดขึ้นซ้ำได้

• หากเป็นปัญหาที่เซิร์ฟเวอร์ ควรตรวจสอบว่า
  • เซิร์ฟเวอร์มีประสิทธิภาพเพียงพอหรือไม่
  • โค้ดมีความซับซ้อนหรือไม่มีประสิทธิภาพเกินไปหรือเปล่า
  • ฐานข้อมูลต้องการการปรับแต่งหรือไม่
• หากเป็นการเชื่อมต่อช้าจากบางพื้นที่ อาจต้องพิจารณาใช้ CDN เพื่อช่วยเพิ่มประสิทธิภาพ
• ตรวจสอบว่าปริมาณการเข้าชมจากพื้นที่นั้น ๆ เกิดจากอะไร เช่น การตั้งเป้าหมายในแคมเปญโฆษณาหรือไม่
• หากไม่พบปัญหาที่ชัดเจน อาจเกิดจากการ Redirects โดยเฉพาะจากโฆษณา ซึ่งการ Redirect แต่ละครั้งสามารถเพิ่มเวลา TTFB ได้ประมาณ 0.5 วินาที
• พยายามลดการเปลี่ยนเส้นทาง Redirects ให้มากที่สุด
  • ใช้ URL ที่ถูกต้องตั้งแต่แรกเพื่อหลีกเลี่ยงการต้องเปลี่ยนเส้นทางไปที่ www หรือ https
  • หลีกเลี่ยงบริการย่อ URL (URL Shortener) หลายตัวซ้อนกัน”

การแก้ไขปัญหาเหล่านี้จะช่วยปรับปรุงประสิทธิภาพของคะแนน LCP และช่วยเพิ่มประสบการณ์การใช้งานของผู้เข้าชมเว็บไซต์ได้อย่างมีประสิทธิภาพ

สรุป

Barry Pollard จาก Google Chrome ได้แนะนำ 5 เคล็ดลับสำคัญ สำหรับการปรับปรุงคะแนน Largest Contentful Paint (LCP)

1. ใช้ข้อมูล PageSpeed ​​Insights (PSI) ในการแก้ไขปัญหา

สำหรับการแก้ไขปัญหา LCP รวมถึงรายละเอียดปลีกย่อยอื่นๆ ที่กล่าวถึงในบทความนี้ ซึ่งช่วยให้เข้าใจข้อมูลได้ดีขึ้น

2. วิเคราะห์ปัญหาที่เกี่ยวข้องกับ TTFB

จะชี้ให้เห็นว่าทำไมหน้าเว็บจึงมีคะแนน LCP ต่ำ

3. ใช้ Lighthouse Lab Test เพื่อหาสาเหตุที่แท้จริง

หาสาเหตุที่แท้จริง เนื่องจากผลลัพธ์สามารถทำซ้ำได้ ผลลัพธ์ที่ทำซ้ำได้เป็นกุญแจสำคัญในการระบุแหล่งที่มาของปัญหา LCP ได้อย่างแม่นยำ ซึ่งช่วยให้สามารถใช้โซลูชันที่ถูกต้องได้

4. ตรวจสอบผลกระทบจาก CDN

CDN สามารถปกปิดสาเหตุที่แท้จริงของปัญหา LCP ได้ ใช้กลวิธีของ Barry ที่อธิบายไว้ข้างต้นเพื่อข้าม CDN และดึงคะแนนแล็บที่แท้จริงซึ่งอาจมีประโยชน์สำหรับการแก้ไขข้อบกพร่อง

5. Barry ได้ระบุสาเหตุที่เป็นไปได้ 6 ประการสำหรับคะแนน LCP ที่ไม่ดี

• ประสิทธิภาพของเซิร์ฟเวอร์
• การเปลี่ยนเส้นทาง (redirects)
• code
• ฐานข้อมูล
• การเชื่อมต่อที่ช้าเนื่องจากตำแหน่งทางภูมิศาสตร์
• การเชื่อมต่อที่ช้าจากพื้นที่เฉพาะที่เกิดจากเหตุผลเฉพาะ เช่น แคมเปญโฆษณา

สามารถอ่านโพสต์ต้นฉบับของ Barry ได้บน Blues