คำแนะนำจากข้อมูลสำหรับรูปภาพที่โหลดแบบ Lazy Loading โดยคำนึงถึง Core Web Vitals
การโหลดแบบ Lazy Loading เป็นเทคนิคที่เลื่อนเวลาการดาวน์โหลดทรัพยากรไปจนกว่าจะจำเป็น เพื่อประหยัดข้อมูลและลดการแย่งชิงเครือข่ายสำหรับเนื้อหาที่สำคัญ โดยได้กลายเป็นมาตรฐานเว็บในปี 2019 และปัจจุบันนี้ loading="lazy" สำหรับรูปภาพได้รับการรองรับในเบราว์เซอร์หลักๆ ส่วนใหญ่
คู่มือนี้จะสรุปวิธีวิเคราะห์ข้อมูลความโปร่งใสของเว็บและการทดสอบ A/B เฉพาะกิจที่เผยแพร่ต่อสาธารณะเพื่อทำความเข้าใจลักษณะการใช้งานและลักษณะประสิทธิภาพของการโหลดรูปภาพแบบ Lazy Loading ระดับเบราว์เซอร์ ผลการศึกษาระบุว่าการโหลดแบบ Lazy Loading จะเป็นเครื่องมือที่มีประสิทธิภาพอย่างมากในการลดจำนวนไบต์รูปภาพที่ไม่จำเป็น แต่การใช้งานมากเกินไปอาจส่งผลเสียต่อประสิทธิภาพ จากการวิเคราะห์นี้ การวิเคราะห์นี้แสดงให้เห็นว่าการโหลดรูปภาพอย่างตั้งใจมากขึ้นภายในวิวพอร์ตเริ่มต้นในขณะที่โหลดส่วนที่เหลือแบบ Lazy Loading นั้นเป็นสิ่งที่ดีที่สุดสำหรับเราทั้ง 2 อย่าง นั่นคือโหลดไบต์น้อยลงและช่วยปรับปรุง Core Web Vitals
การนำไปใช้
ข้อมูลล่าสุดใน HTTP Archive ระบุว่าเว็บไซต์ 29% มีการใช้การโหลดรูปภาพแบบ Lazy Loading และกำลังเพิ่มขึ้นอย่างรวดเร็ว
การค้นหาข้อมูลดิบในโปรเจ็กต์ HTTP Archive ช่วยให้เราเข้าใจได้ชัดเจนยิ่งขึ้นว่าเว็บไซต์ประเภทใดที่กระตุ้นให้เกิดการใช้งาน โดย 84% ของเว็บไซต์ที่ใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ใช้ WordPress อีก 2% ใช้ CMS อื่น และอีก 14% ไม่ได้ใช้ CMS ที่รู้จัก ผลลัพธ์เหล่านี้แสดงให้เห็นอย่างชัดเจนว่า WordPress เป็นผู้นำด้านการเรียกเก็บเงิน ในการใช้งานได้อย่างไร
นอกจากนี้ อัตราการนำไปใช้งานยังควรทราบอีกด้วย ปีที่แล้วในเดือนกรกฎาคม 2020 เว็บไซต์ WordPress ที่ใช้การโหลดแบบ Lazy Loading ประกอบด้วยเว็บไซต์หลายหมื่นเว็บไซต์ในคลังข้อมูลประมาณ 6 ล้านแห่ง (1% จากทั้งหมด) ตั้งแต่การใช้การโหลดแบบ Lazy Loading ใน WordPress เพียงอย่างเดียว ได้เติบโตขึ้นเป็นกว่า 1 ล้านเว็บไซต์ (14% จากทั้งหมด)
ประสิทธิภาพตามความสัมพันธ์
เจาะลึกยิ่งขึ้นเกี่ยวกับที่เก็บ HTTP Archive เปรียบเทียบได้ว่าหน้าที่มีและไม่มีการโหลดรูปภาพแบบ Lazy Loading ระดับเบราว์เซอร์จะทำงานได้ดีเพียงใดด้วยเมตริก Largest Contentful Paint (LCP) ข้อมูล LCP มาจากประสบการณ์ของผู้ใช้จริงจากรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) ซึ่งตรงข้ามกับการทดสอบสังเคราะห์ในห้องทดลอง แผนภูมิต่อไปนี้ใช้พล็อตแบบกล่องและเส้นแบ่งครึ่งเพื่อแสดงภาพการกระจายของ LCP เปอร์เซ็นไทล์ที่ 75 ของแต่ละหน้า: เส้นต่างๆ แสดงเปอร์เซ็นไทล์ที่ 10 และ 90 และกล่องเหล่านั้นแสดงสัดส่วนเปอร์เซ็นต์ที่ 25 และ 75
ค่ามัธยฐานของหน้าที่ไม่มีการโหลดแบบ Lazy Loading มี LCP เปอร์เซ็นไทล์ที่ 75 อยู่ที่ 2,922 มิลลิวินาที เมื่อเทียบกับหน้าค่ามัธยฐานที่มีการโหลดแบบ Lazy Loading 3,546 มิลลิวินาที โดยรวมแล้ว เว็บไซต์ที่ใช้การโหลดแบบ Lazy Loading มีแนวโน้มที่จะมีประสิทธิภาพ LCP ต่ำกว่า
คุณต้องชี้ให้เห็นว่าผลการค้นหาเหล่านี้เป็นแบบสหสัมพันธ์ และอาจไม่ได้ชี้ว่าการโหลดแบบ Lazy Loading เป็นสาเหตุของประสิทธิภาพที่ช้าลง ทางสันนิษฐานว่าเว็บไซต์ WordPress มีแนวโน้มที่จะทำงานช้าลงเล็กน้อยและเมื่อพิจารณาจำนวนกลุ่มประชากรตามรุ่นที่ใช้การโหลดแบบ Lazy Loading เท่าไร ก็อาจอธิบายความแตกต่างได้ เพื่อกำจัดความแปรปรวนดังกล่าว คุณสามารถจำกัดขอบเขตให้แคบลงโดยเจาะจงเฉพาะเว็บไซต์ WordPress
น่าเสียดายที่รูปแบบเดียวกันนี้ปรากฏขึ้นเมื่อเจาะลึกลงในหน้า WordPress หน้าเว็บที่ใช้การโหลดแบบ Lazy Loading มีแนวโน้มที่จะมีประสิทธิภาพ LCP ช้ากว่า ค่ามัธยฐานของหน้า WordPress ที่ไม่มีการโหลดแบบ Lazy Loading มี LCP เปอร์เซ็นไทล์ที่ 75 อยู่ที่ 3,495 มิลลิวินาที เมื่อเทียบกับหน้าค่ามัธยฐานที่มีการโหลดแบบ Lazy Loading 3,768 มิลลิวินาที
กรณีนี้ยังไม่ได้พิสูจน์ว่าการโหลดแบบ Lazy Loading จะทำให้หน้าเว็บโหลดช้าลง แต่การใช้งานหน้าเว็บกลับเดียวกับประสิทธิภาพที่ช้าลง โดยเราได้ตั้งการทดสอบ A/B ในห้องทดลองขึ้นเพื่อพยายามตอบคำถามเกี่ยวกับความสัมพันธ์ระหว่างเหตุและผล
ประสิทธิภาพโดยทั่วไป
เป้าหมายของการทดสอบ A/B คือการพิสูจน์หรือหักล้างสมมติฐานที่ว่าการโหลดรูปภาพแบบ Lazy Loading ในตัวที่ใช้การโหลดแบบ Lazy Loading ในตัวของ WordPress ส่งผลให้ประสิทธิภาพ LCP ช้าลงและไบต์รูปภาพน้อยลง ระเบียบวิธีที่ใช้คือการทดสอบเว็บไซต์ WordPress เวอร์ชันเดโมที่มีธีม twentytwentyone ทั้งประเภทที่เก็บถาวรและหน้าเดียวได้รับการทดสอบแล้ว ซึ่งเหมือนกับหน้าแรกและหน้าบทความบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่จำลองโดยใช้ WebPageTest โดยได้ทดสอบชุดค่าผสมของหน้าเว็บแต่ละชุดทั้งที่เปิดใช้และไม่ได้เปิดใช้การโหลดแบบ Lazy Loading และทำการทดสอบแต่ละครั้ง 9 ครั้งเพื่อหาค่ามัธยฐาน LCP และจำนวนไบต์ของรูปภาพ
| ซีรีส์ | ค่าเริ่มต้น | ปิดอยู่ | ความแตกต่างจากค่าเริ่มต้น |
|---|---|---|---|
| twentytwentyone-archive-desktop | 2,029 คน | 1,759 | ลดลง 13% |
| Tentytwentyone-archive-mobile | 1,657 คน | 1,403 รายการ | ลดลง 15% |
| Tentytwentyone-single-desktop | 1,655 ตัว | 1,726 | 4% |
| 2018-2019-2021 | 1,352 คน | 1,384 | 2% |
ผลลัพธ์เหล่านี้จะเปรียบเทียบค่ามัธยฐาน LCP ในหน่วยมิลลิวินาทีสำหรับการทดสอบในที่เก็บถาวรและหน้าเดี่ยวสำหรับเดสก์ท็อปและอุปกรณ์เคลื่อนที่ เมื่อปิดการโหลดแบบ Lazy Loading ในหน้าที่เก็บถาวร LCP ก็จะเพิ่มขึ้นอย่างมาก แต่ในหน้าเว็บหน้าเดียว ก็ให้ความแตกต่างน้อยกว่า
ดูเหมือนว่าการปิดใช้การโหลดแบบ Lazy Loading จะทำให้หน้าเดี่ยวเร็วขึ้นเล็กน้อย อย่างไรก็ตาม ความแตกต่างของ LCP นั้นมีค่าเบี่ยงเบนมาตรฐานน้อยกว่า 1 ค่าสำหรับทั้งการทดสอบบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ ดังนั้นจึงอาจเป็นผลมาจากความแปรปรวนและเมื่อพิจารณาการเปลี่ยนแปลงโดยรวมอย่างเป็นกลาง เมื่อเปรียบเทียบกันแล้ว ความแตกต่างของหน้าที่เก็บถาวรจะมีค่าเบี่ยงเบนมาตรฐานเกือบ 2-3 ค่า
| ซีรีส์ | ค่าเริ่มต้น | ปิดอยู่ | ความแตกต่างจากค่าเริ่มต้น |
|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 103% |
| Tentytwentyone-archive-mobile | 172 | 378 | 120% |
| Tentytwentyone-single-desktop | 301 | 850 | 183% |
| 2018-2019-2021 | 114 | 378 | 233% |
ผลลัพธ์เหล่านี้จะเปรียบเทียบค่ามัธยฐานของไบต์รูปภาพ (เป็น KB) สำหรับการทดสอบแต่ละครั้ง ตามที่คาดไว้ การโหลดแบบ Lazy Loading จะส่งผลดีอย่างชัดเจนต่อการลดจำนวนไบต์รูปภาพ หากผู้ใช้จริงเลื่อนดูทั้งหน้า รูปภาพทุกรูปจะโหลดเมื่อข้ามไปยังวิวพอร์ต แต่ผลลัพธ์เหล่านี้จะแสดงประสิทธิภาพที่ดีขึ้นในการโหลดหน้าเว็บเริ่มต้น
ในการสรุปผลการทดสอบ A/B เทคนิคการโหลดแบบ Lazy Loading ที่ WordPress ใช้ช่วยลดไบต์ของรูปภาพได้ชัดเจนหากมี LCP ที่ล่าช้า
ทดสอบการแก้ไข
สิ่งสำคัญที่สุดของการติดตั้งใช้งานการโหลดแบบ Lazy Loading ปัจจุบันของ WordPress คือการโหลดรูปภาพภายในวิวพอร์ต (ครึ่งหน้าบน) บล็อกโพสต์ CMS ได้ยอมรับว่านี่เป็นรูปแบบที่ควรหลีกเลี่ยง แต่ข้อมูลการทดลองในเวลานั้นบ่งชี้ว่าผลที่มีต่อ LCP นั้นเกิดขึ้นน้อยมากและมีความคุ้มค่าที่จะลดความซับซ้อนในการใช้งานใน WordPress Core
ด้วยข้อมูลใหม่นี้ เราได้สร้างการแก้ไขเชิงทดลองที่หลีกเลี่ยงการโหลดรูปภาพที่อยู่ครึ่งหน้าบน และการทดสอบการแก้ไขนั้นได้รับการทดสอบภายใต้เงื่อนไขเดียวกันกับการทดสอบ A/B ครั้งแรก
| ซีรีส์ | ค่าเริ่มต้น | ปิดอยู่ | fix | ความแตกต่างจากค่าเริ่มต้น | ความแตกต่างจากการปิดใช้ |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 2,029 คน | 1,759 | 1,749 | ลดลง 14% | ลดลง 1% |
| Tentytwentyone-archive-mobile | 1,657 คน | 1,403 รายการ | 1,352 คน | ลดลง 18% | ลดลง 4% |
| Tentytwentyone-single-desktop | 1,655 ตัว | 1,726 | 1,676 คน | 1% | ลดลง 3% |
| 2018-2019-2021 | 1,352 คน | 1,384 | 1,342 คน | ลดลง 1% | ลดลง 3% |
ผลลัพธ์เหล่านี้มีแนวโน้มมากขึ้น การโหลดแบบ Lazy Loading เฉพาะรูปภาพครึ่งหน้าล่างจะทําให้การถดถอย LCP กลับมาสมบูรณ์และอาจปรับปรุงได้เล็กน้อยเมื่อเทียบกับการปิดใช้การโหลดแบบ Lazy Loading ทั้งหมด แล้วการโหลดแบบ Lazy Loading จะเร็วกว่าการโหลดแบบ Lazy Loading ได้อย่างไร สาเหตุหนึ่งก็คือการไม่โหลดรูปภาพครึ่งหน้าล่าง จะทำให้เกิดการช่วงชิงเครือข่ายกับรูปภาพ LCP น้อยลง ส่งผลให้โหลดได้เร็วขึ้น
| ซีรีส์ | ค่าเริ่มต้น | ปิดอยู่ | fix | ความแตกต่างจากค่าเริ่มต้น | ความแตกต่างจากการปิดใช้ |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 577 | 0% | ลดลง 51% |
| Tentytwentyone-archive-mobile | 172 | 378 | 172 | 0% | ลดลง 54% |
| Tentytwentyone-single-desktop | 301 | 850 | 301 | 0% | ลดลง 65% |
| 2018-2019-2021 | 114 | 378 | 114 | 0% | ลดลง 70% |
ในแง่ของไบต์รูปภาพ การแก้ไขนี้จะไม่เปลี่ยนแปลงโดยสิ้นเชิงเมื่อเทียบกับลักษณะการทำงานเริ่มต้น ซึ่งยอดเยี่ยมมากเพราะนั่นเป็นจุดแข็งอย่างหนึ่งของวิธีการปัจจุบัน
การแก้ไขนี้มาพร้อมกับข้อควรระวังบางประการ WordPress กำหนดว่ารูปภาพใดบ้างที่จะโหลดแบบ Lazy Loading ในฝั่งเซิร์ฟเวอร์ ซึ่งหมายความว่า WordPress ไม่มีข้อมูลเกี่ยวกับขนาดวิวพอร์ตของผู้ใช้หรือบอกว่ารูปภาพโหลดขึ้นในตอนแรกหรือไม่ ดังนั้นการแก้ไขจึงใช้การเรียนรู้เกี่ยวกับตำแหน่งสัมพัทธ์ของรูปภาพในมาร์กอัปเพื่อคาดเดาว่ารูปภาพจะโหลดในวิวพอร์ตหรือไม่ กล่าวอย่างเจาะจงคือ หากรูปภาพเป็นรูปเด่นรูปแรกในหน้าเว็บหรือรูปภาพแรกในเนื้อหาหลัก ระบบจะถือว่ารูปอยู่ในครึ่งหน้าบนหรือใกล้เคียงกับรูป และจะไม่โหลดแบบ Lazy Loading
เงื่อนไขระดับหน้าเว็บ เช่น จำนวนคำในส่วนหัวหรือจำนวนข้อความย่อหน้าในช่วงต้นของเนื้อหาหลักอาจส่งผลต่อการที่รูปภาพอยู่ภายในวิวพอร์ต นอกจากนี้ ยังมีเงื่อนไขระดับผู้ใช้ที่อาจส่งผลต่อความแม่นยำของการเรียนรู้ โดยเฉพาะขนาดวิวพอร์ตและการใช้ลิงก์ตำแหน่งเฉพาะที่เปลี่ยนแปลงตำแหน่งการเลื่อนของหน้าเว็บ
ด้วยเหตุผลดังกล่าว คุณจึงต้องรับทราบว่าการแก้ไขได้รับการปรับเทียบมาเพื่อให้ได้ประสิทธิภาพที่ดีในกรณีทั่วไปเท่านั้น และอาจต้องปรับแต่งเพิ่มเติมเพื่อให้ผลลัพธ์เหล่านี้ใช้ได้กับทุกสถานการณ์ในชีวิตจริง
การใช้งาน (:#การติดตั้งใช้งาน)
ตอนนี้เราได้พบวิธีที่ดีขึ้นในการโหลดรูปภาพแบบ Lazy Loading แล้ว ทั้งการประหยัดรูปภาพทั้งหมดและประสิทธิภาพ LCP ที่เร็วขึ้น เว็บไซต์จะเริ่มใช้รูปนี้ได้อย่างไร การเปลี่ยนแปลงที่สำคัญที่สุดคือการส่งแพตช์ไปยัง WordPress Core เพื่อใช้การแก้ไขจากการทดสอบ นอกจากนี้ คำแนะนำในบล็อกโพสต์การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์สำหรับ CMS จะมีการปรับปรุงเพื่อชี้แจงถึงผลกระทบเชิงลบของการโหลดแบบ Lazy Loading ครึ่งหน้าบน และวิธีที่ CMS จะใช้การเรียนรู้เพื่อหลีกเลี่ยงปัญหานี้
เนื่องจากแนวทางปฏิบัติแนะนำเหล่านี้ใช้ได้กับนักพัฒนาเว็บทั้งหมด การปกป้องรูปแบบการโหลดแบบ Lazy Loading ในเครื่องมืออย่าง Lighthouse ก็ควรเป็นเรื่องที่คุ้มค่า โปรดดูคำขอฟีเจอร์ใน GitHub หากสนใจติดตามความคืบหน้าของการตรวจสอบดังกล่าว ในระหว่างนี้ สิ่งหนึ่งที่นักพัฒนาแอปทำได้เพื่อค้นหาอินสแตนซ์ขององค์ประกอบ LCP ที่โหลดแบบ Lazy Loading คือการเพิ่มการบันทึกโดยละเอียดลงในข้อมูลภาคสนาม
new PerformanceObserver((list) => {
const latestEntry = list.getEntries().at(-1);
if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
console.warn('Warning: LCP element was lazy loaded', latestEntry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
ข้อมูลโค้ด JavaScript ก่อนหน้าจะประเมินองค์ประกอบ LCP ล่าสุดและบันทึกคำเตือนหากเป็นการโหลดแบบ Lazy Loading
การทำเช่นนี้ยังไฮไลต์ข้อดีของเทคนิคการโหลดแบบ Lazy Loading และศักยภาพในการปรับปรุง API ในระดับแพลตฟอร์ม เช่น มีปัญหาที่ยังไม่ได้รับการแก้ไขใน Chromium เพื่อทดสอบกับการโหลดรูปภาพ 2-3 รูปแรกอย่างตั้งใจ คล้ายๆ กับการแก้ไข แม้จะมีแอตทริบิวต์ loading ก็ตาม
บทสรุป
หากเว็บไซต์ใช้การโหลดรูปภาพแบบ Lazy Loading ระดับเบราว์เซอร์ ให้ตรวจสอบวิธีใช้และทำการทดสอบ A/B เพื่อให้เข้าใจต้นทุนด้านประสิทธิภาพของเว็บไซต์ได้ดีขึ้น อาจได้ประโยชน์จากการโหลดรูปภาพครึ่งหน้าบนอย่างตั้งใจมากขึ้น หากคุณมีเว็บไซต์ WordPress ก็คาดว่าจะมีการอัปเดตแพตช์ในเวอร์ชัน WordPress Core เร็วๆ นี้ และหากคุณใช้ CMS อื่น โปรดตรวจสอบว่า CMS ทราบถึงปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้นตามที่อธิบายไว้ที่นี่
การลองใช้ API แพลตฟอร์มเว็บที่ค่อนข้างใหม่มาพร้อมกับทั้งความเสี่ยงและรางวัล เราจึงเรียกว่าฟีเจอร์สุดล้ำด้วยเหตุผลเดียว เราเริ่มเข้าใจความยุ่งยากของการโหลดรูปภาพแบบ Lazy Loading ระดับเบราว์เซอร์แล้ว เรายังได้เห็นข้อดีของการใช้งานเพื่อให้ได้ประสิทธิภาพที่ดีขึ้นด้วย
รูปภาพโดย Frankie Lopez ใน Unsplash