วิธีปรับ Core Web Vitals บน WordPress ให้ผ่านเกณฑ์ Google

Core Web Vitals เป็นตัวชี้วัดประสบการณ์ใช้งานที่เน้น 3 ด้าน ได้แก่ ความเร็วในการแสดงเนื้อหาหลัก การตอบสนองเมื่อผู้ใช้โต้ตอบ และความนิ่งของหน้าเว็บ หากเว็บไซต์ WordPress มีปัญหาในด้านใดด้านหนึ่ง ควรหาสาเหตุของตัวชี้วัดนั้นก่อน แล้วค่อยปรับส่วนที่เกี่ยวข้อง

บทความนี้อธิบายเกณฑ์ วิธีตรวจ และแนวทางปรับ LCP, INP และ CLS สำหรับ WordPress โดย ComSiam แนะนำให้ตรวจข้อมูลจากผู้ใช้จริงควบคู่กับผลทดสอบจำลอง เพราะผลสองแบบนี้บอกประสบการณ์คนละมุม

❶ รู้จักเกณฑ์ Core Web Vitals ทั้ง 3 ตัว

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

① LCP: ความเร็วในการแสดงเนื้อหาหลัก

Largest Contentful Paint วัดเวลาที่เนื้อหาหลักชิ้นใหญ่ที่สุดในบริเวณที่มองเห็นปรากฏขึ้น เกณฑ์ที่ดีคือไม่เกิน 2.5 วินาที หากช้า ควรตรวจเซิร์ฟเวอร์ ภาพหลัก และไฟล์ที่ขัดขวางการแสดงผล

② INP: การตอบสนองต่อการโต้ตอบ

Interaction to Next Paint วัดความไวในการตอบสนองหลังผู้ใช้แตะหรือคลิก เช่น เปิดเมนู กดปุ่ม หรือเลือกตัวกรอง เกณฑ์ที่ดีคือไม่เกิน 200 มิลลิวินาที หากช้า มักต้องตรวจ JavaScript และงานที่ใช้เวลานานบนเบราว์เซอร์

③ CLS: ความนิ่งของหน้าเว็บ

Cumulative Layout Shift วัดการขยับขององค์ประกอบที่ทำให้เนื้อหาเลื่อนตำแหน่งโดยไม่คาดคิด เกณฑ์ที่ดีคือไม่เกิน 0.1 หากหน้าเว็บขยับระหว่างโหลด ควรตรวจภาพ โฆษณา ฟอนต์ และองค์ประกอบที่ปรากฏขึ้นภายหลัง

❷ ตรวจว่าตัวชี้วัดใดไม่ผ่าน

เริ่มจากตรวจ URL และประเภทอุปกรณ์ที่มีปัญหา บางเว็บไซต์ผ่านเกณฑ์บนเดสก์ท็อปแต่ไม่ผ่านบนมือถือ หรือมีปัญหาเฉพาะบางหน้า เช่น หน้าสินค้าที่มีภาพและสคริปต์มากกว่าหน้าบทความ

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

❸ วิธีปรับ LCP ให้เนื้อหาหลักแสดงเร็วขึ้น

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

① ตรวจเวลาตอบสนองของเซิร์ฟเวอร์

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

② ปรับภาพหลักให้เหมาะสม

ปรับขนาดและบีบอัดภาพให้เหมาะกับพื้นที่แสดงผล เลือกไฟล์ภาพที่ไม่ใหญ่เกินจำเป็น และหลีกเลี่ยงการตั้ง Lazy Load ให้ภาพหลักที่ผู้เข้าชมเห็นทันทีเมื่อเปิดหน้า

③ ลดสิ่งที่ขัดขวางการแสดงผล

ตรวจไฟล์ CSS, JavaScript, ฟอนต์ และสคริปต์ภายนอกที่โหลดก่อนเนื้อหาหลัก อย่าปรับการโหลดไฟล์หลายรายการพร้อมกัน ให้ทดสอบทีละส่วนและตรวจหน้าเว็บหลังเปลี่ยนค่า

❹ วิธีปรับ INP ให้ปุ่มและเมนูตอบสนองไว

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

① ตรวจการโต้ตอบที่หน่วง

ลองใช้งานเมนู ปุ่ม แบบฟอร์ม ตัวกรองสินค้า และฟังก์ชันที่สำคัญของหน้าเว็บ ระบุให้ได้ว่าการโต้ตอบใดตอบสนองช้า และเกิดในหน้าใด

② ทบทวนปลั๊กอินและสคริปต์

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

③ ปรับทีละรายการ

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

❺ วิธีลด CLS และป้องกันหน้าเว็บขยับ

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

① กำหนดขนาดพื้นที่ของภาพ

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

② กันพื้นที่สำหรับโฆษณาและวิดเจ็ต

หากมีโฆษณา แบนเนอร์ หรือวิดเจ็ตที่โหลดภายหลัง ให้จัดพื้นที่ไว้ล่วงหน้า หลีกเลี่ยงการแทรกองค์ประกอบใหม่เหนือเนื้อหาที่ผู้ใช้กำลังอ่าน

③ ตรวจฟอนต์และแถบแจ้งเตือน

ฟอนต์ที่เปลี่ยนหลังโหลดหรือแถบประกาศที่ปรากฏทีหลังอาจทำให้เนื้อหาเคลื่อน ตรวจการแสดงผลบนมือถือและเดสก์ท็อป รวมถึงหน้าเว็บที่มีแบนเนอร์คุกกี้

❻ ปรับ WordPress โดยไม่ทำให้เว็บเสีย

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

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

❼ ลำดับการทำงานที่แนะนำ

① ระบุ URL และอุปกรณ์ที่ไม่ผ่าน

บันทึกหน้าที่มีปัญหาและแยกผลมือถือกับเดสก์ท็อป

② ระบุว่าเป็น LCP, INP หรือ CLS

อย่าแก้ทุกอย่างพร้อมกัน เพราะแต่ละตัวชี้วัดมีสาเหตุและวิธีแก้ต่างกัน

③ ตรวจสาเหตุในหน้าเว็บจริง

ตรวจภาพหลัก เซิร์ฟเวอร์ การโต้ตอบ และองค์ประกอบที่ขยับตามประเภทของปัญหา

④ ปรับทีละจุดและทดสอบซ้ำ

เปรียบเทียบผลก่อนและหลังด้วยเงื่อนไขใกล้เคียงกัน พร้อมตรวจว่าเว็บยังทำงานได้ปกติ

⑤ ติดตามข้อมูลผู้ใช้จริง

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

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

❽ ข้อควรรู้ก่อนตั้งเป้าผ่านเกณฑ์

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

สรุป: แก้ตามตัวชี้วัดที่มีปัญหา

การปรับ Core Web Vitals บน WordPress ควรเริ่มจากระบุว่า LCP, INP หรือ CLS ตัวใดไม่ผ่าน แล้วตรวจสาเหตุให้ตรงจุด ปรับภาพและการแสดงผลเพื่อแก้ LCP ลดงาน JavaScript ที่หน่วงการโต้ตอบเพื่อแก้ INP และกันพื้นที่ให้องค์ประกอบต่าง ๆ เพื่อช่วยลด CLS

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