0Pricing
HTML Academy · บทเรียน

การโหลด iframe แบบขี้เกียจ

เลื่อนการโหลด iframe ที่อยู่นอกหน้าจอด้วย loading=lazy

การโหลด iframe แบบขี้เกียจ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

การโหลดแบบช้าคืออะไร

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

แอตทริบิวต์การโหลด

เพิ่ม loading="lazy" ให้ไอเฟรม: <iframe src="embed.html" loading="lazy"> เบราว์เซอร์จะกำหนดเวลาเริ่มโหลดตามหลักเกณฑ์ของตนเอง โดยทั่วไปคือก่อนที่ไอเฟรมจะเข้าสู่พื้นที่แสดงผลประมาณ 1,000–2,500 พิกเซล ไม่จำเป็นต้องใช้ JavaScript

ผลกระทบต่อประสิทธิภาพ

ไอเฟรมอาจโหลดทรัพยากรจำนวนมากได้ เช่น YouTube โหลด JavaScript ประมาณ 500 กิโลไบต์ การโหลดวิดีโอที่ฝังและอยู่ต่ำกว่าส่วนที่มองเห็นแบบช้าจะลดการโหลดหน้าเริ่มต้นลงได้เท่ากับปริมาณนี้โดยตรง และช่วยปรับปรุง LCP กับเวลาในการโต้ตอบสำหรับเนื้อหาที่อยู่ส่วนบนของหน้า

loading="eager"

loading="eager" จะโหลดไอเฟรมทันทีโดยไม่คำนึงถึงตำแหน่ง นี่คือพฤติกรรมเริ่มต้น การเพิ่ม eager อย่างชัดเจนมีประโยชน์ในบริบทที่ตั้งค่าเริ่มต้นเป็นการโหลดแบบช้า เช่น กรอบการทำงานที่เพิ่มการโหลดแบบช้าให้ทั่วทั้งโครงการ เมื่อไอเฟรมบางรายการต้องโหลดทันที

ทางเลือกด้วย IntersectionObserver

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

const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    iframe.src = iframe.dataset.src;
    observer.disconnect();
  }
});
observer.observe(iframe);

รูปแบบฉากบังหน้า

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

รูปแบบคลิกเพื่อโหลด

สำหรับเนื้อหาฝังจากสื่อสังคม เช่น ไทม์ไลน์ทวิตเตอร์หรือโพสต์อินสตาแกรม ซึ่งโหลด JavaScript จำนวนมาก ให้แสดงปุ่ม “โหลดความคิดเห็น” เมื่อคลิกจึงค่อยแทรกไอเฟรม ผู้ใช้ที่ไม่โต้ตอบจะไม่ต้องเสียต้นทุนการโหลดเลย นี่คือการปรับปรุงแบบก้าวหน้าสำหรับเนื้อหาสังคมที่ฝัง

การรองรับของเบราว์เซอร์

การใช้ loading="lazy" กับไอเฟรมรองรับในโครม 77 ขึ้นไปและไฟร์ฟอกซ์ 121 ขึ้นไป ซาฟารีไม่รองรับการโหลดแบบช้าสำหรับไอเฟรม ณ ปี 2024 หากต้องการโหลดแบบช้าที่ใช้ได้กับเบราว์เซอร์ต่าง ๆ ให้ใช้ IntersectionObserver เป็นทางเลือกสำรองที่เชื่อถือได้ ซึ่งทำงานได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด

การป้องกัน CLS

จัดสรรพื้นที่สำหรับไอเฟรมที่โหลดแบบช้าด้วยความกว้าง ความสูง และ CSS อัตราส่วนกว้างยาวที่ระบุชัดเจน เพื่อป้องกันการเลื่อนตำแหน่งเค้าโครงสะสม (CLS) เมื่อไอเฟรมโหลดและปรากฏให้เห็น พื้นที่นั้นถูกจัดสรรไว้แล้ว จึงไม่มีเนื้อหาโดยรอบเลื่อนเพื่อรองรับไอเฟรม

การติดตามการวิเคราะห์

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

การใช้การโหลดแบบช้าและแซนด์บ็อกร่วมกัน

ใช้การโหลดแบบช้าและแซนด์บ็อกร่วมกัน: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts"> แอตทริบิวต์ทั้งสองทำงานแยกกัน การโหลดแบบช้าควบคุมเวลา ส่วนแซนด์บ็อกซ์ควบคุมสิ่งที่ไอเฟรมทำได้ ใช้ทั้งสองแบบร่วมกันเพื่อการฝังเนื้อหาจากบุคคลที่สามที่มีประสิทธิภาพและปลอดภัย

ตรวจสอบความรู้

รูปแบบฟาซาดสำหรับการโหลดเฟรมแบบฝังล่าช้าคืออะไร

สรุป

การโหลดเฟรมแบบฝังล่าช้าด้วย loading="lazy" จะเลื่อนการโหลดทรัพยากรจนกว่าจะอยู่ใกล้พื้นที่แสดงผล ซึ่งช่วยลดเวลาโหลดหน้าเว็บเริ่มต้นได้อย่างมากสำหรับเนื้อหาฝังที่มีขนาดใหญ่ รูปแบบฟาซาดและการโหลดเมื่อคลิกช่วยต่อยอดแนวทางนี้ โดยจะโหลดเฟรมแบบฝังเมื่อผู้ใช้โต้ตอบเท่านั้น IntersectionObserver ช่วยควบคุมการโหลดล่าช้าที่ซับซ้อนให้ทำงานข้ามเบราว์เซอร์ได้ ควรสงวนพื้นที่ของเฟรมแบบฝังเพื่อป้องกัน CLS

คำถามที่พบบ่อย

บทเรียน “การโหลด iframe แบบขี้เกียจ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การโหลด iframe แบบขี้เกียจ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การโหลด iframe แบบขี้เกียจ”

เลื่อนการโหลด iframe ที่อยู่นอกหน้าจอด้วย loading=lazy คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การโหลด iframe แบบขี้เกียจ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. องค์ประกอบ iframe: src และ sandbox
  2. ความปลอดภัยของ iframe: การโจมตีแบบ Clickjacking และ X-Frame-Options
  3. องค์ประกอบ embed และ object
  4. การโหลด iframe แบบขี้เกียจ
← กลับไปที่ HTML Academy