โหลดทรัพยากรของบุคคลที่สามแบบ Lazy Loading ด้วย Facade

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

การตรวจสอบนี้จะไฮไลต์การฝังของบุคคลที่สามซึ่งจะโหลดแบบ Lazy Loading เมื่อมีการโต้ตอบ ในกรณีดังกล่าว ระบบจะใช้ Facade แทนเนื้อหาของบุคคลที่สามจนกว่าผู้ใช้จะโต้ตอบกับเนื้อหา

ตัวอย่างการโหลดโปรแกรมเล่นแบบฝังของ YouTube ที่มีส่วนหน้า ส่วนหน้ามีน้ำหนัก 3 KB และเครื่องเล่นที่มีน้ำหนัก 540 KB จะได้รับการโหลดขึ้นเมื่อมีการโต้ตอบ
กำลังโหลดโปรแกรมเล่นแบบฝังของ YouTube ที่มีส่วนหน้า

Lighthouse ตรวจพบการฝังของบุคคลที่สามที่เลื่อนเวลาได้ได้อย่างไร

Lighthouse จะค้นหาผลิตภัณฑ์ของบุคคลที่สามที่อาจเลื่อนออกไปได้ เช่น วิดเจ็ตปุ่มโซเชียลหรือการฝังวิดีโอ (เช่น โปรแกรมเล่นแบบฝังของ YouTube)

ข้อมูลเกี่ยวกับผลิตภัณฑ์ที่ล่าช้าได้และส่วนหน้าที่มีอยู่มีการเก็บรักษาไว้ในเว็บของบุคคลที่สาม

การตรวจสอบจะไม่สำเร็จหากหน้าเว็บโหลดทรัพยากรที่เป็นของการฝังของบุคคลที่สามเหล่านี้

การตรวจสอบส่วนหน้าอาคารของบุคคลที่สามของ Lighthouse ที่ไฮไลต์โปรแกรมเล่นแบบฝังของ Vimeo และแชทสดของ Drift
การตรวจสอบส่วนหน้าของบุคคลที่สามด้วย Lighthouse

วิธีเลื่อนบุคคลที่สามด้วย Facade

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

  1. เมื่อโหลด: เพิ่ม Facade ในหน้าเว็บ

  2. เมื่อมีการวางเมาส์เหนือ: ส่วนหน้าจะเชื่อมต่อกับทรัพยากรของบุคคลที่สามล่วงหน้า

  3. เมื่อคลิก: ส่วนหน้าจะแทนที่ตัวเองด้วยผลิตภัณฑ์ของบุคคลที่สาม

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

โปรแกรมเล่นแบบฝังของ YouTube

โปรแกรมเล่นแบบฝังของ Vimeo

แชทสด (Intercom, Drift, Help Scout, Facebook Messenger)

การเขียนส่วนหน้าของคุณเอง

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

หากต้องการให้โซลูชันของคุณอยู่ในรายการด้านบน โปรดดูขั้นตอนการส่ง

แหล่งข้อมูล

ซอร์สโค้ดสำหรับการโหลดทรัพยากรของบุคคลที่สามแบบ Lazy Loading ด้วยการตรวจสอบ Facade