การเพิ่มประสิทธิภาพ CLS ขึ้น 0.2 ช่วยให้มีการดูหน้าเว็บต่อเซสชันเพิ่มขึ้น 15% ระยะเวลาเซสชันนานขึ้น 13% และอัตราตีกลับลดลง 1.72 เปอร์เซ็นต์
Yahoo! JAPAN เป็นหนึ่งในบริษัทสื่อที่ใหญ่ที่สุดในญี่ปุ่น โดยมีการดูหน้าเว็บกว่า 7.9 หมื่นล้านครั้งต่อเดือน ซึ่งเป็นแพลตฟอร์มข่าว Yahoo! JAPAN News มียอดดูหน้าเว็บมากกว่า 2.2 หมื่นล้านครั้งต่อเดือนและทีมวิศวกรที่มุ่งมั่นปรับปรุงประสบการณ์ของผู้ใช้โดยเฉพาะ
การตรวจสอบ Core Web Vitals อย่างต่อเนื่องช่วยให้บริษัทสัมพันธ์คะแนน Cumulative Layout Shift (CLS) ที่ดีขึ้นของเว็บไซต์โดยมีการดูหน้าเว็บต่อเซสชันเพิ่มขึ้น 15% และระยะเวลาเซสชันเพิ่มขึ้น 13%
0.2
การเพิ่มขึ้นของ CLS
15.1%
การดูหน้าเว็บต่อเซสชันเพิ่มขึ้น
13.3%
ระยะเวลาเซสชันนานขึ้น
เนื้อหาบนหน้าเว็บที่เลื่อนไปมาอย่างไม่คาดคิดมักทำให้เกิดการคลิกโดยไม่ตั้งใจ หน้าเว็บเกิดความสับสน และทำให้ผู้ใช้ไม่พอใจในที่สุด ผู้ใช้ที่หงุดหงิดมักจะไม่อยู่ต่อเป็นเวลานาน เลย์เอาต์หน้าเว็บควรมีความเสถียรตลอดทั้งเส้นทางของผู้ใช้เพื่อให้ผู้ใช้พึงพอใจ สำหรับ Yahoo! JAPAN ข่าวการปรับปรุงครั้งนี้ส่งผลดีอย่างมีนัยสำคัญต่อเมตริกการมีส่วนร่วมที่สำคัญต่อธุรกิจ
สำหรับรายละเอียดทางเทคนิคเกี่ยวกับวิธีปรับปรุง CLS ให้อ่าน Yahoo! โพสต์จากทีมวิศวกรของ JAPAN News
ระบุปัญหา
การตรวจสอบ Core Web Vitals รวมถึง CLS มีความสำคัญอย่างยิ่งในการตรวจพบปัญหาและระบุที่มาของปัญหา ที่ Yahoo! JAPAN News Search Console ให้ภาพรวมที่ยอดเยี่ยมของกลุ่มหน้าที่มีปัญหาด้านประสิทธิภาพ และ Lighthouse ช่วยระบุโอกาสในแต่ละหน้าเพื่อปรับปรุงประสบการณ์การใช้งานหน้าเว็บ การใช้เครื่องมือเหล่านี้ พวกเขาพบว่าหน้ารายละเอียดบทความ มี CLS ที่ไม่ดี
คุณต้องคำนึงถึงส่วนที่สะสมของ Cumulative Layout Shift ด้วย ซึ่งเป็นคะแนนตลอดวงจรของหน้า ในความเป็นจริง คะแนนอาจรวมถึงการเปลี่ยนแปลงที่เกิดขึ้นจากการโต้ตอบของผู้ใช้ เช่น การเลื่อนหน้าเว็บหรือการแตะปุ่ม ในการรวบรวมคะแนน CLS จากข้อมูลภาคสนาม ทีมงานได้ผสานรวมการรายงานไลบรารี JavaScript web-vitals
ทีมใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อระบุว่าองค์ประกอบใดเปลี่ยนแปลงเลย์เอาต์ในหน้าเว็บ ภูมิภาคของเลย์เอาต์ในเครื่องมือสำหรับนักพัฒนาเว็บแสดงภาพองค์ประกอบที่ทำให้เกิด CLS โดยการไฮไลต์องค์ประกอบเหล่านั้นด้วยสี่เหลี่ยมผืนผ้าสีฟ้าทุกครั้งที่มีการเปลี่ยนแปลงเลย์เอาต์
และพบว่ามีการเปลี่ยนแปลงเลย์เอาต์เกิดขึ้นหลังจากที่โหลดรูปภาพหลักที่ด้านบนของบทความสำหรับการดูครั้งแรก
ในตัวอย่างข้างต้น เมื่อรูปภาพโหลดเสร็จแล้ว ข้อความจะถูกดันลง (การเปลี่ยนตำแหน่งจะแสดงด้วยเส้นสีแดง)
การปรับปรุง CLS สำหรับรูปภาพ
สำหรับรูปภาพที่มีขนาดคงที่ คุณป้องกันการเปลี่ยนแปลงเลย์เอาต์ได้โดยการระบุแอตทริบิวต์ width และ height ในองค์ประกอบ img และใช้พร็อพเพอร์ตี้ CSS aspect-ratio ที่มีอยู่ในเบราว์เซอร์สมัยใหม่ อย่างไรก็ตาม Yahoo! JAPAN News ไม่เพียงแต่ต้องรองรับเบราว์เซอร์ที่ทันสมัยเท่านั้น แต่ยังต้องติดตั้งในระบบปฏิบัติการที่ค่อนข้างเก่าด้วย เช่น iOS 9
โดยใช้กล่องสัดส่วนภาพ ซึ่งเป็นวิธีใช้มาร์กอัปเพื่อจองพื้นที่ในหน้าเว็บก่อนที่รูปภาพจะโหลด วิธีนี้ต้องมีการทราบสัดส่วนภาพล่วงหน้าที่รูปภาพจะได้รับจาก API แบ็กเอนด์
ผลลัพธ์
จำนวน URL ที่มีประสิทธิภาพไม่ดีใน Search Console ลดลง 98% และ CLS ในข้อมูลห้องปฏิบัติการลดลงจากประมาณ 0.2 เหลือ 0 ที่สำคัญไปกว่านั้นยังมีการปรับปรุงด้านเมตริกธุรกิจต่างๆ หลายอย่าง
เมื่อ Yahoo! JAPAN News เปรียบเทียบเมตริกการมีส่วนร่วมของผู้ใช้ก่อนและหลังการเพิ่มประสิทธิภาพ CLS และพบว่าการปรับปรุงต่างๆ มีดังนี้
15.1%
การดูหน้าเว็บต่อเซสชันเพิ่มขึ้น
13.3%
ระยะเวลาเซสชันนานขึ้น
1.72%*
อัตราตีกลับที่ต่ำลง (*เปอร์เซ็นต์คะแนน)
การปรับปรุง CLS และเมตริก Core Web Vitals อื่นๆ ช่วยให้ Yahoo! JAPAN News จะได้รับป้ายกำกับ"หน้ารวดเร็ว" ในเมนูตามบริบทของ Chrome Android
การเปลี่ยนเลย์เอาต์เป็นเรื่องน่าหงุดหงิดและทำให้ผู้ใช้ไม่อยากอ่านหน้าอื่นๆ เพิ่มเติม แต่ปรับปรุงได้โดยใช้เครื่องมือที่เหมาะสม ระบุปัญหาและนำแนวทางปฏิบัติแนะนำไปใช้ การปรับปรุง CLS เป็นโอกาสในการปรับปรุงธุรกิจของคุณ
สำหรับข้อมูลเพิ่มเติม โปรดอ่าน Yahoo! โพสต์จากทีมวิศวกรของญี่ปุ่น