LCP ช้าบน WordPress แก้อย่างไร? ไล่ตรวจจุดที่ทำให้โหลดช้า

Largest Contentful Paint (LCP) วัดเวลาที่เนื้อหาขนาดใหญ่และสำคัญที่สุดในส่วนที่ผู้เข้าชมมองเห็นปรากฏขึ้น ค่า LCP ที่ดีควรไม่เกิน 2.5 วินาที โดยประเมินจากข้อมูลผู้ใช้จริงที่เปอร์เซ็นไทล์ที่ 75 แยกตามมือถือและเดสก์ท็อป

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

❶ ระบุหน้าและองค์ประกอบ LCP ที่มีปัญหา

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

① ตรวจว่าเป็นภาพหรือข้อความ

หากเป็นภาพ ให้ตรวจไฟล์และวิธีโหลดภาพ หากเป็นข้อความ ให้ตรวจฟอนต์ CSS และสคริปต์ที่ทำให้ข้อความแสดงช้า

② ตรวจ URL แยกตามหน้า

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

③ เปรียบเทียบมือถือกับเดสก์ท็อป

ภาพหรือการจัดวางบนมือถืออาจต่างจากคอมพิวเตอร์ ให้บันทึกผลแยกกัน

❷ แบ่งเวลาของ LCP ออกเป็น 4 ช่วง

การวิเคราะห์ LCP แบ่งเวลารวมเป็นช่วงที่ช่วยชี้ว่าเว็บเสียเวลาตรงไหน

ช่วง	หมายถึง	สาเหตุที่ควรตรวจ
TTFB	เวลาก่อนเบราว์เซอร์ได้รับข้อมูลแรกจากเซิร์ฟเวอร์	เซิร์ฟเวอร์ช้า การเปลี่ยนเส้นทาง หรือแคช
Resource Load Delay	เวลารอก่อนเริ่มโหลดทรัพยากร LCP	เบราว์เซอร์พบภาพหรือไฟล์สำคัญช้า
Resource Load Duration	เวลาดาวน์โหลดทรัพยากร LCP	ไฟล์ใหญ่ เครือข่าย หรือการส่งไฟล์
Element Render Delay	เวลาหลังไฟล์พร้อมก่อนแสดงองค์ประกอบ	CSS, JavaScript, ฟอนต์ หรือการประมวลผลของเบราว์เซอร์

การแบ่งช่วงช่วยป้องกันการแก้ผิดจุด เช่น ลดขนาดภาพทั้งที่เวลาส่วนใหญ่เสียไปกับการรอเซิร์ฟเวอร์

❸ หาก TTFB สูง ให้ตรวจเซิร์ฟเวอร์และแคช

TTFB คือช่วงก่อนเบราว์เซอร์เริ่มได้รับข้อมูลจากเว็บไซต์ หากค่านี้สูง LCP มักเริ่มช้าตามไปด้วย

① ตรวจว่าหลายหน้าช้าพร้อมกันหรือไม่

หากหลายหน้าเริ่มโหลดช้า ให้ตรวจทรัพยากรโฮสติ้ง แคช และเวลาที่เกิดปัญหา

② ตรวจระบบแคช

ดูว่า Page Cache ทำงานตามที่ตั้งใจหรือไม่ และไม่มีระบบแคชหลายชั้นขัดกัน

③ ตรวจการเปลี่ยนเส้นทาง

การเปลี่ยนเส้นทางหลายครั้งก่อนถึงหน้าเป้าหมายอาจเพิ่มเวลารอ ตรวจว่า URL หลักพาไปยังปลายทางที่ถูกต้องโดยไม่วนซ้ำ

④ ติดต่อโฮสติ้งเมื่อพบปัญหาที่เซิร์ฟเวอร์

ส่ง URL และเวลาที่ทดสอบให้ผู้ให้บริการตรวจ หากค่า TTFB สูงหลายครั้งหรือมีกราฟทรัพยากรผิดปกติ

❹ หาก Resource Load Delay สูง ให้ช่วยให้เบราว์เซอร์พบไฟล์สำคัญเร็วขึ้น

ช่วงนี้คือเวลาที่ผ่านไปก่อนเบราว์เซอร์เริ่มดาวน์โหลดทรัพยากร LCP หากภาพหลักถูกค้นพบหลังประมวลผล JavaScript หรืออ่าน CSS บางส่วน ก็อาจเริ่มโหลดช้า

① อย่าหน่วงภาพ LCP

ตรวจว่า Lazy Load ไม่ได้ตั้งให้หน่วงภาพหลักหรือภาพที่อยู่ในส่วนแรกของหน้า

② ลดการพึ่งพา JavaScript เพื่อแสดงภาพหลัก

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

③ ใช้ Preload เฉพาะเมื่อระบุไฟล์ได้แน่ชัด

การกำหนดให้โหลดไฟล์สำคัญก่อนอาจช่วยได้เมื่อใช้กับทรัพยากร LCP ที่ถูกต้อง แต่การ Preload หลายไฟล์อาจทำให้แย่งแบนด์วิดท์กัน

❺ หาก Resource Load Duration สูง ให้ลดเวลาส่งไฟล์

เมื่อเบราว์เซอร์เริ่มโหลดไฟล์แล้วแต่ใช้เวลานาน ให้ตรวจขนาดไฟล์และเส้นทางการส่ง

① ปรับขนาดและบีบอัดภาพ

หากองค์ประกอบ LCP เป็นภาพ ให้ใช้ไฟล์ที่เหมาะกับพื้นที่แสดงผล ลดขนาดไฟล์ และตรวจความคมชัดหลังปรับ

② ตรวจภาพที่ส่งให้มือถือ

ตรวจว่ามือถือไม่ได้ดาวน์โหลดภาพขนาดใหญ่เกินตำแหน่งแสดงผล และธีมเลือกภาพย่อยได้เหมาะสม

③ ตรวจ CDN และแคชไฟล์

หากใช้ CDN ให้ดูว่าไฟล์ภาพถูกส่งผ่าน CDN จริงหรือไม่ และการตั้งค่าแคชไม่ทำให้ผู้เข้าชมได้รับไฟล์เก่า

❻ หาก Element Render Delay สูง ให้ตรวจสิ่งที่ขวางการแสดงผล

แม้ไฟล์ LCP ดาวน์โหลดเสร็จแล้ว หน้าเว็บก็ยังแสดงองค์ประกอบช้าได้ หากเบราว์เซอร์กำลังประมวลผล CSS, JavaScript หรือฟอนต์

① ตรวจ CSS ที่จำเป็นต่อส่วนแรกของหน้า

รูปแบบที่โหลดช้าหรือไฟล์ CSS จำนวนมากอาจทำให้เบราว์เซอร์รอก่อนแสดงเนื้อหา ตรวจการตั้งค่าการย่อหรือเลื่อนโหลด CSS หลังเปลี่ยนต้องทดสอบว่าหน้าเว็บไม่แสดงผลเพี้ยน

② ตรวจ JavaScript ที่ทำงานหนัก

สคริปต์จากธีม ปลั๊กอิน หรือบริการภายนอกอาจใช้เวลาประมวลผล ตรวจว่าไฟล์ใดจำเป็นต้องทำงานก่อนองค์ประกอบ LCP แสดง

③ ตรวจฟอนต์เมื่อ LCP เป็นข้อความ

หากหัวเรื่องเป็นองค์ประกอบ LCP ให้ตรวจการโหลดฟอนต์และจำนวนรูปแบบตัวอักษร ลดฟอนต์ที่ไม่จำเป็นโดยรักษาความอ่านง่าย

❼ ปรับ WordPress ทีละสาเหตุ

① บันทึกผลก่อนแก้

จด URL อุปกรณ์ องค์ประกอบ LCP และช่วงที่ใช้เวลามากที่สุด

② เลือกแก้เฉพาะช่วงที่เป็นปัญหา

ปรับเซิร์ฟเวอร์ แหล่งโหลดไฟล์ ขนาดภาพ หรือการแสดงผลตามผลวิเคราะห์

③ สำรองข้อมูลก่อนแก้ค่าที่กระทบทั้งเว็บไซต์

โดยเฉพาะการตั้งค่าแคช ธีม และปลั๊กอินเพิ่มประสิทธิภาพ

④ ทดสอบหน้าเดิมซ้ำ

ใช้หน้าและอุปกรณ์เดิม แล้วตรวจทั้งผลวัดและการแสดงผลจริง

⑤ ตรวจฟังก์ชันหลังปรับ

ทดลองเมนู ปุ่ม และส่วนอื่นของหน้าว่ายังทำงานครบ

ComSiam แนะนำให้ปรับทีละส่วน เพราะหากแก้ภาพ แคช และสคริปต์พร้อมกัน จะระบุได้ยากว่าอะไรช่วยลด LCP หรือทำให้เกิดปัญหาใหม่

❽ ทำไมลดขนาดภาพแล้ว LCP ยังไม่ดีขึ้น

หากลดขนาดภาพแล้ว LCP ยังช้า ให้กลับไปตรวจช่วงเวลาอื่น หากเวลาหลักอยู่ที่ TTFB การรอเริ่มโหลดภาพ หรือการแสดงผลหลังดาวน์โหลด การบีบอัดภาพเพิ่มอาจไม่ช่วยมาก

ตรวจด้วยว่าองค์ประกอบ LCP ที่รายงานเป็นภาพเดียวกับที่ปรับหรือไม่ และภาพถูกโหลดจาก URL ที่คาดไว้หรือเปล่า หน้าเว็บอาจแสดงภาพคนละไฟล์ระหว่างมือถือกับเดสก์ท็อป

สรุป: แก้ช่วงที่ทำให้ LCP เสียเวลามากที่สุด

เมื่อ LCP ช้าบน WordPress ให้เริ่มจากระบุหน้า อุปกรณ์ และองค์ประกอบ LCP จากนั้นแยกตรวจ TTFB, Resource Load Delay, Resource Load Duration และ Element Render Delay

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