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