เผยแพร่เมื่อวันที่ 30 ตุลาคม 2024
การเปิดตัว Interaction to Next Paint (INP) เป็นเมตริก Core Web Vital ในช่วงต้นปี 2024 ได้ทําให้ผู้คนสนใจประสิทธิภาพการแสดงผลมากขึ้น ส่วนหนึ่งของ INP จะมุ่งเน้นที่ระยะเวลาที่เบราว์เซอร์ใช้ในการแสดงเฟรมถัดไปหลังจากผู้ใช้เริ่มโต้ตอบกับหน้าเว็บ การทำให้ INP ของเว็บไซต์ต่ำอยู่เสมอจะทำให้ผู้ใช้รู้สึกว่าเว็บไซต์ตอบสนองต่อการโต้ตอบของตนอย่างรวดเร็วและราบรื่นที่สุด
สิ่งที่สําคัญอีกอย่างคืองานแสดงผลที่ต้องเกิดขึ้นขณะโหลดหน้าเว็บ ซึ่งอาจทำให้การโต้ตอบล่าช้าตั้งแต่เริ่มต้น คุณควรหาวิธีลดปริมาณงานที่ต้องทำในช่วงสําคัญนี้ของวงจรหน้าเว็บ พร็อพเพอร์ตี้ CSS content-visibility เป็นวิธีหนึ่งที่จะบรรลุเป้าหมายนี้ และเรายินดีที่จะประกาศว่าขณะนี้เกณฑ์พื้นฐานพร้อมใช้งานแล้วตั้งแต่เดือนกันยายน 2024 เป็นต้นไป
content-visibility เป็นพร็อพเพอร์ตี้ CSS ที่บอกให้ User Agent เลื่อนการแสดงผลองค์ประกอบจนกว่าองค์ประกอบจะเข้าใกล้วิวพอร์ต การเปลี่ยนแปลงนี้อาจเป็นประโยชน์สำหรับหน้าเว็บที่มีองค์ประกอบ DOM หลายรายการ เพราะการโหลดครั้งแรกของหน้าเว็บจะทำให้การแสดงผลลดลง แต่งานจะดำเนินการก่อนที่ผู้ใช้จะต้องเห็น
content-visibility: auto กับพื้นที่เนื้อหาแบบแยกส่วนช่วยเพิ่มประสิทธิภาพการแสดงผล 7 เท่าเมื่อโหลดครั้งแรก อ่านต่อเพื่อดูข้อมูลเพิ่มเติม
หากต้องการเปิดใช้การเพิ่มประสิทธิภาพนี้กับองค์ประกอบนอกหน้าจอ ให้ใช้กฎ content-visibility: auto กับองค์ประกอบดังกล่าวใน CSS ของเว็บไซต์ ดังนี้
.render-me-later {
content-visibility: auto;
}
content-visibility ทำงานตามลักษณะการทำงานบางอย่างที่กำหนดไว้สำหรับพร็อพเพอร์ตี้ contain ในการรวม CSS วัตถุประสงค์ของการยับยั้ง CSS คือการแยกออกจากส่วนต่างๆ ของแผนผัง DOM ซึ่งช่วยให้การดำเนินการแสดงผลมีขอบเขตเฉพาะส่วนหนึ่งของต้นไม้ DOM ดังนั้นเลย์เอาต์จึงใช้งานไม่ได้และต้องทำใหม่สำหรับต้นไม้ DOM เพียงบางส่วนเท่านั้น แม้ว่าจะใช้เพื่อประสิทธิภาพการแสดงผล แต่คุณก็ต้องคุ้นเคยกับค่าต่างๆ ของพร็อพเพอร์ตี้ contain และวิธีใช้ค่าเหล่านั้นอย่างมีประสิทธิภาพ
เมื่อใช้ content-visibility: auto กับองค์ประกอบ องค์ประกอบเหล่านั้นจะรับพร็อพเพอร์ตี้บางอย่างที่พร็อพเพอร์ตี้ contain มีให้โดยอัตโนมัติ ผลที่ได้คือองค์ประกอบที่ได้รับผลกระทบจะแสดงผลด้วยระดับความสูง 0px ในตอนแรก ซึ่งหมายความว่าไม่แสดงผล
แต่วิธีนี้ก็มีผลข้างเคียงบางอย่าง เช่น แถบเลื่อนของหน้าเว็บอาจเลื่อนและเปลี่ยนความสูงเมื่อผู้ใช้เลื่อนไปยังองค์ประกอบที่ก่อนหน้านี้ยังไม่ได้แสดงผล ซึ่งจะแสดงผลทันเวลาที่ผู้ใช้จะเห็น หากต้องการลดปัญหานี้ ให้ใช้พร็อพเพอร์ตี้ contain-intrinsic-size
เนื่องจาก content-visibility เพิ่งเปิดตัวเป็น Baseline ใหม่ คุณจึงอาจมีข้อกังวลเกี่ยวกับผู้ใช้ที่มีเบราว์เซอร์ที่ยังไม่ได้อัปเดตเพื่อใช้พร็อพเพอร์ตี้ใหม่ โปรดทราบว่า content-visibility เป็นพร็อพเพอร์ตี้ CSS คุณจึงไม่ต้องกังวลมากเกินไป เบราว์เซอร์ที่เข้าใจว่าเบราว์เซอร์นั้นจะใช้งานหรือไม่ เบราว์เซอร์ที่จะไม่ใช้เบราว์เซอร์ ซึ่งหมายความว่านอกเหนือจากประโยชน์ด้านประสิทธิภาพที่คุณจะได้รับจากเบราว์เซอร์ที่รองรับ content-visibility แล้ว คุณยังคาดหวังได้ว่าหน้าเว็บจะทํางานแบบเดียวกันโดยส่วนใหญ่
content-visibility มีประโยชน์ด้านเพิ่มเติม และหากมีบางกรณีที่คุณสามารถใช้เครื่องมือดังกล่าวเพื่อลดการแสดงผลระหว่างการโหลดหน้าเว็บ คุณควรพิจารณาใช้ฟีเจอร์นี้เพื่อให้แน่ใจว่าหน้าเว็บจะมีกำลังในการประมวลผลมากที่สุดเท่าที่จะเป็นไปได้เมื่อต้องใช้มากที่สุด ตอนนี้ฟีเจอร์ที่มีประโยชน์นี้พร้อมใช้งานใน Baseline ใหม่แล้ว คุณจึงใช้ฟีเจอร์นี้ได้เพื่อให้ผู้ใช้ได้รับประโยชน์จากการแสดงผลที่ฟีเจอร์นี้หลีกเลี่ยงจนกว่าจะจำเป็น