CLS เกิดขึ้นเมื่อเนื้อหาที่มองเห็นได้เคลื่อนที่ หลังจาก ถูก paint ไปแล้ว ทำให้สิ่งที่ผู้ใช้กำลังมองอยู่ขยับ สาเหตุแทบทุกครั้งคือ เนื้อหาที่โหลดโดยไม่ได้จองพื้นที่ไว้
CLS เกิดขึ้นเมื่อเนื้อหาที่มองเห็นได้เคลื่อนที่ หลังจาก ถูก paint ไปแล้ว ทำให้สิ่งที่ผู้ใช้กำลังมองอยู่ขยับ สาเหตุแทบทุกครั้งคือ เนื้อหาที่โหลดโดยไม่ได้จองพื้นที่ไว้
top, height) แทนที่จะเป็น transformwidth/height (หรือ aspect-ratio) เสมอ เพื่อจองพื้นที่ก่อนโหลด:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserves the box -->
.hero { aspect-ratio: 16 / 9; } /* reserves ratio for responsive media */
font-display: optional หรือ swap ร่วมกับ size-adjust/preload เพื่อลด reflow ให้น้อยที่สุดเมื่อ web font มาถึงposition: absolute) หรือดันจากด้านล่างแทนtransform/opacity — พวกมันถูก composite และไม่ทำให้เกิด layoutCLS คือ Core Web Vital ที่ แก้ได้ง่ายที่สุด — มักเป็นแค่ขนาดที่หายไปไม่กี่จุด ผู้สัมภาษณ์ใช้มันเพื่อทดสอบว่าคุณเข้าใจ render pipeline หรือไม่: การจองพื้นที่ล่วงหน้าหมายถึงเบราว์เซอร์ไม่ต้อง reflow เลย ซึ่งเป็นเหตุผลว่าทำไม transform จึงดีกว่าการ animate top
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค