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