แผนในการปรับปรุงเมตริก 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 ส่วนขยาย
ขอขอบคุณทุกคนที่สละเวลาอ่านโพสต์ก่อนหน้านี้และ ความคิดเห็น!