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

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

Jeremy Wagner
Una Kravets
Vladimir Levin
Vladimir Levin

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

วันที่ เดโมที่มีรูปแสดงถึงผลลัพธ์เครือข่าย
ในการสาธิตบทความของเรา การใช้ content-visibility: auto กับพื้นที่เนื้อหาแบบแยกส่วนช่วยเพิ่มประสิทธิภาพการแสดงผล 7 เท่าเมื่อโหลดครั้งแรก อ่านต่อเพื่อดูข้อมูลเพิ่มเติม

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

การรองรับเบราว์เซอร์

  • 85
  • 85
  • 125
  • 18

แหล่งที่มา

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

การควบคุม CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วันที่ ภาพหน้าจอของบล็อกท่องเที่ยว
ตัวอย่างของบล็อกท่องเที่ยว ดูการสาธิตบน Codepen

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

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

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

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

วันที่ ภาพหน้าจอที่มีคำอธิบายประกอบซึ่งแบ่งเนื้อหาออกเป็นส่วนต่างๆ พร้อมคลาส CSS
ตัวอย่างการแบ่งเนื้อหาออกเป็นส่วนต่างๆ ที่ใช้คลาส story เพื่อรับ content-visibility: auto ดูการสาธิตบน Codepen

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

.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 เมื่อระบุแล้ว เบราว์เซอร์จะจดจำ ขนาดที่แสดงผลล่าสุด (หากมี) และใช้ขนาดนั้นแทนตัวยึดตำแหน่งที่นักพัฒนาแอปมีให้ ขนาด ตัวอย่างเช่น หากคุณระบุ 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 เพื่อป้องกันการแสดงผล แต่ยังคงรักษาการแสดงผล สถานะแคช ซึ่งทำให้มุมมองแสดงผลอย่างรวดเร็วเมื่อกลับมาใช้งานอีกครั้ง

ผลต่อการโต้ตอบกับ Next Paint (INP)

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

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

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

บทสรุป

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