วิธีแก้ Cumulative Layout Shift (CLS) ลดหน้าเว็บขยับตอนโหลด

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

Cumulative Layout Shift (CLS) ใช้วัดความนิ่งของหน้าเว็บระหว่างการโหลดและการใช้งาน โดยค่าที่ดีควรไม่เกิน 0.1 เมื่อประเมินจากข้อมูลผู้ใช้จริงที่เปอร์เซ็นไทล์ที่ 75 แยกตามมือถือและเดสก์ท็อป แนวทางของ ComSiam คือหาว่าองค์ประกอบใดทำให้หน้าเว็บขยับ แล้วแก้ที่สาเหตุนั้น แทนการปรับทุกอย่างพร้อมกัน

❶ ตรวจให้พบว่าหน้าเว็บขยับตรงไหน

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

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

❷ กำหนดขนาดพื้นที่ให้รูปภาพและวิดีโอ

รูปภาพหรือวิดีโอที่ยังไม่กำหนดขนาด อาจทำให้เบราว์เซอร์ไม่รู้ว่าต้องเว้นพื้นที่ไว้เท่าไร เมื่อไฟล์โหลดเสร็จ เนื้อหาด้านล่างจึงถูกดันลง

① ตรวจภาพที่อยู่ในเนื้อหาและส่วนหัว

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

② ตรวจวิดีโอและเนื้อหาฝังจากบริการอื่น

กำหนดพื้นที่สำหรับวิดีโอ แผนที่ หรือเนื้อหาฝังอื่น ๆ ล่วงหน้า โดยเฉพาะส่วนที่โหลดจากบริการภายนอกหรือปรากฏหลังหน้าเว็บเริ่มแสดงผล

③ ตรวจภาพที่เปลี่ยนตามอุปกรณ์

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

❸ กันพื้นที่ให้โฆษณา แบนเนอร์ และวิดเจ็ต

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

① แบนเนอร์ที่ปรากฏด้านบนของหน้า

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

② โฆษณาที่โหลดภายหลัง

กำหนดขนาดหรือพื้นที่ขั้นต่ำให้ตำแหน่งโฆษณา แม้โฆษณาจะยังไม่แสดง วิธีนี้ช่วยลดการขยับของเนื้อหาด้านล่าง

③ วิดเจ็ตที่ขยายหรือยุบตัว

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

❹ แก้ปัญหาฟอนต์ทำให้ข้อความเปลี่ยนตำแหน่ง

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

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

❺ ระวังการแทรกเนื้อหาแบบไดนามิก

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

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

❻ ตรวจแอนิเมชันและองค์ประกอบที่เปลี่ยนขนาด

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

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

❼ วิธีตรวจและแก้ CLS บน WordPress ทีละขั้น

① บันทึก URL และอุปกรณ์ที่มีปัญหา

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

② ระบุองค์ประกอบที่ทำให้เนื้อหาขยับ

ตรวจภาพ วิดีโอ โฆษณา ฟอนต์ แบนเนอร์ และวิดเจ็ตที่โหลดหรือเปลี่ยนขนาดภายหลัง

③ แก้ทีละสาเหตุ

เริ่มจากจองพื้นที่ให้ภาพและเนื้อหาฝัง จากนั้นตรวจโฆษณา ฟอนต์ และส่วนที่เพิ่มเนื้อหาแบบไดนามิก

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

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

⑤ ตรวจว่าฟังก์ชันยังทำงานปกติ

ยืนยันว่าเมนู แบบฟอร์ม แบนเนอร์ และเนื้อหาไม่ถูกซ่อนหรือจัดตำแหน่งผิดหลังแก้ไข

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

❽ สาเหตุที่พบบ่อยและแนวทางแก้

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

❾ วิธีติดตามผลหลังแก้ไข

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

หากเครื่องมือยังรายงาน CLS สูง ให้ดูว่าปัญหาเกิดกับองค์ประกอบเดิมหรือมีสาเหตุอื่นเพิ่มขึ้น การแก้เฉพาะภาพหนึ่งรายการอาจไม่เพียงพอ หากยังมีโฆษณา ฟอนต์ หรือแถบประกาศที่ทำให้หน้าเว็บขยับอยู่

สรุป: จองพื้นที่ก่อนองค์ประกอบโหลดเสร็จ

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

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