การเพิ่มประสิทธิภาพ 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 ที่สูงสำหรับหน้ารายละเอียดบทความ](https://web.developers.google.cn/static/case-studies/yahoo-japan-news/image/google-search-console-cor-65713bd9c58c3.png?authuser=1&hl=th)
![การตรวจสอบการเปลี่ยนแปลงเลย์เอาต์ขนาดใหญ่ของ Lighthouse เพื่อหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์ขนาดใหญ่โดยแสดงองค์ประกอบ DOm ที่ส่งผลต่อ CLS มากที่สุดในหน้าเว็บ](https://web.developers.google.cn/static/case-studies/yahoo-japan-news/image/lighthouse-avoid-large-la-23c5555fd5f8f.png?authuser=1&hl=th)
คุณต้องคำนึงถึงส่วนที่สะสมของ Cumulative Layout Shift ด้วย ซึ่งเป็นคะแนนตลอดวงจรของหน้า ในความเป็นจริง คะแนนอาจรวมถึงการเปลี่ยนแปลงที่เกิดขึ้นจากการโต้ตอบของผู้ใช้ เช่น การเลื่อนหน้าเว็บหรือการแตะปุ่ม ในการรวบรวมคะแนน CLS จากข้อมูลภาคสนาม ทีมงานได้ผสานรวมการรายงานไลบรารี JavaScript web-vitals
ทีมใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อระบุว่าองค์ประกอบใดเปลี่ยนแปลงเลย์เอาต์ในหน้าเว็บ ภูมิภาคของเลย์เอาต์ในเครื่องมือสำหรับนักพัฒนาเว็บแสดงภาพองค์ประกอบที่ทำให้เกิด CLS โดยการไฮไลต์องค์ประกอบเหล่านั้นด้วยสี่เหลี่ยมผืนผ้าสีฟ้าทุกครั้งที่มีการเปลี่ยนแปลงเลย์เอาต์
![หน้ารายละเอียดบทความที่มีสี่เหลี่ยมผืนผ้าสีฟ้าวางซ้อนบนรูปภาพหลักและข้อความ](https://web.developers.google.cn/static/case-studies/yahoo-japan-news/image/article-details-page-blu-565ff494e023.png?authuser=1&hl=th)
และพบว่ามีการเปลี่ยนแปลงเลย์เอาต์เกิดขึ้นหลังจากที่โหลดรูปภาพหลักที่ด้านบนของบทความสำหรับการดูครั้งแรก
![ภาพหน้าจอของหน้ารายละเอียดบทความที่แสดงการเปรียบเทียบก่อนและหลังการปรับเลย์เอาต์ไปพร้อมกัน](https://web.developers.google.cn/static/case-studies/yahoo-japan-news/image/screenshots-the-article-b6de7e5cb4ab7.jpg?authuser=1&hl=th)
ในตัวอย่างข้างต้น เมื่อรูปภาพโหลดเสร็จแล้ว ข้อความจะถูกดันลง (การเปลี่ยนตำแหน่งจะแสดงด้วยเส้นสีแดง)
การปรับปรุง CLS สำหรับรูปภาพ
สำหรับรูปภาพที่มีขนาดคงที่ คุณป้องกันการเปลี่ยนแปลงเลย์เอาต์ได้โดยการระบุแอตทริบิวต์ width
และ height
ในองค์ประกอบ img
และใช้พร็อพเพอร์ตี้ CSS aspect-ratio
ที่มีอยู่ในเบราว์เซอร์สมัยใหม่ อย่างไรก็ตาม Yahoo! JAPAN News ไม่เพียงแต่ต้องรองรับเบราว์เซอร์ที่ทันสมัยเท่านั้น แต่ยังต้องติดตั้งในระบบปฏิบัติการที่ค่อนข้างเก่าด้วย เช่น iOS 9
โดยใช้กล่องสัดส่วนภาพ ซึ่งเป็นวิธีใช้มาร์กอัปเพื่อจองพื้นที่ในหน้าเว็บก่อนที่รูปภาพจะโหลด วิธีนี้ต้องมีการทราบสัดส่วนภาพล่วงหน้าที่รูปภาพจะได้รับจาก API แบ็กเอนด์
![ภาพหน้าจอของหน้ารายละเอียดบทความที่แสดงการเปรียบเทียบก่อนและหลังการเพิ่มประสิทธิภาพ CLS](https://web.developers.google.cn/static/case-studies/yahoo-japan-news/image/screenshots-the-article-5191c90be0709.jpg?authuser=1&hl=th)
ผลลัพธ์
จำนวน URL ที่มีประสิทธิภาพไม่ดีใน Search Console ลดลง 98% และ CLS ในข้อมูลห้องปฏิบัติการลดลงจากประมาณ 0.2 เหลือ 0 ที่สำคัญไปกว่านั้นยังมีการปรับปรุงด้านเมตริกธุรกิจต่างๆ หลายอย่าง
![รายงาน Search Console แสดงการลดลงอย่างมีนัยสำคัญของหน้าที่มีปัญหาด้านประสิทธิภาพ](https://web.developers.google.cn/static/case-studies/yahoo-japan-news/image/search-console-report-sho-a2a53f06e3baf.png?authuser=1&hl=th)
เมื่อ Yahoo! JAPAN News เปรียบเทียบเมตริกการมีส่วนร่วมของผู้ใช้ก่อนและหลังการเพิ่มประสิทธิภาพ CLS และพบว่าการปรับปรุงต่างๆ มีดังนี้
15.1%
การดูหน้าเว็บต่อเซสชันเพิ่มขึ้น
13.3%
ระยะเวลาเซสชันนานขึ้น
1.72%*
อัตราตีกลับที่ต่ำลง (*เปอร์เซ็นต์คะแนน)
การปรับปรุง CLS และเมตริก Core Web Vitals อื่นๆ ช่วยให้ Yahoo! JAPAN News จะได้รับป้ายกำกับ"หน้ารวดเร็ว" ในเมนูตามบริบทของ Chrome Android
![ป้ายกำกับหน้าที่เร็วใน Chrome บน Android](https://web.developers.google.cn/static/case-studies/yahoo-japan-news/image/fast-page-label-chrome-da3bd8521a851.png?authuser=1&hl=th)
การเปลี่ยนเลย์เอาต์เป็นเรื่องน่าหงุดหงิดและทำให้ผู้ใช้ไม่อยากอ่านหน้าอื่นๆ เพิ่มเติม แต่ปรับปรุงได้โดยใช้เครื่องมือที่เหมาะสม ระบุปัญหาและนำแนวทางปฏิบัติแนะนำไปใช้ การปรับปรุง CLS เป็นโอกาสในการปรับปรุงธุรกิจของคุณ
สำหรับข้อมูลเพิ่มเติม โปรดอ่าน Yahoo! โพสต์จากทีมวิศวกรของญี่ปุ่น