Cumulative Layout Shift (CLS)

การสนับสนุนเบราว์เซอร์

  • 77
  • 79
  • x
  • x

แหล่งที่มา

Cumulative Layout Shift (CLS) เป็นเมตริก Core Web Vitals ที่เสถียร โดยเป็นเมตริกที่สำคัญและยึดผู้ใช้เป็นศูนย์กลางสำหรับการวัดความเสถียรของภาพเนื่องจากช่วยวัดความถี่ที่ผู้ใช้เห็นการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิด CLS ที่ต่ำช่วยให้หน้าน่าพึงพอใจ

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

การเปลี่ยนเลย์เอาต์อย่างกะทันหันทำให้ผู้ใช้ยืนยันคำสั่งซื้อจำนวนมากที่ตนตั้งใจจะยกเลิก

การเคลื่อนไหวที่ไม่คาดคิดของเนื้อหาในหน้ามักเกิดขึ้นเมื่อทรัพยากรโหลดแบบอะซิงโครนัสหรือมีการเพิ่มองค์ประกอบ DOM ลงในหน้าเว็บก่อนเนื้อหาที่มีอยู่ สาเหตุของการเคลื่อนไหวดังกล่าวอาจเกิดจากรูปภาพหรือวิดีโอที่มีขนาดที่ไม่รู้จัก แบบอักษรที่แสดงขนาดใหญ่หรือเล็กกว่ารูปแบบสำรอง หรือโฆษณาหรือวิดเจ็ตของบุคคลที่สามที่ปรับขนาดตัวเองแบบไดนามิก

ความแตกต่างระหว่างการทำงานของเว็บไซต์ที่อยู่ระหว่างการพัฒนากับประสบการณ์ของผู้ใช้ จะทำให้ปัญหานี้แย่ลง เช่น

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

เมตริก Cumulative Layout Shift (CLS) ช่วยคุณแก้ปัญหานี้โดยการวัดความถี่ที่เกิดขึ้นกับผู้ใช้จริง

CLS คืออะไร

CLS คือการวัดคะแนนการเปลี่ยนแปลงของเลย์เอาต์ที่เพิ่มขึ้นมากที่สุดสําหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดซึ่งเกิดขึ้นตลอดอายุการใช้งานของหน้าเว็บ

การเปลี่ยนเลย์เอาต์จะเกิดขึ้นทุกครั้งที่องค์ประกอบที่มองเห็นได้เปลี่ยนตำแหน่งจากเฟรมที่แสดงผลหนึ่งไปยังเฟรมถัดไป ดูรายละเอียดเกี่ยวกับวิธีวัดการเปลี่ยนแปลงเหล่านี้ได้ที่คะแนนการเปลี่ยนเลย์เอาต์

การเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นอย่างรวดเร็ว หรือที่เรียกว่ากรอบเวลาเซสชัน คือการเปลี่ยนแปลงเลย์เอาต์อย่างน้อย 1 รายการเกิดขึ้นติดต่อกันอย่างรวดเร็วโดยมีการเปลี่ยนแปลงแต่ละครั้งไม่ถึง 1 วินาที ในช่วงเวลาไม่เกิน 5 วินาที

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

ตัวอย่างกรอบเวลาเซสชัน แถบสีน้ำเงินแสดงถึงคะแนนของการเปลี่ยนเลย์เอาต์แต่ละรายการ

คะแนน CLS ที่ดีคืออะไร

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

ค่า CLS ที่ดีคือ 0.1 หรือน้อยกว่า ค่าที่ไม่ดีมากกว่า 0.25 และค่าอื่นๆ ที่ต้องปรับปรุง
ค่า CLS ที่ดีคือไม่เกิน 0.1 ค่าที่ไม่ดีมากกว่า 0.25

ดูข้อมูลเพิ่มเติมเกี่ยวกับการวิจัยและระเบียบวิธีเบื้องหลังคำแนะนำนี้ได้ที่การกำหนดเกณฑ์เมตริก Core Web Vitals

การเปลี่ยนเลย์เอาต์อย่างละเอียด

การเปลี่ยนเลย์เอาต์จะกำหนดโดย Layout Instability API ซึ่งจะรายงาน layout-shift รายการทุกครั้งที่องค์ประกอบที่มองเห็นได้ภายในวิวพอร์ตเปลี่ยนตำแหน่งเริ่มต้น (เช่น ตำแหน่งด้านบนและด้านซ้ายในโหมดการเขียนเริ่มต้น) ระหว่าง 2 เฟรม องค์ประกอบที่มีการเปลี่ยนตำแหน่งเริ่มต้นจะถือว่าเป็นองค์ประกอบที่ไม่เสถียร

การเปลี่ยนเลย์เอาต์จะเกิดขึ้นเมื่อองค์ประกอบที่มีอยู่เปลี่ยนตำแหน่งเริ่มต้นเท่านั้น หากมีการเพิ่มองค์ประกอบใหม่ลงใน DOM หรือขนาดองค์ประกอบที่มีอยู่เปลี่ยนแปลง ระบบจะนับเป็นการเปลี่ยนเลย์เอาต์ก็ต่อเมื่อการเปลี่ยนแปลงดังกล่าวทำให้องค์ประกอบอื่นๆ ที่มองเห็นได้เปลี่ยนตำแหน่งเริ่มต้น

คะแนนการเปลี่ยนเลย์เอาต์

ในการคำนวณคะแนนการเปลี่ยนเลย์เอาต์ เบราว์เซอร์จะพิจารณาขนาดวิวพอร์ตและการเคลื่อนไหวขององค์ประกอบที่ไม่เสถียรในวิวพอร์ตระหว่างเฟรมที่แสดงผล 2 เฟรม คะแนนการเปลี่ยนแปลงของเลย์เอาต์เป็นผลคูณระหว่างการวัด 2 อย่างของการเคลื่อนไหวนั้น ได้แก่ เศษส่วนผลกระทบและเศษส่วนระยะทาง

layout shift score = impact fraction * distance fraction

เศษส่วนผลกระทบ

เศษส่วนผลกระทบจะวัดว่าองค์ประกอบที่ไม่เสถียรส่งผลต่อพื้นที่วิวพอร์ตระหว่าง 2 เฟรมอย่างไร

เศษส่วนผลกระทบสำหรับเฟรมหนึ่งๆ คือการรวมพื้นที่ที่มองเห็นได้ขององค์ประกอบที่ไม่เสถียรทั้งหมดสำหรับเฟรมนั้นและเฟรมก่อนหน้าเข้าด้วยกัน เป็นเศษส่วนของพื้นที่ทั้งหมดของวิวพอร์ต

ตัวอย่างเศษส่วนผลกระทบที่มีองค์ประกอบไม่เสถียร 1 รายการ
หากองค์ประกอบเปลี่ยนตำแหน่ง ทั้งตำแหน่งก่อนหน้าและปัจจุบันขององค์ประกอบจะก่อให้เกิดเศษส่วนผลกระทบ

รูปภาพนี้แสดงองค์ประกอบที่ใช้พื้นที่ครึ่งหนึ่งของวิวพอร์ตในเฟรมเดียว ในเฟรมถัดไป องค์ประกอบจะเลื่อนลง 25% ของความสูงของวิวพอร์ต สี่เหลี่ยมผืนผ้าเส้นประสีแดงแสดงถึงพื้นที่ที่มองเห็นได้ขององค์ประกอบในทั้ง 2 เฟรม ซึ่งในกรณีนี้คือ 75% ของวิวพอร์ตทั้งหมด ดังนั้น เศษส่วนผลกระทบจึงเป็น 0.75

เศษส่วนระยะทาง

ส่วนอื่นๆ ของสมการคะแนนการเปลี่ยนเลย์เอาต์จะวัดระยะทางที่องค์ประกอบที่ไม่เสถียรย้ายที่สัมพันธ์กับวิวพอร์ต เศษส่วนระยะทางคือระยะทางในแนวนอนหรือแนวตั้งที่ไกลที่สุดที่องค์ประกอบที่ไม่เสถียรเคลื่อนที่ในเฟรมหารด้วยขนาดที่ใหญ่ที่สุดของวิวพอร์ต (ความกว้างหรือความสูง ขึ้นอยู่กับว่าค่าใดมากกว่า)

ตัวอย่างเศษส่วนระยะทางที่มีองค์ประกอบไม่เสถียร 1 รายการ
เศษส่วนระยะทางจะวัดระยะทางในวิวพอร์ตที่องค์ประกอบเคลื่อนที่

ในตัวอย่างนี้ ขนาดวิวพอร์ตที่ใหญ่ที่สุดคือความสูง และองค์ประกอบที่ไม่เสถียรมีการเคลื่อนที่ไป 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

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

ตัวอย่างการเปลี่ยนเลย์เอาต์ที่มีองค์ประกอบที่_ไม่เสถียรและ_ไม่เสถียร_ และการตัดทอนวิวพอร์ต
เมื่อมีชื่อปรากฏในรายการที่จัดเรียงมากขึ้น ชื่อที่มีอยู่จะย้ายไป ตามลำดับตัวอักษร

รายการแรกในรายการ ("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
  • หากต้องการย้ายองค์ประกอบไปรอบๆ ให้ใช้ transform: translate() แทนการเปลี่ยนพร็อพเพอร์ตี้ top, right, bottom หรือ left

วิธีวัด CLS

สามารถวัด CLS ได้ในห้องทดลองหรือในการทดลอง และพร้อมใช้งานในเครื่องมือต่อไปนี้

เครื่องมือภาคสนาม

เครื่องมือสำหรับห้องทดลอง

วัดการเปลี่ยนแปลงเลย์เอาต์ใน 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 ที่ไม่คาดคิดซึ่งคุณเข้าสู่ระบบเซสชันแล้วคำนวณค่าสูงสุดของเซสชัน สำหรับการใช้งานข้อมูลอ้างอิง โปรดดูซอร์สโค้ด web vitals ของไลบรารี JavaScript

ในกรณีส่วนใหญ่ ค่า CLS ในตอนที่ยกเลิกการโหลดหน้าเป็นค่า CLS ขั้นสุดท้ายของหน้านั้น แต่มีข้อยกเว้นที่สำคัญ 2-3 ข้อแสดงอยู่ในส่วนถัดไป ไลบรารี JavaScript web vitals จะคำนึงถึงองค์ประกอบเหล่านี้มากที่สุด โดยไม่เกินข้อจำกัดของ Web API

ความแตกต่างระหว่างเมตริกกับ API

  • คุณไม่ควรรายงานค่า CLS หากมีการโหลดหน้าอยู่ในเบื้องหลังหรืออยู่ในเบื้องหลังก่อนที่เบราว์เซอร์จะระบายสีเนื้อหาใดๆ
  • หากมีการคืนค่าหน้าเว็บจากแคชย้อนหลังหรือไปข้างหน้า ควรรีเซ็ตค่า CLS เป็น 0 เนื่องจากผู้ใช้จะเห็นหน้าเว็บเป็นการเข้าชมหน้าเว็บที่ไม่ซ้ำ
  • API ไม่รายงานรายการ layout-shift สำหรับการเปลี่ยนแปลงที่เกิดขึ้นภายใน iframe แต่เมตริกดังกล่าวรายงานเนื่องจากเป็นส่วนหนึ่งของประสบการณ์ของผู้ใช้หน้าเว็บ ข้อมูลนี้แสดงให้เห็นถึงความแตกต่างระหว่าง CrUX กับ RUM คุณต้องระบุ iframe เพื่อให้วัด CLS ได้อย่างถูกต้อง เฟรมย่อยจะใช้ API เพื่อรายงานรายการ layout-shift ไปยังเฟรมหลักสำหรับการรวมได้

นอกจากข้อยกเว้นเหล่านี้แล้ว CLS ยังมีความซับซ้อนมากขึ้นด้วย เนื่องจากเป็นตัววัดตลอดอายุการใช้งานของหน้าเว็บ

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

ในการจัดการกับกรณีเช่นนี้ เราขอแนะนำให้ระบบรายงาน CLS ทุกครั้งที่หน้าเว็บอยู่ในเบื้องหลัง นอกเหนือจากทุกครั้งที่หน้าเว็บยกเลิกการโหลด เหตุการณ์ visibilitychange จะครอบคลุมทั้ง 2 สถานการณ์นี้ ระบบ Analytics ที่ได้รับข้อมูลนี้ จะต้องคำนวณค่า CLS สุดท้ายบนแบ็กเอนด์

แทนที่จะต้องจำและจัดการกับกรณีเหล่านี้ด้วยตัวเอง นักพัฒนาแอปสามารถใช้web-vitalsไลบรารี JavaScript เพื่อวัด 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

แหล่งข้อมูลเพิ่มเติม

บันทึกการเปลี่ยนแปลง

ในบางครั้ง อาจพบข้อบกพร่องใน API ที่ใช้วัดเมตริก และบางครั้งอาจพบในคำนิยามของเมตริกด้วย ด้วยเหตุนี้ บางครั้งต้องมีการเปลี่ยนแปลงและการเปลี่ยนแปลงเหล่านี้อาจแสดงเป็นการปรับปรุงหรือการถดถอยในรายงานและแดชบอร์ดภายในของคุณ

การเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับการใช้งานหรือคำจำกัดความของเมตริกเหล่านี้จะปรากฏในบันทึกการเปลี่ยนแปลงนี้ เพื่อช่วยให้คุณจัดการการเปลี่ยนแปลงนี้

หากคุณมีความคิดเห็นเกี่ยวกับเมตริกเหล่านี้ โปรดระบุไว้ในกลุ่ม Google web-vitals-feedback