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