content-visibility: คุณสมบัติ CSS ใหม่ที่เพิ่มประสิทธิภาพการแสดงผลของคุณ

ปรับปรุงเวลาในการโหลดครั้งแรกโดยข้ามการแสดงภาพเนื้อหานอกหน้าจอ

Una Kravets

Jeremy Wagner

Vladimir Levin

content-visibility ซึ่งเปิดตัวใน Chromium 85 ก็อาจเป็นหนึ่งใน CSS ใหม่ที่มีประสิทธิภาพมากที่สุด สำหรับปรับปรุงประสิทธิภาพการโหลดหน้าเว็บ content-visibility จะเปิดใช้ User Agent เพื่อข้ามการแสดงผล ขององค์ประกอบ ซึ่งรวมถึงการออกแบบและวาดภาพ จนกว่าจะจำเป็น เนื่องจากการแสดงผลจะถูกข้าม หากเนื้อหาส่วนใหญ่ เนื้อหาอยู่นอกหน้าจอ การใช้พร็อพเพอร์ตี้ content-visibility ทำให้ ผู้ใช้ในระยะแรกโหลดได้เร็วขึ้นมาก นอกจากนี้ยังช่วยให้โต้ตอบกับ เนื้อหาบนหน้าจอ เยี่ยมไปเลย

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

content-visibility อาศัยพื้นฐานภายในคอนเทนเนอร์ CSS ข้อกำหนด แม้ว่า content-visibility จะ รองรับใน Chromium 85 ในขณะนี้ (และถือว่ามูลค่า การสร้างต้นแบบ" สำหรับ Firefox) ข้อกำหนดคอนเทนเนอร์ ได้รับการรองรับในที่ทันสมัยที่สุด เบราว์เซอร์

การควบคุม CSS

กุญแจสำคัญและเป้าหมายโดยรวมของการควบคุม CSS คือการเปิดใช้การแสดงผล การปรับปรุงประสิทธิภาพของเนื้อหาเว็บโดยมอบการแยกแบบคาดเดาได้ของ แผนผังย่อย DOM จากส่วนที่เหลือของหน้า

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

CSS มีอยู่ 4 ประเภท การควบคุม แต่ละค่าที่เป็นไปได้สำหรับพร็อพเพอร์ตี้ CSS contain ซึ่งนำมารวมกันได้ ในรายการค่าที่คั่นด้วยเว้นวรรค

• size: การมีขนาดองค์ประกอบที่ช่วยให้ช่องขององค์ประกอบสามารถ โดยไม่จำเป็นต้องตรวจสอบองค์ประกอบที่สืบทอดมา ซึ่งหมายความว่าเราสามารถ อาจข้ามการจัดวางองค์ประกอบสืบทอดได้หากเราต้องการเพียงขนาดของ
• layout: การปิดกั้นเลย์เอาต์หมายความว่าองค์ประกอบสืบทอดจะไม่ส่งผลต่อ การจัดวางภายนอกของช่องอื่นๆ บนหน้าเว็บ ซึ่งอาจทำให้เราข้าม ของพื้นที่โฆษณาย่อย ถ้าเราต้องการทำคือการจัดวางช่องอื่นๆ
• style: การจำกัดสไตล์ช่วยให้มั่นใจว่าพร็อพเพอร์ตี้ที่ส่งผลต่อองค์ประกอบอื่นๆ นอกเหนือจากองค์ประกอบที่สืบทอดมาจะไม่หลุดออกจากองค์ประกอบ (เช่น ตัวนับ) ช่วงเวลานี้ ช่วยให้เราข้ามการคำนวณรูปแบบสำหรับองค์ประกอบสืบทอดได้ ถ้าเรา ต้องการคือการประมวลผลรูปแบบในองค์ประกอบอื่นๆ
• paint: การควบคุมสีช่วยดูแลให้องค์ประกอบสืบทอดของกล่องที่มี ไม่แสดงนอกขอบเขต ไม่มีข้อมูลใดล้นเอลิเมนต์อย่างชัดเจน และหากองค์ประกอบหนึ่งไม่ได้อยู่ในหน้าจอหรือมองไม่เห็น องค์ประกอบสืบทอดจะ และไม่สามารถมองเห็นได้ ซึ่งอาจทำให้เราข้ามการวาดภาพ องค์ประกอบสืบทอดหากองค์ประกอบอยู่นอกหน้าจอ

การข้ามงานแสดงผลด้วย content-visibility

และอาจเป็นการยากที่จะทราบว่าจะใช้ค่าควบคุมค่าใด เนื่องจากเบราว์เซอร์ การเพิ่มประสิทธิภาพจะเริ่มต้นได้เมื่อมีการระบุชุดที่เหมาะสมเท่านั้น คุณสามารถ ลองพิจารณาค่าต่างๆ เพื่อดูว่าสิ่งใดที่ได้ผล ดีที่สุด หรือคุณ สามารถใช้คุณสมบัติ CSS อื่นที่เรียกว่า content-visibility เพื่อปรับใช้ อัตโนมัติ content-visibility รับประกันว่าคุณจะได้รับ ประสิทธิภาพที่เพิ่มขึ้นซึ่งเบราว์เซอร์สามารถมอบให้ได้โดยใช้ความพยายามเพียงเล็กน้อยจาก

พร็อพเพอร์ตี้การแสดงเนื้อหา ยอมรับหลายค่า แต่ auto คือค่า ที่ช่วยให้ประสิทธิภาพดีขึ้นในทันที องค์ประกอบที่มี content-visibility: auto จะได้รับการควบคุม layout, style และ paint หากองค์ประกอบอยู่นอกหน้าจอ (และไม่เกี่ยวข้องกับผู้ใช้ องค์ประกอบที่เกี่ยวข้องคือองค์ประกอบที่มีโฟกัสหรือการเลือกในซับต้นไม้) องค์ประกอบดังกล่าวก็จะได้รับsizeการจำกัด (และหยุดการวาดและการทดสอบการทํางานของเนื้อหา)

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

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

หมายเหตุเกี่ยวกับการช่วยเหลือพิเศษ

ฟีเจอร์หนึ่งของ content-visibility: auto คือเนื้อหานอกหน้าจอจะยังคงอยู่ในโมเดลออบเจ็กต์เอกสาร ดังนั้นจึงเป็นแผนผังการช่วยเหลือพิเศษ (ต่างจาก visibility: hidden) ซึ่งหมายความว่าเนื้อหาจะสามารถค้นหาในหน้าเว็บและไปยังส่วนอื่นๆ ได้โดยไม่ต้องรอให้โหลดหรือลดประสิทธิภาพการแสดงผล

อย่างไรก็ตาม องค์ประกอบจุดสังเกตที่มีฟีเจอร์สไตล์ เช่น display: none หรือ visibility: hidden จะปรากฏในต้นไม้การช่วยเหลือพิเศษด้วยเมื่ออยู่นอกหน้าจอ เนื่องจากเบราว์เซอร์จะไม่แสดงผลสไตล์เหล่านี้จนกว่าองค์ประกอบจะเข้าสู่วิวพอร์ต เพื่อป้องกันไม่ให้ข้อมูลเหล่านี้แสดงในแผนผังการช่วยเหลือพิเศษ ซึ่งอาจทำให้เกิดความยุ่งเหยิงได้ โปรดเพิ่ม aria-hidden="true"

เช่น บล็อกท่องเที่ยว

บล็อกท่องเที่ยวมักจะประกอบด้วยชุดเรื่องที่มีรูปภาพ 2-3 ภาพ ข้อความอธิบาย นี่คือสิ่งที่เกิดขึ้นในเบราว์เซอร์ทั่วไปเมื่อนำทางไปยัง บล็อกท่องเที่ยว:

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

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

คราวนี้ก็มาดูว่าจะเกิดอะไรขึ้นหากคุณใส่ content-visibility: auto ในแต่ละแท็ก แต่ละเรื่องในบล็อก ลูปทั่วไปจะเหมือนกัน: เบราว์เซอร์ ดาวน์โหลดและแสดงผลเนื้อหาบางส่วนของหน้าเว็บ แต่ความแตกต่างจะอยู่ที่ ปริมาณงานที่ทำในขั้นตอนที่ 2

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

ประสิทธิภาพการโหลดหน้าเว็บนี้จะเหมือนกับว่าหน้าเว็บเต็มหน้าจอ และกล่องเปล่าสำหรับเรื่องราวนอกจอแต่ละเรื่อง วิธีนี้ได้ผลมาก ดีขึ้น โดยคาดว่าจะลดลงอย่างน้อย 50% จากต้นทุนการแสดงผล กำลังโหลด ในตัวอย่างของเรา เราเห็นการเพิ่มจากเวลาแสดงผล 232 มิลลิวินาที เป็น ระยะเวลาการแสดงผล 30 มิลลิวินาที ซึ่งช่วยเพิ่มประสิทธิภาพได้ถึง 7 เท่า

คุณต้องทำอะไรเพื่อให้ได้รับสิทธิประโยชน์เหล่านี้ ก่อนอื่น เราจะแบ่งเนื้อหาออกเป็นส่วนๆ ดังนี้

จากนั้น เราจะใช้กฎสไตล์ต่อไปนี้กับส่วนต่างๆ

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

การระบุขนาดตามธรรมชาติขององค์ประกอบด้วย contain-intrinsic-size

เพื่อที่จะตระหนักถึงประโยชน์ที่เป็นไปได้ของ content-visibility เบราว์เซอร์ จำเป็นต้องใช้การควบคุมขนาดเพื่อให้การแสดงผลเนื้อหา ไม่ส่งผลกระทบต่อขนาดขององค์ประกอบแต่อย่างใด ซึ่งหมายความว่าองค์ประกอบ จะแสดงรูปแบบราวกับว่าพื้นที่นั้นว่างเปล่า หากองค์ประกอบไม่ได้ระบุความสูง ในเลย์เอาต์บล็อกปกติ ขนาดก็จะมีความสูง 0

ซึ่งวิธีนี้อาจไม่เหมาะสม เนื่องจากขนาดของแถบเลื่อนจะมีการเปลี่ยนแปลง ที่พึ่งพาแต่ละเรื่องราวที่มีความสูงที่ไม่เป็น 0

โชคดีที่ CSS มีพร็อพเพอร์ตี้อีกรายการหนึ่ง ซึ่งก็คือ contain-intrinsic-size ระบุขนาดตามธรรมชาติขององค์ประกอบได้อย่างมีประสิทธิภาพ หากองค์ประกอบนั้น ได้รับผลกระทบจากการควบคุมขนาด ในตัวอย่างของเรา เราจะตั้งค่าเป็น 1000px เป็น ความสูงและความกว้างของส่วนต่างๆ โดยประมาณ

ซึ่งหมายความว่าจะจัดวางราวกับว่ามีลูกเดียวที่มีขนาด "ภายใน" เพื่อให้มั่นใจว่า div ที่ไม่ได้ปรับขนาดยังคงใช้พื้นที่ contain-intrinsic-size จะทำหน้าที่เป็นขนาดตัวยึดตําแหน่งแทนเนื้อหาที่แสดงผล

ใน Chromium 98 ขึ้นไปจะมี auto ใหม่ คีย์เวิร์ดสำหรับ contain-intrinsic-size เมื่อระบุแล้ว เบราว์เซอร์จะจดจำ ขนาดที่แสดงผลล่าสุด (หากมี) และใช้ขนาดนั้นแทนตัวยึดตำแหน่งที่นักพัฒนาแอปมีให้ ขนาด 100 x 240 ตัวอย่างเช่น หากคุณระบุ contain-intrinsic-size: auto 300px องค์ประกอบจะเริ่มมีขนาดตามค่าเริ่มต้น 300px ในแต่ละมิติข้อมูล แต่เมื่อระบบแสดงผลเนื้อหาขององค์ประกอบแล้ว องค์ประกอบจะยังคงมีขนาดตามค่าเริ่มต้นที่แสดงผล ระบบจะจดจำการเปลี่ยนแปลงขนาดการแสดงผลในภายหลังด้วย ในทางปฏิบัติหมายความว่าหากคุณ เลื่อนองค์ประกอบที่ใช้ content-visibility: auto แล้วเลื่อนกลับ จะรักษาความกว้างและความสูงที่เหมาะสมไว้โดยอัตโนมัติ และไม่เปลี่ยนกลับคืน กับการปรับขนาดของตัวยึดตำแหน่ง ฟีเจอร์นี้มีประโยชน์อย่างยิ่ง สำหรับผู้เลื่อนดูได้ไม่รู้จบ ซึ่งจะช่วยปรับปรุงการประมาณขนาดโดยอัตโนมัติเมื่อเวลาผ่านไป สำรวจหน้าเว็บ

ซ่อนเนื้อหาด้วย content-visibility: hidden

จะทำอย่างไรหากคุณต้องการให้เนื้อหาไม่มีการแสดงผล ไม่ว่าเนื้อหานั้นจะเป็นหรือไม่ก็ตาม อยู่บนหน้าจอไปพร้อมกับใช้ประโยชน์จากสถานะการแสดงผลที่แคชไว้หรือไม่ ป้อนข้อมูลต่อไปนี้ content-visibility: hidden

พร็อพเพอร์ตี้ content-visibility: hidden มีประโยชน์ทั้งหมดของ เนื้อหาที่ไม่ได้แสดงผลและสถานะการแสดงผลที่แคชไว้เหมือนกับที่ content-visibility: auto ทำ ออกจากหน้าจอ แต่ต่างจาก auto ตรงที่จะไม่เริ่มทำงานโดยอัตโนมัติ แสดงผลบนหน้าจอ

ทำให้คุณควบคุมได้มากขึ้น ทำให้สามารถซ่อนเนื้อหาและ เลิกซ่อนส่วนขยายอย่างรวดเร็วในภายหลัง

ลองเปรียบเทียบกับวิธีทั่วไปอื่นๆ ในการซ่อนเนื้อหาขององค์ประกอบ

• display: none: ซ่อนองค์ประกอบและทำลายสถานะการแสดงผล ช่วงเวลานี้ หมายความว่าการเลิกซ่อนองค์ประกอบนั้นมีค่าใช้จ่ายสูงเท่ากับการแสดงผลองค์ประกอบใหม่ด้วย เนื้อหาเดียวกัน
• visibility: hidden: ซ่อนองค์ประกอบและเก็บสถานะการแสดงผลไว้ ช่วงเวลานี้ ไม่ได้ลบองค์ประกอบออกจากเอกสารอย่างแท้จริง เนื่องจาก (และต้นไม้ย่อย) ยังคงใช้พื้นที่ทางเรขาคณิตบนหน้าเว็บและยังสามารถคลิกได้ ทั้งนี้ อัปเดตสถานะการแสดงผลได้ทุกเมื่อที่ต้องการ แม้จะซ่อนอยู่

ในขณะที่ content-visibility: hidden จะซ่อนองค์ประกอบ รักษาสถานะการแสดงผลไว้ ดังนั้น ถ้ามีการเปลี่ยนแปลงใดๆ ที่ต้อง ซึ่งจะเกิดขึ้นก็ต่อเมื่อองค์ประกอบแสดงขึ้นอีกครั้ง (ได้แก่ นำพร็อพเพอร์ตี้ content-visibility: hidden รายการออกแล้ว)

กรณีการใช้งาน content-visibility: hidden ที่ยอดเยี่ยมบางส่วนคือกรณีที่ติดตั้งใช้งาน แถบเลื่อนเสมือนขั้นสูง และเลย์เอาต์การวัดผล และเหมาะสำหรับ แอปพลิเคชันหน้าเว็บเดียว (SPA) ข้อมูลพร็อพเพอร์ตี้แอปที่ไม่ได้ใช้งานสามารถปล่อยไว้ใน DOM ได้ด้วย ใช้ content-visibility: hidden เพื่อป้องกันการแสดงผล แต่ยังคงรักษาการแสดงผล สถานะแคช วิธีนี้ช่วยให้การแสดงผลมุมมองรวดเร็วเมื่อกลับมาทำงานอีกครั้ง

ผลต่อ Interaction to Next Paint (INP)

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

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

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

บทสรุป

content-visibility และข้อกำหนดคอนเทนเนอร์ CSS แสดงถึงประสิทธิภาพที่น่าสนใจบางอย่าง การเพิ่มพลังต่างๆ จะพร้อมใช้งานในไฟล์ CSS โดยตรง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ ที่พัก โปรดดูที่

• ข้อกำหนดคอนเทนเนอร์ CSS
• MDN Docs ใน CSS การเก็บไว้
• CSSWG Drafts