ผลด้านประสิทธิภาพของการโหลดแบบ 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 เป็นผู้นำด้านการเรียกเก็บเงิน ในการใช้งานได้อย่างไร

วันที่

นอกจากนี้ อัตราการนำไปใช้งานยังควรทราบอีกด้วย ปีที่แล้วในเดือนกรกฎาคม 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 และจำนวนไบต์ของรูปภาพ

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

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

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

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

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

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

ด้วยข้อมูลใหม่นี้ เราได้สร้างการแก้ไขเชิงทดลองที่หลีกเลี่ยงการโหลดรูปภาพที่อยู่ครึ่งหน้าบน และการทดสอบการแก้ไขนั้นได้รับการทดสอบภายใต้เงื่อนไขเดียวกันกับการทดสอบ 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 จะใช้การเรียนรู้เพื่อหลีกเลี่ยงปัญหานี้

เนื่องจากแนวทางปฏิบัติแนะนำเหล่านี้ใช้ได้กับนักพัฒนาเว็บทั้งหมด การปกป้องรูปแบบการโหลดแบบ 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