การเพิ่มประสิทธิภาพ CLS ช่วยเพิ่มประสิทธิภาพของ Yahoo! การดูหน้าเว็บต่อเซสชันของ JAPAN News ลดลง 15%

การเพิ่มประสิทธิภาพ 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 ที่ไม่ดี

รายงาน Core Web Vitals ของ Google Search Console แสดง CLS ที่สูงสำหรับหน้ารายละเอียดบทความ
รายงาน Core Web Vitals ของ Google Search Console
การตรวจสอบการเปลี่ยนแปลงเลย์เอาต์ขนาดใหญ่ของ Lighthouse เพื่อหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์ขนาดใหญ่โดยแสดงองค์ประกอบ DOm ที่ส่งผลต่อ CLS มากที่สุดในหน้าเว็บ
การตรวจสอบ "หลีกเลี่ยงการเปลี่ยนเลย์เอาต์ขนาดใหญ่" ของ Lighthouse จะแสดงให้เห็นว่าองค์ประกอบใดมีส่วนต่อคะแนน CLS และปริมาณเท่าใด

คุณต้องคำนึงถึงส่วนที่สะสมของ Cumulative Layout Shift ด้วย ซึ่งเป็นคะแนนตลอดวงจรของหน้า ในความเป็นจริง คะแนนอาจรวมถึงการเปลี่ยนแปลงที่เกิดขึ้นจากการโต้ตอบของผู้ใช้ เช่น การเลื่อนหน้าเว็บหรือการแตะปุ่ม ในการรวบรวมคะแนน CLS จากข้อมูลภาคสนาม ทีมงานได้ผสานรวมการรายงานไลบรารี JavaScript web-vitals

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

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

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

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

ในตัวอย่างข้างต้น เมื่อรูปภาพโหลดเสร็จแล้ว ข้อความจะถูกดันลง (การเปลี่ยนตำแหน่งจะแสดงด้วยเส้นสีแดง)

การปรับปรุง CLS สำหรับรูปภาพ

สำหรับรูปภาพที่มีขนาดคงที่ คุณป้องกันการเปลี่ยนแปลงเลย์เอาต์ได้โดยการระบุแอตทริบิวต์ width และ height ในองค์ประกอบ img และใช้พร็อพเพอร์ตี้ CSS aspect-ratio ที่มีอยู่ในเบราว์เซอร์สมัยใหม่ อย่างไรก็ตาม Yahoo! JAPAN News ไม่เพียงแต่ต้องรองรับเบราว์เซอร์ที่ทันสมัยเท่านั้น แต่ยังต้องติดตั้งในระบบปฏิบัติการที่ค่อนข้างเก่าด้วย เช่น iOS 9

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

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

ผลลัพธ์

จำนวน URL ที่มีประสิทธิภาพไม่ดีใน Search Console ลดลง 98% และ CLS ในข้อมูลห้องปฏิบัติการลดลงจากประมาณ 0.2 เหลือ 0 ที่สำคัญไปกว่านั้นยังมีการปรับปรุงด้านเมตริกธุรกิจต่างๆ หลายอย่าง

รายงาน Search Console แสดงการลดลงอย่างมีนัยสำคัญของหน้าที่มีปัญหาด้านประสิทธิภาพ
Search Console หลังการปรับปรุง

เมื่อ Yahoo! JAPAN News เปรียบเทียบเมตริกการมีส่วนร่วมของผู้ใช้ก่อนและหลังการเพิ่มประสิทธิภาพ CLS และพบว่าการปรับปรุงต่างๆ มีดังนี้

15.1%

การดูหน้าเว็บต่อเซสชันเพิ่มขึ้น

13.3%

ระยะเวลาเซสชันนานขึ้น

1.72%*

อัตราตีกลับที่ต่ำลง (*เปอร์เซ็นต์คะแนน)

การปรับปรุง CLS และเมตริก Core Web Vitals อื่นๆ ช่วยให้ Yahoo! JAPAN News จะได้รับป้ายกำกับ"หน้ารวดเร็ว" ในเมนูตามบริบทของ Chrome Android

ป้ายกำกับหน้าที่เร็วใน Chrome บน Android
ป้ายกำกับ "หน้าด่วน" ใน Chrome บน Android

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

สำหรับข้อมูลเพิ่มเติม โปรดอ่าน Yahoo! โพสต์จากทีมวิศวกรของญี่ปุ่น