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 ด้วยเช่นกัน (และจะหยุดการลงสีและการทดสอบ 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 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 ของคุณจะมีประสิทธิภาพการทำงานที่น่าตื่นเต้นมากขึ้น ดูข้อมูลเพิ่มเติมเกี่ยวกับ คุณสมบัติเหล่านี้ได้ที่