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
  • 124

แหล่งที่มา

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"

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

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

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

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

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

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

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

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

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