แผนปรับปรุงเมตริก CLS ให้ยุติธรรมกับหน้าที่มีระยะเวลาใช้งานนานมากขึ้น
เมื่อเร็วๆ นี้เรา (ทีมเมตริกความเร็วของ Chrome) ได้สรุปงานวิจัยเบื้องต้นของเราไว้ในตัวเลือกในการทำให้เมตริก CLS มีความยุติธรรมกับหน้าเว็บที่เปิดมานาน เราได้รับความคิดเห็นที่เป็นประโยชน์จำนวนมากและหลังจากทำการวิเคราะห์ขนาดใหญ่เสร็จสิ้น เราได้สรุปการเปลี่ยนแปลงที่เราวางแผนจะทำกับเมตริกดังกล่าว นั่นคือกรอบเวลาเซสชันสูงสุดที่มีช่องว่าง 1 วินาที จำกัดสูงสุด 5 วินาที
อ่านรายละเอียดต่อไป
เราประเมินตัวเลือกต่างๆ อย่างไร
เราตรวจสอบความคิดเห็นทั้งหมดที่ได้รับจากชุมชนนักพัฒนาซอฟต์แวร์และนำไปพิจารณา
นอกจากนี้ เรายังใช้ตัวเลือกยอดนิยมใน Chrome และทำการวิเคราะห์เมตริกจำนวนมากในหน้าเว็บนับล้านๆ หน้า เราตรวจสอบว่าแต่ละตัวเลือกมีการปรับปรุงเว็บไซต์ประเภทใด และเปรียบเทียบตัวเลือกต่างๆ อย่างไร โดยเฉพาะอย่างยิ่งการดูเว็บไซต์ที่ได้คะแนนแตกต่างกันจากตัวเลือกที่ต่างกัน โดยรวมแล้ว เราพบว่า
- ตัวเลือกทั้งหมดจะลดความสัมพันธ์ระหว่างเวลาที่ใช้ในหน้าเว็บกับคะแนนการเปลี่ยนเลย์เอาต์
- ตัวเลือกไม่มีจะทำให้หน้าเว็บใดก็ตามมีคะแนนแย่ลง คุณจึงไม่ต้องกังวลว่าการเปลี่ยนแปลงนี้จะทำให้คะแนนของเว็บไซต์แย่ลง
ประเด็นการตัดสินใจ
เหตุใดจึงต้องมีกรอบเวลาเซสชัน
ในโพสต์ก่อนหน้านี้ เราได้พูดถึงกลยุทธ์กรอบเวลาที่แตกต่างกัน 2-3 ข้อสำหรับการจัดกลุ่มการเปลี่ยนแปลงของเลย์เอาต์เข้าด้วยกัน ในขณะเดียวกันก็ช่วยให้คะแนนไม่เพิ่มขึ้นแบบไม่มีขอบเขต ความคิดเห็นที่เราได้รับจากนักพัฒนาซอฟต์แวร์ชื่นชอบกลยุทธ์กรอบเวลาเซสชันเป็นอย่างมากเพราะจัดกลุ่มเลย์เอาต์ที่เปลี่ยนด้วยกันได้ง่ายที่สุด
ตัวอย่างสำหรับตรวจสอบกรอบเวลาเซสชัน
ในตัวอย่างข้างต้น เลย์เอาต์มีหลายการเปลี่ยนแปลงเกิดขึ้นเมื่อเวลาผ่านไปขณะที่ผู้ใช้ดูหน้าเว็บ โดยแต่ละหน้าจอจะแสดงด้วยแถบสีน้ำเงิน คุณจะเห็นว่าแถบสีน้ำเงินมีความสูงต่างกัน ซึ่งก็คือคะแนนของการเปลี่ยนเลย์เอาต์แต่ละรายการ กรอบเวลาเซสชันจะเริ่มต้นจากการเปลี่ยนเลย์เอาต์ครั้งแรก และจะขยายต่อไปเรื่อยๆ จนกว่าจะเกิดช่องว่างโดยไม่มีการเปลี่ยนเลย์เอาต์ เมื่อเกิดการเปลี่ยนเลย์เอาต์ครั้งถัดไป กรอบเวลาเซสชันใหม่จะเริ่มขึ้น เนื่องจากมีช่องว่าง 3 จุดที่ไม่มีการเปลี่ยนเลย์เอาต์ ในตัวอย่างนี้จึงมีกรอบเวลาเซสชัน 3 ช่วง เช่นเดียวกับคำจำกัดความปัจจุบันของ CLS คะแนนของการปรับแต่ละครั้งจะรวมกันเพื่อให้คะแนนของแต่ละหน้าต่างเป็นผลรวมของการเปลี่ยนแปลงเลย์เอาต์แต่ละรายการ
จากการวิจัยเบื้องต้น เราเลือกระยะห่าง 1 วินาทีระหว่างกรอบเวลาของเซสชัน และช่องว่างนี้ได้ผลดีในการวิเคราะห์ขนาดใหญ่ ดังนั้น "ช่องว่างของเซสชัน" ที่แสดงในตัวอย่างด้านบนคือ 1 วินาที
ทำไมจึงต้องมีกรอบเวลาเซสชันสูงสุด
เราจำกัดกลยุทธ์การสรุปให้เหลือ 2 ตัวเลือกในการวิจัยเบื้องต้น ดังนี้
- คะแนนเฉลี่ยของกรอบเวลาเซสชันทั้งหมดสําหรับกรอบเวลาเซสชันที่ใหญ่มาก (หน้าต่างแบบไม่จํากัดที่มีช่องว่าง 5 วินาที)
- คะแนนสูงสุดของกรอบเวลาเซสชันทั้งหมด สำหรับกรอบเวลาเซสชันที่เล็กลง (จำกัดที่ 5 วินาที โดยมีช่องว่าง 1 วินาที)
หลังจากการวิจัยเบื้องต้น เราได้เพิ่มเมตริกแต่ละรายการใน Chrome เพื่อทำการวิเคราะห์ขนาดใหญ่กับ URL หลายล้านรายการ ในการวิเคราะห์ขนาดใหญ่ เราพบ URL จำนวนมากที่มีรูปแบบการเปลี่ยนเลย์เอาต์ดังนี้
ที่ด้านขวาล่าง คุณจะเห็นว่ามีการเปลี่ยนเลย์เอาต์เพียงเล็กน้อยใน หน้าต่างเซสชัน 2 เพียงครั้งเดียว จึงทำให้ได้คะแนนต่ำมาก ซึ่งหมายความว่าคะแนนเฉลี่ยที่ค่อนข้างต่ำ แต่จะเกิดอะไรขึ้นหากนักพัฒนาซอฟต์แวร์แก้ไขการเปลี่ยนเลย์เอาต์เล็กๆ น้อยๆ จากนั้น ระบบจะคำนวณคะแนนในกรอบเวลาเซสชัน 1 เท่านั้น ซึ่งหมายความว่าคะแนนของหน้าเว็บเกือบ 2 เท่า คงสร้างความสับสนและไม่อยากให้นักพัฒนาซอฟต์แวร์ปรับปรุง การเปลี่ยนเลย์เอาต์แต่กลับพบว่าคะแนนแย่ลง และการนำการเปลี่ยนแปลงเลย์เอาต์เล็กๆ นี้ออกจะให้ผลลัพธ์ที่ดีกว่าอย่างเห็นได้ชัดสำหรับประสบการณ์ของผู้ใช้ ดังนั้นจึงไม่ควรทำให้คะแนนแย่ลง
เนื่องจากปัญหาเกี่ยวกับค่าเฉลี่ยนี้ เราจึงตัดสินใจดำเนินการต่อกับหน้าต่างสูงสุดที่เล็กและจำกัดสูงสุด ดังนั้นในตัวอย่างด้านบน ระบบจะไม่สนใจกรอบเวลาเซสชัน 2 และระบบจะรายงานเฉพาะผลรวมของการเปลี่ยนเลย์เอาต์ในหน้าต่างเซสชัน 1 เท่านั้น
ทำไมต้อง 5 วินาที
เราประเมินหน้าต่างหลายขนาดและพบ 2 สิ่งต่อไปนี้
- สำหรับหน้าต่างสั้นๆ หน้าเว็บที่โหลดช้าและการตอบสนองที่ช้าลงต่อการโต้ตอบของผู้ใช้อาจทำให้เลย์เอาต์เกิดการเปลี่ยนแปลงหลายหน้าต่างและช่วยปรับปรุงคะแนนได้ เราต้องการให้หน้าต่างมีขนาดใหญ่พอ เพื่อไม่ให้โฆษณาทำงานช้าลง
- หน้าเว็บบางหน้ามีการเปลี่ยนแปลงเลย์เอาต์เล็กน้อยอย่างต่อเนื่อง ตัวอย่างเช่น หน้าผลคะแนนกีฬาที่จะเปลี่ยนไปเล็กน้อยในการอัปเดตคะแนนแต่ละครั้ง การเปลี่ยนเหล่านี้น่ารำคาญแต่ไม่น่ารำคาญเมื่อเวลาผ่านไป เราจึงต้องการให้มีการจำกัดกรอบเวลาสำหรับการเปลี่ยนเลย์เอาต์ประเภทนี้
จาก 2 สิ่งนี้เมื่อเปรียบเทียบขนาดหน้าต่างที่หลากหลายในหน้าเว็บที่มีอยู่จริงหลายๆ หน้า เราจึงสรุปว่า 5 วินาทีเป็นการจำกัดขนาดหน้าต่างที่เหมาะสม
การดําเนินการนี้จะส่งผลต่อคะแนน CLS ของหน้าเว็บอย่างไร
เนื่องจากการอัปเดตนี้เป็นการแก้ไข CLS ของหน้า ไม่มีหน้าเว็บใดที่มีคะแนนแย่ลงจากการเปลี่ยนแปลงนี้
จากการวิเคราะห์ของเรา 55% ของต้นทางจะไม่เห็นการเปลี่ยนแปลงใน CLS เลยที่เปอร์เซ็นไทล์ที่ 75 นั่นเป็นเพราะว่าหน้าของหน้าเว็บยังไม่มีการเปลี่ยนเลย์เอาต์หรือการเปลี่ยนแปลงที่ทำอยู่นั้นจำกัดอยู่ในกรอบเวลาเซสชันเดียวแล้ว
ต้นทางที่เหลือจะเห็นคะแนนที่ดีขึ้นที่เปอร์เซ็นไทล์ที่ 75 จากการเปลี่ยนแปลงนี้ โดยส่วนใหญ่จะเห็นพัฒนาการเล็กน้อย แต่มีคนประมาณ 3% เห็นว่าคะแนนดีขึ้นจากคะแนน "ต้องปรับปรุง" หรือ "แย่" เป็นได้คะแนน "ดี" หน้าเหล่านี้มีแนวโน้มที่จะใช้การเลื่อนได้ไม่รู้จบหรือมีการอัปเดต UI ที่ช้าจำนวนมากตามที่อธิบายไว้ในโพสต์ก่อนหน้านี้
ฉันจะทดลองใช้ได้อย่างไร
เราจะอัปเดตเครื่องมือของเราให้ใช้คำจำกัดความของเมตริกใหม่ในเร็วๆ นี้ ในระหว่างนี้ คุณลองใช้ CLS เวอร์ชันอัปเดตในเว็บไซต์ใดก็ได้โดยใช้ตัวอย่างการใช้งาน JavaScript หรือการแยกส่วนขยาย Web Vitals
ขอขอบคุณทุกคนที่สละเวลาอ่านโพสต์ก่อนหน้าและให้ ความคิดเห็น!