ทรัพยากรของบุคคลที่สามมักใช้เพื่อแสดงโฆษณาหรือวิดีโอและผสานรวมกับโซเชียลมีเดีย วิธีการเริ่มต้นคือการโหลดทรัพยากรของบุคคลที่สามทันทีที่โหลดหน้าเว็บ แต่อาจทำให้การโหลดหน้าเว็บช้าลงโดยไม่จำเป็น หากเนื้อหาของบุคคลที่สามไม่สําคัญ คุณสามารถลดต้นทุนด้านประสิทธิภาพนี้ได้ด้วยการการโหลดแบบเลื่อน
การตรวจสอบนี้ไฮไลต์การฝังของบุคคลที่สามซึ่งโหลดแบบ Lazy Loading ในการโต้ตอบได้ ในกรณีนี้ ระบบจะใช้หน้าเว็บแทนเนื้อหาของบุคคลที่สามจนกว่าผู้ใช้จะโต้ตอบกับเนื้อหา
วิธีที่ Lighthouse ตรวจหาการฝังของบุคคลที่สามที่เลื่อนได้
Lighthouse จะมองหาผลิตภัณฑ์ของบุคคลที่สามที่เลื่อนได้ เช่น วิดเจ็ตปุ่มโซเชียลหรือการฝังวิดีโอ (เช่น โปรแกรมเล่นที่ฝังของ YouTube)
ข้อมูลเกี่ยวกับผลิตภัณฑ์ที่เลื่อนเวลาได้และส่วนหน้าที่พร้อมจำหน่ายจะได้รับการเก็บรักษาไว้ในเว็บของบุคคลที่สาม
การตรวจสอบจะดำเนินการไม่สำเร็จหากหน้าเว็บโหลดทรัพยากรของชิ้นงานของบุคคลที่สามรายการใดรายการหนึ่งเหล่านี้
เลื่อนบุคคลที่สามด้วย Facade
แทนที่จะเพิ่มการฝังของบุคคลที่สามลงใน HTML โดยตรง ให้โหลดหน้าเว็บที่มีองค์ประกอบแบบคงที่ซึ่งมีลักษณะคล้ายกับของบุคคลที่สามที่ฝังจริง รูปแบบการโต้ตอบควรมีลักษณะดังนี้
- ขณะโหลด: เพิ่ม Facade ลงในหน้าเว็บ
- เมื่อวางเมาส์เหนือ: Facade จะเชื่อมต่อกับทรัพยากรของบุคคลที่สามล่วงหน้า
- เมื่อคลิก: ส่วนหน้าอาคารจะแทนที่ตัวเองด้วยผลิตภัณฑ์ของบุคคลที่สาม
ส่วนหน้าที่แนะนำ
โดยทั่วไปแล้ว การฝังวิดีโอ วิดเจ็ตปุ่มโซเชียล และวิดเจ็ตแชทต่างก็ใช้รูปแบบของ Facade เมื่อเลือกหน้าอาคาร ให้พิจารณาถึงความสมดุลระหว่างขนาดและชุดฟีเจอร์
รายการต่อไปนี้เป็นรายการหน้าเว็บแบบโอเพนซอร์สที่เราแนะนำ คุณยังใช้ตัวโหลด iframe แบบ Lazy Loading เช่น vb/lazyframe ได้ด้วย
วิดีโอเพลเยอร์ของ YouTube ที่ฝังไว้
โปรแกรมเล่นแบบฝังของ Vimeo
แชทสด (Intercom, Drift, Help Scout, Facebook Messenger)
เขียน Facade ของคุณเอง
คุณอาจเลือกสร้างโซลูชัน Facade ที่กำหนดเองซึ่งใช้รูปแบบการโต้ตอบที่ระบุไว้ก่อนหน้านี้ ส่วนหน้าควรมีขนาดเล็กกว่ามากเมื่อเทียบกับผลิตภัณฑ์ของบุคคลที่สามที่ถูกหน่วงเวลา และมีเพียงโค้ดเพียงพอที่จะเลียนแบบรูปลักษณ์ของผลิตภัณฑ์
หากต้องการให้โซลูชันของคุณรวมอยู่ในรายการ โปรดดูขั้นตอนการส่ง
แหล่งข้อมูล
ซอร์สโค้ดของการโหลดทรัพยากรของบุคคลที่สามแบบ Lazy Loading ด้วยการตรวจสอบ Facade