การเรียนรู้ในการใช้แอตทริบิวต์การโหลดมาตรฐาน
เป้าหมายของโพสต์นี้คือเพื่อโน้มน้าวให้นักพัฒนาแพลตฟอร์ม CMS และผู้มีส่วนร่วม (นั่นคือผู้ที่พัฒนาแกนหลักของ CMS) เห็นว่าตอนนี้ถึงเวลาแล้วที่จะรองรับฟีเจอร์การโหลดแบบเลื่อนดูทีละภาพระดับเบราว์เซอร์ นอกจากนี้ เราจะแชร์คําแนะนําเกี่ยวกับวิธีมอบประสบการณ์การใช้งานที่มีคุณภาพสูงแก่ผู้ใช้และเปิดใช้การปรับแต่งโดยนักพัฒนาซอฟต์แวร์รายอื่นขณะใช้การโหลดแบบเลื่อนลง หลักเกณฑ์เหล่านี้มาจากประสบการณ์ของเราในการเพิ่มการรองรับให้กับ WordPress รวมถึงการช่วยให้ Joomla, Drupal และ TYPO3 ใช้ฟีเจอร์นี้ได้
ไม่ว่าคุณจะเป็นนักพัฒนาแพลตฟอร์ม CMS หรือผู้ใช้ CMS (นั่นคือผู้ที่สร้างเว็บไซต์ด้วย CMS) คุณก็ใช้โพสต์นี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับประโยชน์ของการโหลดแบบเลื่อนดูเมื่อพร้อมในระดับเบราว์เซอร์ใน CMS ได้ ดูคำแนะนำเกี่ยวกับวิธีกระตุ้นให้แพลตฟอร์ม CMS ใช้การโหลดแบบเลื่อนลงได้ที่ส่วนขั้นตอนถัดไป
ข้อมูลเบื้องต้น
ในช่วงปีที่ผ่านมา การโหลดรูปภาพและ iframe แบบ Lazy Loading โดยใช้แอตทริบิวต์ loading ได้กลายเป็นส่วนหนึ่งของมาตรฐาน HTML ของ WHATWG และเบราว์เซอร์ต่างๆ ได้นำไปใช้มากขึ้น
อย่างไรก็ตาม เหตุการณ์สำคัญเหล่านี้เป็นเพียงการวางรากฐานสำหรับเว็บที่เร็วขึ้นและประหยัดทรัพยากรมากขึ้น
ตอนนี้อยู่ในระบบนิเวศเว็บแบบกระจายเพื่อใช้ประโยชน์จากแอตทริบิวต์ loading
ระบบจัดการเนื้อหาขับเคลื่อนเว็บไซต์ประมาณ 60% ดังนั้นแพลตฟอร์มเหล่านี้จึงมีบทบาทสำคัญในการนําฟีเจอร์สมัยใหม่ของเบราว์เซอร์มาใช้กับเว็บ CMS แบบโอเพนซอร์สยอดนิยมบางรายการ เช่น WordPress, Joomla และ TYPO3 ได้เริ่มรองรับแอตทริบิวต์ loading ในรูปภาพแล้ว เรามาลองดูแนวทางและข้อสรุปที่เกี่ยวข้องในการใช้ฟีเจอร์นี้ในแพลตฟอร์ม CMS อื่นๆ กัน การโหลดสื่อแบบ Lazy Loading เป็นฟีเจอร์หลักด้านประสิทธิภาพของเว็บที่เว็บไซต์ควรได้รับประโยชน์ในวงกว้าง เราจึงขอแนะนําให้ใช้ฟีเจอร์นี้ในระดับแกนหลักของ CMS
เหตุผลที่ควรใช้การโหลดแบบ Lazy Loading เลย
มาตรฐาน
การใช้ฟีเจอร์เบราว์เซอร์ที่ไม่ใช่มาตรฐานใน CMS ช่วยให้การทดสอบแพร่หลายและสามารถแสดงพื้นที่ที่อาจต้องปรับปรุง อย่างไรก็ตาม ความเห็นทั่วไปใน CMS ต่างๆ คือตราบใดที่ฟีเจอร์เบราว์เซอร์ยังไม่เป็นมาตรฐาน ก็ควรติดตั้งใช้งานในรูปแบบส่วนขยายหรือปลั๊กอินสำหรับแพลตฟอร์มที่เกี่ยวข้อง ฟีเจอร์จะได้รับการพิจารณาให้นำไปใช้งานในแพลตฟอร์มหลักก็ต่อเมื่อได้รับการกำหนดมาตรฐานแล้วเท่านั้น
การสนับสนุนเบราว์เซอร์
การสนับสนุนฟีเจอร์ของเบราว์เซอร์ก็เป็นข้อกังวลที่คล้ายกัน ผู้ใช้ CMS ส่วนใหญ่ควรได้รับประโยชน์จากฟีเจอร์นี้ หากมีเบราว์เซอร์จำนวนมากที่ยังไม่รองรับฟีเจอร์นี้ ฟีเจอร์ดังกล่าวต้องไม่ส่งผลเสียต่อเบราว์เซอร์เหล่านั้นเป็นอย่างน้อย
เกณฑ์ระยะห่างจากวิวพอร์ต
ข้อกังวลที่พบได้ทั่วไปเกี่ยวกับการใช้งานการโหลดแบบเลื่อนจึงอยู่ที่หลักการที่ว่าวิธีนี้อาจทำให้รูปภาพไม่โหลดเมื่อปรากฏในวิวพอร์ตของผู้ใช้ เนื่องจากรอบการโหลดจะเริ่มขึ้นในขั้นตอนต่อมา ซึ่งต่างจากโซลูชันเดิมที่ใช้ JavaScript ตรงที่เบราว์เซอร์จะดำเนินการอย่างระมัดระวัง และยังสามารถปรับแต่งแนวทางให้เหมาะสมตามข้อมูลประสบการณ์ของผู้ใช้ในชีวิตจริงได้ เพื่อลดผลกระทบให้เหลือน้อยที่สุด ดังนั้นแพลตฟอร์ม CMS จึงควรใช้การโหลดแบบเลื่อนดูเมื่อพร้อมในระดับเบราว์เซอร์ได้
คําแนะนําเกี่ยวกับประสบการณ์ของผู้ใช้
ต้องใช้แอตทริบิวต์มิติข้อมูลในองค์ประกอบ
เราได้แนะนำให้เนื้อหาที่ฝัง เช่น รูปภาพหรือ iframe ควรมีแอตทริบิวต์ขนาด width และ height เสมอเพื่อหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ เพื่อให้เบราว์เซอร์สามารถอนุมานสัดส่วนภาพขององค์ประกอบเหล่านั้นก่อนที่จะโหลดจริง คําแนะนํานี้มีความเกี่ยวข้องไม่ว่าองค์ประกอบจะโหลดแบบเลื่อนเวลาไว้หรือไม่ก็ตาม อย่างไรก็ตาม เนื่องจากรูปภาพมีโอกาสที่จะไม่โหลดจนเต็ม 0.1% มากกว่าเมื่ออยู่ในวิวพอร์ต จึงเหมาะที่จะใช้การโหลดแบบเลื่อนลงมากกว่าเล็กน้อย
CMS ควรระบุแอตทริบิวต์ขนาดในรูปภาพและ iframe ทั้งหมด หากไม่สามารถระบุแอตทริบิวต์เหล่านี้สำหรับองค์ประกอบดังกล่าวทุกรายการได้ เราขอแนะนำให้ข้ามการโหลดรูปภาพแบบ Lazy Loading ที่ไม่ได้ระบุแอตทริบิวต์ทั้ง 2 รายการนี้
หลีกเลี่ยงการโหลดแบบ Lazy Loading องค์ประกอบที่อยู่เหนือส่วนที่มีการแบ่งหน้า
ขณะนี้เราขอแนะนำให้ CMS เพิ่มเฉพาะแอตทริบิวต์ loading="lazy" ให้กับรูปภาพและ iframe ที่วางไว้ใต้ส่วนเนื้อหา เพื่อหลีกเลี่ยงความล่าช้าในเมตริก Largest Contentful Paint ซึ่งในบางกรณีอาจส่งผลอย่างมากตามที่ค้นพบเมื่อเดือนกรกฎาคม 2021 อย่างไรก็ตาม การประเมินตําแหน่งขององค์ประกอบสัมพันธ์กับวิวพอร์ตก่อนกระบวนการแสดงผลนั้นมีความซับซ้อน ซึ่งกรณีนี้จะเกิดขึ้นโดยเฉพาะเมื่อ CMS ใช้วิธีการอัตโนมัติในการเพิ่มแอตทริบิวต์ loading แต่แม้ว่าจะดำเนินการด้วยตนเอง คุณก็จะต้องพิจารณาปัจจัยหลายอย่าง เช่น ขนาดและสัดส่วนภาพวิวพอร์ตที่แตกต่างกัน อย่างไรก็ตาม เราขอแนะนําอย่างยิ่งว่าอย่าใช้การโหลดแบบเลื่อนช้ากับรูปภาพหลักและรูปภาพหรือ iframe อื่นๆ ที่มีแนวโน้มจะปรากฏเหนือส่วนที่มีการแบ่งหน้า
หลีกเลี่ยงการแสดงผลสำรองของ JavaScript
แม้ว่าจะใช้ JavaScript เพื่อใช้การโหลดแบบเลื่อนเวลาในเบราว์เซอร์ที่ยังไม่รองรับแอตทริบิวต์ loading ได้ แต่กลไกดังกล่าวจะต้องนำแอตทริบิวต์ src ของรูปภาพหรือ iframe ออกก่อนเสมอ ซึ่งทำให้เบราว์เซอร์ที่รองรับแอตทริบิวต์ดังกล่าวเกิดความล่าช้า นอกจากนี้ การนำโซลูชันที่ใช้ JavaScript ดังกล่าวไปใช้ในหน้าเว็บส่วนหน้าของ CMS ขนาดใหญ่จะเพิ่มพื้นที่ที่อาจเกิดปัญหา ซึ่งเป็นหนึ่งในสาเหตุที่ CMS หลักๆ ไม่ได้ใช้การโหลดแบบเลื่อนลงเมื่อพร้อมในโค้ดหลักก่อนที่จะมีฟีเจอร์เบราว์เซอร์มาตรฐาน
คําแนะนําทางเทคนิค
เปิดใช้การโหลดแบบ Lazy Loading โดยค่าเริ่มต้น
คําแนะนําโดยรวมสําหรับ CMS ที่ใช้การโหลดแบบเลื่อนดูเมื่อพร้อมระดับเบราว์เซอร์คือการเปิดใช้โดยค่าเริ่มต้น เช่น ควรเพิ่ม loading="lazy" ลงในรูปภาพและ iframe โดยควรใช้กับองค์ประกอบที่มีแอตทริบิวต์มิติข้อมูลเท่านั้น
การเปิดใช้ฟีเจอร์นี้โดยค่าเริ่มต้นจะประหยัดทรัพยากรเครือข่ายได้มากกว่าหากต้องเปิดใช้ด้วยตนเอง เช่น การเปิดใช้ตามรูปภาพ
คุณควรเพิ่ม loading="lazy" เฉพาะในองค์ประกอบที่มีแนวโน้มจะปรากฏใต้ส่วนเนื้อหา
แม้ว่าข้อกำหนดนี้อาจซับซ้อนในการใช้งานกับ CMS เนื่องจากขาดการรับรู้ฝั่งไคลเอ็นต์และขนาดวิวพอร์ตที่หลากหลาย แต่เราขอแนะนำให้อย่างน้อยใช้วิธีการหาค่าประมาณแบบใกล้เคียงเพื่อละเว้นองค์ประกอบ เช่น รูปภาพหลักที่น่าจะปรากฏเหนือการแบ่งหน้าไม่ให้ใช้การโหลดแบบ Lazy Load
อนุญาตให้แก้ไขทีละองค์ประกอบ
แม้ว่าคุณควรเพิ่ม loading="lazy" ลงในรูปภาพและ iframe โดยค่าเริ่มต้น แต่การอนุญาตให้ละเว้นแอตทริบิวต์ในรูปภาพบางรูปก็เป็นสิ่งที่สําคัญ เช่น เพื่อเพิ่มประสิทธิภาพสําหรับ LCP หากกลุ่มเป้าหมายของ CMS ถือว่าเชี่ยวชาญด้านเทคโนโลยีมากกว่าค่าเฉลี่ย การควบคุม UI ที่แสดงสำหรับรูปภาพและ iframe แต่ละรายการอาจช่วยให้เลือกไม่ใช้การโหลดแบบเลื่อนเวลาสำหรับองค์ประกอบนั้นได้
หรืออาจเปิดเผย API แก่นักพัฒนาแอปบุคคลที่สามเพื่อให้ทําการเปลี่ยนแปลงที่คล้ายกันผ่านโค้ดได้
ตัวอย่างเช่น WordPress อนุญาตให้ข้ามแอตทริบิวต์ loading สำหรับแท็ก HTML หรือบริบททั้งหมด หรือสำหรับองค์ประกอบ HTML ที่เฉพาะเจาะจงในเนื้อหา
ปรับเนื้อหาที่มีอยู่
ในระดับสูง การเพิ่มแอตทริบิวต์ loading ลงในองค์ประกอบ HTML ใน CMS มี 2 วิธีดังนี้
- เพิ่มแอตทริบิวต์จากภายในเครื่องมือแก้ไขเนื้อหาในแบ็กเอนด์ โดยบันทึกแอตทริบิวต์ไว้ในฐานข้อมูลอย่างถาวร
- เพิ่มแอตทริบิวต์ขณะแสดงผลเนื้อหาจากฐานข้อมูลในหน้าเว็บ
เราขอแนะนำให้ CMS เลือกเพิ่มแอตทริบิวต์ขณะแสดงผล เพื่อนำประโยชน์ของการโหลดแบบเลื่อนเวลาไปไว้กับเนื้อหาที่มีอยู่ด้วย หากเพิ่มแอตทริบิวต์ได้ผ่านเครื่องมือแก้ไขเท่านั้น เฉพาะเนื้อหาใหม่หรือเนื้อหาที่แก้ไขล่าสุดเท่านั้นที่จะได้รับประโยชน์ ซึ่งจะลดผลกระทบของ CMS ในการประหยัดทรัพยากรเครือข่ายได้อย่างมาก นอกจากนี้ การเพิ่มแอตทริบิวต์ขณะดำเนินการยังช่วยให้แก้ไขได้ง่ายในอนาคต หากมีการขยายความสามารถของ Lazy Loading ที่ระดับเบราว์เซอร์
การเพิ่มแอตทริบิวต์ขณะดำเนินการควรรองรับแอตทริบิวต์ loading ที่อาจมีอยู่ในองค์ประกอบ และปล่อยให้แอตทริบิวต์ดังกล่าวมีความสำคัญเหนือกว่า วิธีนี้ช่วยให้ CMS หรือส่วนขยายของ CMS สามารถใช้แนวทางที่ขับเคลื่อนโดยผู้แก้ไขได้โดยไม่ทำให้เกิดข้อขัดแย้งกับแอตทริบิวต์ที่ซ้ำกัน
เพิ่มประสิทธิภาพฝั่งเซิร์ฟเวอร์
เมื่อเพิ่มแอตทริบิวต์ loading ลงในเนื้อหาขณะที่เผยแพร่โดยใช้ (เช่น) มิดเดิลแวร์ฝั่งเซิร์ฟเวอร์ คุณจะต้องคำนึงถึงความเร็วด้วย คุณอาจเพิ่มแอตทริบิวต์ผ่าน DOM Traversal หรือนิพจน์ทั่วไปก็ได้ ทั้งนี้ขึ้นอยู่กับ CMS ที่ใช้ โดยเราขอแนะนําให้ใช้นิพจน์ทั่วไปเพื่อประสิทธิภาพที่ดียิ่งขึ้น
คุณควรใช้นิพจน์ทั่วไปให้น้อยที่สุด เช่น นิพจน์ทั่วไปรายการเดียวที่รวบรวมแท็ก img และ iframe ทั้งหมดในเนื้อหา รวมถึงแอตทริบิวต์ของแท็ก แล้วเพิ่มแอตทริบิวต์ loading ลงในสตริงแท็กแต่ละรายการตามความเหมาะสม ตัวอย่างเช่น WordPress ไปถึงขั้นมีนิพจน์ทั่วไปทั่วไปรายการเดียวเพื่อดำเนินการต่างๆ กับองค์ประกอบบางอย่างในทันที ซึ่งการเพิ่ม loading="lazy" เป็นเพียงการดำเนินการหนึ่งๆ โดยใช้นิพจน์ทั่วไปรายการเดียวเพื่ออำนวยความสะดวกให้กับฟีเจอร์หลายรายการ นอกจากนี้ การเพิ่มประสิทธิภาพรูปแบบนี้ยังเป็นเหตุผลอีกประการหนึ่งที่แนะนําให้ใช้การโหลดแบบเลื่อนในโค้ดหลักของ CMS แทนส่วนขยาย เนื่องจากช่วยให้เพิ่มประสิทธิภาพฝั่งเซิร์ฟเวอร์ได้ดียิ่งขึ้น
ขั้นตอนถัดไป
ดูว่ามีคำขอฟีเจอร์ใน CMS หรือไม่ หากมี ให้เพิ่มการรองรับฟีเจอร์นั้น หากยังไม่มี ให้เปิดคำขอใหม่ ใช้การอ้างอิงถึงโพสต์นี้ตามที่จำเป็นเพื่อสนับสนุนข้อเสนอของคุณ
โปรดทวีตหาเรา (felixarntz@) หากมีคำถามหรือความคิดเห็น หรือหากต้องการให้ CMS ของคุณแสดงในหน้านี้หากมีการเพิ่มการรองรับการโหลดแบบเลื่อนเวลาในระดับเบราว์เซอร์ หากพบปัญหาอื่นๆ เรายินดีที่จะรับฟังข้อมูลเพิ่มเติมเพื่อหาวิธีแก้ปัญหา
หากคุณเป็นนักพัฒนาแพลตฟอร์ม CMS ให้ศึกษาวิธีที่ CMS อื่นๆ ใช้การโหลดแบบเลื่อนลง
คุณสามารถใช้สิ่งที่ได้เรียนรู้จากการวิจัยและคำแนะนำทางเทคนิคจากโพสต์นี้เพื่อเริ่มมีส่วนร่วมในโค้ดของ CMS เช่น ในรูปแบบของแพตช์หรือคำขอดึงข้อมูล
รูปภาพหลักโดย Colin Watts ใน Unsplash