ผลกระทบด้านประสิทธิภาพของการโหลดแบบ Lazy Loading มากเกินไป

คำแนะนำที่อิงตามข้อมูลสำหรับการโหลดรูปภาพแบบ Lazy Loading โดยคำนึงถึง Core Web Vitals

Felix Arntz

Rick Viscomi

การโหลดแบบ 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 เป็นผู้นำในการนำไปใช้

อัตราการใช้งานก็เป็นสิ่งที่ควรทราบเช่นกัน เมื่อ 1 ปีก่อนในเดือนกรกฎาคม 2020 เว็บไซต์ WordPress ที่ใช้การโหลดแบบ Lazy Loading มีจำนวนหลายหมื่นเว็บไซต์จากคลังข้อมูลประมาณ 6 ล้านเว็บไซต์ (1% ของทั้งหมด) การใช้การโหลดแบบ Lazy Loading ใน WordPress เพียงอย่างเดียวเพิ่มขึ้นเป็นกว่า 1 ล้านเว็บไซต์ (14% ของทั้งหมด)

ประสิทธิภาพที่สัมพันธ์กัน

เมื่อเจาะลึกในที่เก็บถาวร HTTP เราจะเปรียบเทียบประสิทธิภาพของหน้าเว็บที่มีและไม่มีการโหลดรูปภาพแบบ Lazy Loading ระดับเบราว์เซอร์ได้ด้วยเมตริก Largest Contentful Paint (LCP) ข้อมูล LCP มาจากประสบการณ์ของผู้ใช้จริงจากรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) ซึ่งต่างจากการทดสอบสังเคราะห์ในห้องปฏิบัติการ แผนภูมิต่อไปนี้ใช้แผนภาพกล่องเพื่อแสดงภาพการกระจายของ LCP เปอร์เซ็นไทล์ที่ 75 ของแต่ละหน้า โดยเส้นแสดงเปอร์เซ็นไทล์ที่ 10 และ 90 และกล่องแสดงเปอร์เซ็นไทล์ที่ 25 และ 75

หน้าเว็บค่ามัธยฐานที่ไม่มีการโหลดแบบ Lazy Loading มี LCP เปอร์เซ็นไทล์ที่ 75 อยู่ที่ 2,922 มิลลิวินาที เทียบกับ 3,546 มิลลิวินาทีสำหรับหน้าเว็บค่ามัธยฐานที่มีการโหลดแบบ Lazy Loading โดยรวมแล้ว เว็บไซต์ที่ใช้การโหลดแบบ Lazy Loading มักจะมีประสิทธิภาพ LCP ที่แย่กว่า

โปรดทราบว่าผลลัพธ์เหล่านี้เป็นผลลัพธ์ที่สัมพันธ์กัน และไม่ได้หมายความว่าการโหลดแบบ Lazy Loading เป็นสาเหตุที่ทำให้ประสิทธิภาพช้าลงเสมอไป ในทางสมมติฐาน หากเว็บไซต์ WordPress มีแนวโน้มที่จะช้ากว่าเล็กน้อย และเมื่อพิจารณาจากจำนวนเว็บไซต์ WordPress ที่อยู่ในกลุ่มการโหลดแบบ Lazy Loading ก็อาจอธิบายความแตกต่างนี้ได้ เพื่อขจัดความแปรปรวนดังกล่าว เราจึงจำกัดขอบเขตให้แคบลงโดยมุ่งเน้นที่เว็บไซต์ WordPress โดยเฉพาะ

แต่เมื่อเจาะลึกไปที่หน้า WordPress ก็พบรูปแบบเดียวกัน นั่นคือหน้าเว็บที่ใช้การโหลดแบบ Lazy Loading มักจะมีประสิทธิภาพ LCP ช้ากว่า หน้า WordPress ค่ามัธยฐานที่ไม่มีการโหลดแบบ Lazy Loading มี LCP เปอร์เซ็นไทล์ที่ 75 อยู่ที่ 3,495 มิลลิวินาที เทียบกับ 3,768 มิลลิวินาทีสำหรับหน้าค่ามัธยฐานที่มีการโหลดแบบ Lazy Loading

ซึ่งยังคงไม่ได้พิสูจน์ว่าการโหลดแบบ Lazy Loading ทำให้หน้าเว็บช้าลง แต่การใช้การโหลดแบบ Lazy Loading นั้นสอดคล้องกับประสิทธิภาพที่ช้าลง เราได้สร้างการทดสอบ A/B ในห้องปฏิบัติการเพื่อพยายามตอบคำถามเกี่ยวกับความเป็นเหตุเป็นผล

ประสิทธิภาพที่เกิดจากสาเหตุ

เป้าหมายของการทดสอบ A/B คือการพิสูจน์หรือหักล้างสมมติฐานที่ว่าการโหลดแบบ Lazy Loading ของรูปภาพในตัวตามที่ใช้ใน WordPress Core ส่งผลให้ประสิทธิภาพ LCP ช้าลงและไบต์รูปภาพน้อยลง วิธีการที่ใช้คือการทดสอบเว็บไซต์ WordPress สาธิตด้วยธีม twentytwentyone เราได้ทดสอบทั้งประเภทหน้าเดียวและหน้าเก็บถาวร ซึ่งคล้ายกับหน้าแรกและหน้าบทความในเดสก์ท็อปและอุปกรณ์เคลื่อนที่จำลองโดยใช้ WebPageTest เราได้ทดสอบหน้าเว็บแต่ละชุดทั้งแบบที่เปิดใช้และไม่ได้เปิดใช้การโหลดแบบ Lazy Loading และทำการทดสอบแต่ละครั้ง 9 ครั้งเพื่อให้ได้ค่า LCP มัธยฐานและจำนวนไบต์ของรูปภาพ

ผลลัพธ์เหล่านี้เปรียบเทียบ LCP ค่ามัธยฐานเป็นมิลลิวินาทีสำหรับการทดสอบในหน้าที่เก็บถาวรและหน้าเดียวสำหรับเดสก์ท็อปและอุปกรณ์เคลื่อนที่ เมื่อปิดใช้การโหลดแบบ Lazy Loading ในหน้าที่เก็บถาวร LCP จะดีขึ้นอย่างมาก แต่ในหน้าเว็บเดียว การเปลี่ยนแปลงนี้สร้างความแตกต่างได้น้อยกว่า

การปิดใช้การโหลดแบบ Lazy Loading ดูเหมือนจะทำให้หน้าเว็บหน้าเดียวโหลดเร็วขึ้นเล็กน้อย อย่างไรก็ตาม ความแตกต่างของ LCP น้อยกว่าค่าเบี่ยงเบนมาตรฐาน 1 ค่าสำหรับการทดสอบทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ ดังนั้นจึงอาจเกิดจากความแปรปรวนและถือว่าการเปลี่ยนแปลงเป็นกลางโดยรวม เมื่อเปรียบเทียบกันแล้ว ความแตกต่างของหน้าที่เก็บถาวรจะใกล้เคียงกับค่าเบี่ยงเบนมาตรฐาน 2-3 ค่า

ผลลัพธ์เหล่านี้เปรียบเทียบจำนวนไบต์ของรูปภาพมัธยฐาน (เป็น KB) สำหรับการทดสอบแต่ละครั้ง ตามที่คาดไว้ การโหลดแบบ Lazy Loading มีผลเชิงบวกที่ชัดเจนมากในการลดจำนวนไบต์ของรูปภาพ หากผู้ใช้จริงเลื่อนดูทั้งหน้า รูปภาพทั้งหมดจะโหลดอยู่ดีเมื่อเลื่อนเข้ามาในวิวพอร์ต แต่ผลลัพธ์เหล่านี้แสดงให้เห็นถึงประสิทธิภาพที่ดีขึ้นของการโหลดหน้าเว็บครั้งแรก

สรุปผลการทดสอบ A/B ได้ว่าเทคนิคการโหลดแบบ Lazy Loading ที่ WordPress ใช้ช่วยลดไบต์ของรูปภาพได้อย่างชัดเจน แต่ก็ทำให้ LCP ล่าช้า

การทดสอบการแก้ไข

แง่มุมที่สำคัญที่สุดของการใช้การโหลดแบบ Lazy Loading ในปัจจุบันของ WordPress สำหรับการทดสอบนี้คือการโหลดรูปภาพแบบ Lazy Loading ภายในวิวพอร์ต (ครึ่งหน้าบน) บล็อกโพสต์ของ CMS ยอมรับว่านี่เป็นรูปแบบที่ควรหลีกเลี่ยง แต่ข้อมูลการทดสอบในขณะนั้นระบุว่าผลกระทบต่อ LCP มีน้อยมากและคุ้มค่าที่จะลดความซับซ้อนของการติดตั้งใช้งานใน WordPress Core

เมื่อพิจารณาข้อมูลใหม่นี้ จึงมีการสร้างการแก้ไขเชิงทดลองที่หลีกเลี่ยงการโหลดแบบ Lazy Loading สำหรับรูปภาพที่อยู่ครึ่งหน้าบน และมีการทดสอบการแก้ไขภายใต้เงื่อนไขเดียวกันกับการทดสอบ A/B ครั้งแรก

ผลลัพธ์เหล่านี้มีแนวโน้มที่ดีกว่ามาก การโหลดแบบ Lazy Loading เฉพาะรูปภาพที่อยู่ครึ่งหน้าล่างจะส่งผลให้เกิดการถดถอยของ LCP อย่างสมบูรณ์ และอาจปรับปรุงเล็กน้อยเมื่อปิดใช้การโหลดแบบ Lazy Loading ทั้งหมด การโหลดแบบ Lazy Loading จะเร็วกว่าการไม่ใช้การโหลดแบบ Lazy Loading เลยได้อย่างไร คำอธิบายหนึ่งคือการไม่โหลดรูปภาพที่อยู่ครึ่งหน้าล่างจะทำให้เกิดการแย่งชิงเครือข่ายกับรูปภาพ LCP น้อยลง ซึ่งช่วยให้โหลดได้เร็วขึ้น

ในแง่ของไบต์รูปภาพ การแก้ไขนี้ไม่มีการเปลี่ยนแปลงใดๆ เลยเมื่อเทียบกับลักษณะการทำงานเริ่มต้น ซึ่งเป็นเรื่องดีเพราะเป็นจุดแข็งอย่างหนึ่งของแนวทางปัจจุบัน

การแก้ไขนี้มาพร้อมกับข้อควรระวังบางประการ WordPress จะกำหนดรูปภาพที่จะโหลดแบบ Lazy Loading ในฝั่งเซิร์ฟเวอร์ ซึ่งหมายความว่า WordPress จะไม่ทราบข้อมูลเกี่ยวกับขนาดวิวพอร์ตของผู้ใช้หรือรูปภาพที่โหลดในตอนแรกภายในวิวพอร์ต ดังนั้นการแก้ไขจึงใช้การเรียนรู้เกี่ยวกับตำแหน่งที่เกี่ยวข้องของรูปภาพในมาร์กอัปเพื่อคาดเดาว่ารูปภาพจะโหลดในวิวพอร์ตหรือไม่ กล่าวคือ หากรูปภาพเป็นรูปภาพแนะนำรูปแรกในหน้าเว็บหรือรูปภาพแรกในเนื้อหาหลัก ระบบจะถือว่ารูปภาพนั้นอยู่ครึ่งหน้าบนหรือใกล้กับครึ่งหน้าบน และจะไม่โหลดแบบ Lazy Loading

เงื่อนไขระดับหน้าเว็บ เช่น จำนวนคำในส่วนหัวหรือจำนวนข้อความในย่อหน้าช่วงต้นของเนื้อหาหลัก อาจส่งผลต่อการที่รูปภาพจะอยู่ภายในวิวพอร์ตหรือไม่ นอกจากนี้ยังมีเงื่อนไขระดับผู้ใช้ที่อาจส่งผลต่อความแม่นยำของฮิวริสติก โดยเฉพาะขนาดวิวพอร์ตและการใช้ลิงก์ตำแหน่งเฉพาะที่เปลี่ยนตำแหน่งการเลื่อนของหน้า

ด้วยเหตุผลดังกล่าว สิ่งสำคัญคือต้องรับทราบว่าการแก้ไขได้รับการปรับเทียบเพื่อให้มีประสิทธิภาพดีในกรณีทั่วไปเท่านั้น และอาจจำเป็นต้องปรับแต่งเพื่อให้ผลลัพธ์เหล่านี้ใช้ได้กับสถานการณ์จริงทั้งหมด

การใช้งาน

เมื่อพบวิธีที่ดีกว่าในการโหลดรูปภาพแบบ Lazy Loading แล้ว ซึ่งช่วยประหยัดรูปภาพทั้งหมดและเพิ่มประสิทธิภาพ LCP ให้เร็วขึ้น เว็บไซต์จะเริ่มใช้ได้อย่างไร การเปลี่ยนแปลงที่มีลำดับความสำคัญสูงสุดคือการส่งแพตช์ไปยัง WordPress Core เพื่อใช้การแก้ไขทดลอง นอกจากนี้ เราจะอัปเดตคำแนะนำในบล็อกโพสต์การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์สำหรับ CMS เพื่อชี้แจงผลเสียของการโหลดแบบ Lazy Loading ในครึ่งหน้าบนและวิธีที่ CMS สามารถใช้การเรียนรู้เพื่อหลีกเลี่ยงผลเสียดังกล่าว

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