การเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดอาจรบกวนประสบการณ์ของผู้ใช้ในหลายด้าน ตั้งแต่ทำให้ผู้ใช้หายไปขณะที่อ่านหากข้อความย้ายที่กะทันหัน ไปจนถึงการทำให้ผู้ใช้คลิกลิงก์หรือปุ่มที่ไม่ถูกต้อง ในบางกรณี การทำเช่นนี้อาจสร้างความเสียหายร้ายแรงได้
การเคลื่อนไหวที่ไม่คาดคิดของเนื้อหาในหน้ามักเกิดขึ้นเมื่อทรัพยากรโหลดแบบไม่พร้อมกัน หรือเพิ่มองค์ประกอบ DOM ลงในหน้านั้นแบบไดนามิกก่อนเนื้อหาที่มีอยู่ สาเหตุของการเปลี่ยนแปลงเลย์เอาต์อาจเกิดจากรูปภาพหรือวิดีโอที่มีขนาดที่ไม่รู้จัก แบบอักษรที่แสดงขนาดใหญ่หรือเล็กกว่ารูปแบบสำรองในช่วงแรก หรือโฆษณาหรือวิดเจ็ตของบุคคลที่สามที่ปรับขนาดตัวเองแบบไดนามิก
ความแตกต่างระหว่างการทำงานของเว็บไซต์ที่อยู่ระหว่างการพัฒนากับประสบการณ์ที่ผู้ใช้พบจะทำให้ปัญหานี้แย่ลง เช่น
- เนื้อหาที่ปรับเปลี่ยนให้เหมาะกับแต่ละบุคคลหรือของบุคคลที่สามมักจะมีลักษณะการทำงานแตกต่างกันในการพัฒนาและในเวอร์ชันที่ใช้งานจริง
- รูปภาพทดสอบมักจะอยู่ในแคชของเบราว์เซอร์ของนักพัฒนาซอฟต์แวร์แล้ว แต่อาจใช้เวลาโหลดนานกว่าสำหรับผู้ใช้ปลายทาง
- การเรียก API ที่ทำงานในเครื่องมักเร็วมากจนทำให้เกิดความล่าช้าในการพัฒนาที่ไม่มีใครสังเกตได้กลายเป็นอย่างมากในเวอร์ชันที่ใช้งานจริง
เมตริก Cumulative Layout Shift (CLS) ช่วยคุณแก้ปัญหานี้โดยการวัดความถี่ของปัญหาที่เกิดขึ้นกับผู้ใช้จริง
CLS คืออะไร
CLS คือการวัดคะแนนการเปลี่ยนแปลงของเลย์เอาต์ที่เพิ่มขึ้นมากที่สุดสําหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดซึ่งเกิดขึ้นตลอดทั้งวงจรของหน้าเว็บ
การเปลี่ยนเลย์เอาต์จะเกิดขึ้นเมื่อองค์ประกอบที่มองเห็นได้เปลี่ยนตำแหน่งจากเฟรมที่แสดงผลหนึ่งไปยังเฟรมถัดไป (ดูรายละเอียดเกี่ยวกับวิธีการคำนวณคะแนนการเปลี่ยนเลย์เอาต์แต่ละรายการได้ในคู่มือนี้)
การเปลี่ยนแปลงเลย์เอาต์อย่างรวดเร็ว หรือที่เรียกว่ากรอบเวลาเซสชัน คือการเปลี่ยนเลย์เอาต์อย่างน้อย 1 รายการเกิดขึ้นติดต่อกันอย่างรวดเร็ว โดยมีระยะเวลาระหว่างการเปลี่ยนแต่ละครั้งน้อยกว่า 1 วินาทีและไม่เกิน 5 วินาทีสำหรับระยะเวลาของกรอบเวลาทั้งหมด
ช่วงเวลาที่เร่งประสิทธิภาพมากที่สุดคือกรอบเวลาเซสชันที่มีคะแนนสะสมสูงสุดของการเปลี่ยนเลย์เอาต์ทั้งหมดภายในกรอบเวลานั้น
คะแนน CLS ที่ดีคืออะไร
เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บไซต์ควรพยายามให้มีคะแนน CLS ไม่เกิน 0.1 คะแนน เกณฑ์ที่ดีในการวัดคือเปอร์เซ็นไทล์ที่ 75 ของการโหลดหน้าเว็บที่แบ่งกลุ่มในอุปกรณ์เคลื่อนที่และเดสก์ท็อป เพื่อให้มั่นใจว่าคุณจะบรรลุเป้าหมายนี้สำหรับผู้ใช้ส่วนใหญ่
ดูข้อมูลเพิ่มเติมเกี่ยวกับการวิจัยและระเบียบวิธีเบื้องหลังคำแนะนำนี้ได้ที่การกำหนดเกณฑ์เมตริก Core Web Vitals
การเปลี่ยนเลย์เอาต์อย่างละเอียด
การเปลี่ยนเลย์เอาต์กำหนดโดย Layout Instability API ซึ่งจะรายงาน layout-shift รายการเมื่อองค์ประกอบที่มองเห็นได้ภายในวิวพอร์ตเปลี่ยนตำแหน่งเริ่มต้น (เช่น ตำแหน่งด้านบนและด้านซ้ายในโหมดการเขียนเริ่มต้น) ระหว่าง 2 เฟรม องค์ประกอบดังกล่าวถือเป็นองค์ประกอบที่ไม่เสถียร
โปรดทราบว่าการเปลี่ยนเลย์เอาต์จะเกิดขึ้นเมื่อองค์ประกอบที่มีอยู่เปลี่ยนตำแหน่งเริ่มต้นเท่านั้น หากมีการเพิ่มองค์ประกอบใหม่ลงใน DOM หรือองค์ประกอบที่มีอยู่เปลี่ยนแปลงขนาด จะไม่นับเป็นการเปลี่ยนเลย์เอาต์ ตราบใดที่การเปลี่ยนแปลงไม่ทำให้องค์ประกอบอื่นๆ ที่มองเห็นได้เปลี่ยนตำแหน่งเริ่มต้น
คะแนนการเปลี่ยนเลย์เอาต์
ในการคำนวณคะแนนการเปลี่ยนแปลงของเลย์เอาต์ เบราว์เซอร์จะดูที่ขนาดวิวพอร์ตและการเคลื่อนไหวขององค์ประกอบที่ไม่เสถียรในวิวพอร์ตระหว่างเฟรมที่แสดงผล 2 เฟรม คะแนนการเปลี่ยนแปลงของเลย์เอาต์เป็นผลคูณของการวัด 2 แบบของการเคลื่อนไหวนั้น ได้แก่ เศษส่วนผลกระทบ และเศษส่วนระยะทาง (กำหนดทั้ง 2 อย่างไว้ด้านล่าง)
layout shift score = impact fraction * distance fraction
เศษส่วนผลกระทบ
เศษส่วนผลกระทบวัดว่าองค์ประกอบที่ไม่เสถียรส่งผลต่อพื้นที่วิวพอร์ตระหว่าง 2 เฟรมอย่างไร
เศษส่วนผลกระทบสำหรับเฟรมที่ระบุคือการรวมพื้นที่ที่มองเห็นขององค์ประกอบที่ไม่เสถียรทั้งหมดสำหรับเฟรมนั้นและเฟรมก่อนหน้า เป็นเศษส่วนของพื้นที่ทั้งหมดของวิวพอร์ต
ในรูปภาพก่อนหน้า มีองค์ประกอบที่ใช้พื้นที่ครึ่งหนึ่งของวิวพอร์ตใน 1 เฟรม จากนั้นในเฟรมถัดไป องค์ประกอบจะเลื่อนลง 25% ของความสูงของวิวพอร์ต สี่เหลี่ยมผืนผ้าจุดสีแดงแสดงถึงการรวมกันของพื้นที่ที่มองเห็นได้ขององค์ประกอบในทั้ง 2 เฟรม ซึ่งในกรณีนี้คือ 75% ของวิวพอร์ตทั้งหมด ดังนั้นเศษส่วนที่มีผลกระทบจึงเป็น 0.75
เศษส่วนระยะทาง
ส่วนอื่นๆ ของสมการคะแนนการเปลี่ยนเลย์เอาต์จะวัดระยะทางที่องค์ประกอบที่ไม่เสถียรได้ย้ายไปซึ่งสัมพันธ์กับวิวพอร์ต เศษส่วนระยะทางคือระยะทางในแนวนอนหรือแนวตั้งที่ไกลที่สุดที่องค์ประกอบที่ไม่เสถียรเคลื่อนที่ในเฟรม หารด้วยขนาดที่ใหญ่ที่สุดของวิวพอร์ต (ความกว้างหรือความสูง ขึ้นอยู่กับว่าค่าใดมากกว่า)
ในตัวอย่างก่อนหน้านี้ ขนาดวิวพอร์ตที่ใหญ่ที่สุดคือความสูง และองค์ประกอบที่ไม่เสถียรมีการเคลื่อนที่ไป 25% ของความสูงของวิวพอร์ต ซึ่งทำให้เศษส่วนระยะทางเป็น 0.25
ดังนั้นในตัวอย่างนี้ เศษส่วนผลกระทบคือ 0.75 และเศษส่วนระยะทางคือ 0.25 ดังนั้นคะแนนการเปลี่ยนแปลงของเลย์เอาต์จึงเป็น 0.75 * 0.25 = 0.1875
ตัวอย่าง
ตัวอย่างถัดไปแสดงให้เห็นว่าการเพิ่มเนื้อหาลงในองค์ประกอบที่มีอยู่ส่งผลต่อคะแนนการเปลี่ยนเลย์เอาต์อย่างไร
ในตัวอย่างนี้ กล่องสีเทาจะเปลี่ยนขนาด แต่ตำแหน่งเริ่มต้นไม่เปลี่ยนแปลง จึงไม่เป็นองค์ประกอบที่ไม่เสถียร
ปุ่ม "Click Me!" ไม่ได้อยู่ใน DOM ก่อนหน้านี้ ตำแหน่งเริ่มต้นจึงไม่เปลี่ยนเช่นกัน
อย่างไรก็ตาม ตำแหน่งเริ่มต้นของกล่องสีเขียวจะเปลี่ยนแปลง แต่เนื่องจากมีการย้ายตำแหน่งออกจากวิวพอร์ตบางส่วน พื้นที่ที่มองไม่เห็นจึงไม่ได้รับการพิจารณาเมื่อคำนวณเศษส่วนผลกระทบ จุดร่วมของพื้นที่ที่มองเห็นได้สำหรับกล่องสีเขียวในทั้ง 2 เฟรม (แสดงโดยสี่เหลี่ยมผืนผ้าสีแดง) เท่ากับพื้นที่ของช่องสีเขียวในเฟรมแรก ซึ่งก็คือ 50% ของวิวพอร์ต เศษส่วนของผลกระทบคือ 0.5
เศษส่วนระยะทางแสดงด้วยลูกศรสีม่วง กล่องสีเขียวได้เลื่อนลงไปประมาณ 14% ของวิวพอร์ต ดังนั้นเศษส่วนระยะทางจึงเป็น 0.14
คะแนนการเปลี่ยนเลย์เอาต์คือ 0.5 x 0.14 = 0.07
ตัวอย่างต่อไปนี้แสดงให้เห็นว่าองค์ประกอบที่ไม่เสถียรหลายรายการส่งผลต่อคะแนนการเปลี่ยนเลย์เอาต์ของหน้าเว็บอย่างไร
ในเฟรมแรกของรูปภาพก่อนหน้า มีผลลัพธ์ของคำขอ API สำหรับสัตว์ 4 รายการ โดยจัดเรียงตามลำดับตัวอักษร ในเฟรมที่ 2 ระบบจะเพิ่มผลลัพธ์เพิ่มเติมลงในรายการที่จัดเรียงแล้ว
รายการแรกในรายการ ("Cat") ไม่ได้เปลี่ยนตำแหน่งเริ่มต้นระหว่างเฟรม จึงมีความเสถียร ในทำนองเดียวกัน รายการใหม่ที่เพิ่มลงในรายการก็ไม่ได้อยู่ใน DOM ก่อนหน้านี้ ดังนั้นตำแหน่งเริ่มต้นก็จะไม่เปลี่ยนแปลงเช่นกัน แต่รายการที่มีป้ายกำกับว่า "สุนัข" "ม้า" และ "ม้าลาย" ทั้งหมดจะเลื่อนตำแหน่งเริ่มต้น ซึ่งทำให้องค์ประกอบไม่เสถียร
เช่นเดียวกัน สี่เหลี่ยมผืนผ้าที่มีเส้นประสีแดงแสดงถึงการรวมกันขององค์ประกอบที่ไม่เสถียรทั้ง 3 รายการนี้ก่อนและหลังพื้นที่ ซึ่งในกรณีนี้คือประมาณ 60% ของพื้นที่ของวิวพอร์ต (เศษส่วนที่มีผลกระทบของ 0.60)
ลูกศรแสดงระยะทางที่องค์ประกอบที่ไม่เสถียรได้เคลื่อนออกจากตำแหน่งเริ่มต้น องค์ประกอบ "Zebra" ซึ่งแสดงด้วยลูกศรสีน้ำเงินมีการเคลื่อนไหวมากที่สุดประมาณ 30% ของความสูงวิวพอร์ต ทำให้เศษส่วนระยะทางในตัวอย่างนี้ 0.3
คะแนนการเปลี่ยนเลย์เอาต์คือ 0.60 x 0.3 = 0.18
การเปลี่ยนแปลงของเลย์เอาต์ที่คาดไว้กับที่ไม่คาดคิด
การเปลี่ยนเลย์เอาต์ไม่ใช่เรื่องแย่เสมอไป อันที่จริงแล้ว เว็บแอปพลิเคชันแบบไดนามิกจำนวนมากเปลี่ยนตำแหน่งเริ่มต้นขององค์ประกอบบนหน้าเว็บอยู่เสมอ การเปลี่ยนเลย์เอาต์จะแย่ก็ต่อเมื่อผู้ใช้ไม่คาดคิดเท่านั้น
การเปลี่ยนแปลงเลย์เอาต์ที่เริ่มต้นโดยผู้ใช้
โดยทั่วไปแล้ว การเปลี่ยนเลย์เอาต์ที่เกิดขึ้นตามการโต้ตอบของผู้ใช้ (เช่น การคลิกหรือการแตะลิงก์ การกดปุ่ม หรือพิมพ์ในช่องค้นหา) นั้นทำได้ปกติ ตราบใดที่การเปลี่ยนแปลงนั้นเกิดขึ้นใกล้กับการโต้ตอบของผู้ใช้อย่างชัดเจน
ตัวอย่างเช่น หากการโต้ตอบของผู้ใช้ทริกเกอร์คำขอเครือข่ายที่อาจใช้เวลาดำเนินการสักพัก ทางที่ดีที่สุดคือสร้างพื้นที่บางส่วนทันทีและแสดงสัญญาณบอกสถานะการโหลดเพื่อหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ที่ไม่พึงประสงค์เมื่อคำขอเสร็จสมบูรณ์ หากผู้ใช้ไม่ทราบว่ามีบางอย่างกําลังโหลดอยู่ หรือไม่ทราบว่าทรัพยากรจะพร้อมเมื่อใด ผู้ใช้อาจลองคลิกอย่างอื่นในขณะที่รอซึ่งอาจย้ายออกมาจากส่วนล่างได้
การเปลี่ยนเลย์เอาต์ที่เกิดขึ้นภายใน 500 มิลลิวินาทีหลังจากป้อนข้อมูลของผู้ใช้จะได้รับการกำหนดแฟล็ก hadRecentInput ดังนั้นระบบจึงยกเว้นการเปลี่ยนแปลงเหล่านี้จากการคำนวณ
ภาพเคลื่อนไหวและทรานซิชัน
หากทำได้ดีแล้วภาพเคลื่อนไหวและการเปลี่ยนจะเป็นวิธีที่ยอดเยี่ยมในการอัปเดตเนื้อหาในหน้าเว็บโดยไม่ทำให้ผู้ใช้แปลกใจ เนื้อหาที่เปลี่ยนแปลงอย่างกะทันหันและไม่คาดคิดบนหน้าเว็บมักจะทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี แต่เนื้อหาที่ค่อยๆ เลื่อนไปอย่างเป็นธรรมชาติจากตำแหน่งหนึ่งไปยังอีกตำแหน่งหนึ่งมักจะช่วยให้ผู้ใช้เข้าใจสิ่งที่เกิดขึ้นได้ดีขึ้น และเป็นแนวทางระหว่างการเปลี่ยนแปลงสถานะต่างๆ ได้
โปรดตรวจสอบว่าได้ปฏิบัติตามการตั้งค่าเบราว์เซอร์ของ prefers-reduced-motion เนื่องจากผู้เข้าชมเว็บไซต์บางรายอาจได้รับผลกระทบหรือปัญหาเกี่ยวกับการดึงดูดความสนใจจากภาพเคลื่อนไหว
คุณสมบัติ CSS transform ช่วยให้คุณทำให้องค์ประกอบเคลื่อนไหวโดยไม่ทริกเกอร์การเปลี่ยนแปลงเลย์เอาต์ โดยทำดังนี้
- ใช้
transform: scale()แทนการเปลี่ยนพร็อพเพอร์ตี้heightและwidth - หากต้องการย้ายองค์ประกอบไปรอบๆ ให้หลีกเลี่ยงการเปลี่ยนพร็อพเพอร์ตี้
top,right,bottomหรือleftและใช้transform: translate()แทน
วิธีวัด CLS
คุณสามารถวัด CLS ได้ในห้องทดลองหรือในภาคสนาม และเครื่องมือต่อไปนี้
เครื่องมือภาคสนาม
- รายงานประสบการณ์ของผู้ใช้ Chrome
- PageSpeed Insights
- Search Console (รายงาน Core Web Vitals)
- ไลบรารี JavaScript
web-vitalsรายการ
เครื่องมือสำหรับห้องทดลอง
วัดการเปลี่ยนแปลงเลย์เอาต์ใน JavaScript
หากต้องการวัดการเปลี่ยนแปลงเลย์เอาต์ใน JavaScript ให้ใช้ Layout Instability API
ตัวอย่างต่อไปนี้แสดงวิธีสร้าง PerformanceObserver เพื่อบันทึกรายการ layout-shift ไปยังคอนโซล
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
วัด CLS ใน JavaScript
หากต้องการวัด CLS ใน JavaScript คุณต้องจัดกลุ่มรายการ layout-shift ที่ไม่คาดคิดเหล่านี้ลงในเซสชัน แล้วคำนวณค่าสูงสุดของเซสชัน คุณสามารถดูซอร์สโค้ดของไลบรารี JavaScript web vitals ซึ่งมีการใช้งานข้อมูลอ้างอิงเกี่ยวกับวิธีการคำนวณ CLS ได้
ในกรณีส่วนใหญ่ ค่า CLS ปัจจุบัน ณ เวลาที่ยกเลิกการโหลดหน้าเป็นค่า CLS สุดท้ายของหน้านั้น แต่มีข้อยกเว้นที่สำคัญบางอย่างตามที่ระบุไว้ในส่วนถัดไป ไลบรารี JavaScript ของ web vitals จะพิจารณาองค์ประกอบเหล่านี้ให้ได้มากที่สุด ภายใต้ข้อจำกัดของ Web API
ความแตกต่างระหว่างเมตริกกับ API
- หากหน้าเว็บโหลดอยู่ในเบื้องหลังหรือทำงานอยู่เบื้องหลังก่อนที่เบราว์เซอร์จะระบายสีเนื้อหาใดๆ ก็ไม่ควรรายงานค่า CLS
- หากมีการคืนค่าหน้าจาก Back/Forward Cache ควรรีเซ็ตค่า CLS เป็น 0 เนื่องจากผู้ใช้จะเห็นค่านี้เป็นการเข้าชมหน้าเว็บที่ไม่ซ้ำ
- API จะไม่รายงานรายการ
layout-shiftสำหรับการเปลี่ยนแปลงที่เกิดขึ้นภายใน iframe แต่เมตริกจะทำงานเนื่องจากเป็นส่วนหนึ่งของประสบการณ์ของผู้ใช้หน้าเว็บ ค่านี้สามารถแสดงเป็นความแตกต่างระหว่าง CrUX กับ RUM คุณควรพิจารณาใช้ CLS เพื่อวัด CLS อย่างถูกต้อง เฟรมย่อยสามารถใช้ API เพื่อรายงานรายการlayout-shiftไปยังเฟรมหลักสำหรับการรวมได้
นอกจากข้อยกเว้นเหล่านี้แล้ว CLS ยังมีความซับซ้อนมากขึ้นเนื่องจากการวัดผลตลอดอายุการใช้งานหน้าเว็บ
- ผู้ใช้อาจเปิดแท็บค้างไว้นานมาก เช่น วัน สัปดาห์ หรือเดือน อันที่จริงผู้ใช้อาจไม่ได้ปิดแท็บเลย
- ในระบบปฏิบัติการบนอุปกรณ์เคลื่อนที่ เบราว์เซอร์มักไม่เรียกใช้โค้ดเรียกกลับสำหรับยกเลิกการโหลดหน้าสำหรับแท็บในเบื้องหลัง ซึ่งทำให้รายงานค่า "สุดท้าย" ได้ยาก
ในการจัดการกับกรณีเช่นนี้ คุณควรรายงาน CLS ทุกครั้งที่หน้าเว็บอยู่ในเบื้องหลัง นอกเหนือจากทุกครั้งที่ยกเลิกการโหลด (เหตุการณ์ visibilitychange จะครอบคลุมทั้ง 2 สถานการณ์นี้) และระบบการวิเคราะห์ที่ได้รับข้อมูลนี้จะต้องคำนวณค่า CLS สุดท้ายบนแบ็กเอนด์
แทนที่จะจดจําและจัดการกับกรณีต่างๆ เหล่านี้ด้วยตัวเอง นักพัฒนาแอปสามารถใช้ไลบรารี JavaScript ของ web-vitals เพื่อวัด CLS ซึ่งครอบคลุมทุกอย่างที่กล่าวถึงข้างต้น ยกเว้นกรณีของ iframe
import {onCLS} from 'web-vitals';
// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);
วิธีปรับปรุง CLS
สำหรับคำแนะนำเพิ่มเติมเกี่ยวกับการระบุการเปลี่ยนแปลงเลย์เอาต์ในภาคสนามและใช้ข้อมูลในห้องทดลองเพื่อเพิ่มประสิทธิภาพ โปรดดูคู่มือในการเพิ่มประสิทธิภาพ CLS
แหล่งข้อมูลเพิ่มเติม
- คำแนะนำของแท็กผู้เผยแพร่โฆษณาผ่าน Google เกี่ยวกับการลดการเปลี่ยนแปลงเลย์เอาต์
- การทำความเข้าใจ Cumulative Layout Shift โดย Annie Sullivan และ Steve Kobes ที่ #PerfMatters (2020)
บันทึกการเปลี่ยนแปลง
ในบางครั้ง ระบบจะพบข้อบกพร่องใน API ที่ใช้วัดเมตริก และบางครั้งพบในคำนิยามของเมตริกด้วย ด้วยเหตุนี้ บางครั้งต้องมีการเปลี่ยนแปลงและการเปลี่ยนแปลงเหล่านี้อาจแสดงเป็นการปรับปรุงหรือการถดถอยในรายงานและแดชบอร์ดภายในของคุณ
การเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับการใช้งานหรือคำจำกัดความของเมตริกเหล่านี้จะปรากฏในบันทึกการเปลี่ยนแปลงนี้เพื่อช่วยคุณจัดการ
หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ คุณสามารถให้ข้อมูลไว้ในกลุ่ม Google web-vitals-feedback