แหล่งข้อมูลของบุคคลที่สามมักใช้เพื่อแสดงโฆษณาหรือวิดีโอ และผสานรวมกับโซเชียลมีเดีย วิธีการเริ่มต้นคือการโหลดทรัพยากรของบุคคลที่สามทันทีที่โหลดหน้าเว็บ แต่อาจทำให้การโหลดหน้าเว็บช้าลงโดยไม่จำเป็น หากเนื้อหาของบุคคลที่สามไม่สำคัญ ต้นทุนด้านประสิทธิภาพนี้จะลดลงได้ด้วยการโหลดแบบ Lazy Loading
การตรวจสอบนี้จะไฮไลต์การฝังของบุคคลที่สามซึ่งจะโหลดแบบ Lazy Loading เมื่อมีการโต้ตอบ ในกรณีดังกล่าว ระบบจะใช้ Facade แทนเนื้อหาของบุคคลที่สามจนกว่าผู้ใช้จะโต้ตอบกับเนื้อหา
![ตัวอย่างการโหลดโปรแกรมเล่นแบบฝังของ YouTube ที่มีส่วนหน้า ส่วนหน้ามีน้ำหนัก 3 KB และเครื่องเล่นที่มีน้ำหนัก 540 KB จะได้รับการโหลดขึ้นเมื่อมีการโต้ตอบ](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/an-example-loading-youtu-d7a9b6d1365a5.jpg?authuser=6&hl=th)
Lighthouse ตรวจพบการฝังของบุคคลที่สามที่เลื่อนเวลาได้ได้อย่างไร
Lighthouse จะค้นหาผลิตภัณฑ์ของบุคคลที่สามที่อาจเลื่อนออกไปได้ เช่น วิดเจ็ตปุ่มโซเชียลหรือการฝังวิดีโอ (เช่น โปรแกรมเล่นแบบฝังของ YouTube)
ข้อมูลเกี่ยวกับผลิตภัณฑ์ที่ล่าช้าได้และส่วนหน้าที่มีอยู่มีการเก็บรักษาไว้ในเว็บของบุคคลที่สาม
การตรวจสอบจะไม่สำเร็จหากหน้าเว็บโหลดทรัพยากรที่เป็นของการฝังของบุคคลที่สามเหล่านี้
![การตรวจสอบส่วนหน้าอาคารของบุคคลที่สามของ Lighthouse ที่ไฮไลต์โปรแกรมเล่นแบบฝังของ Vimeo และแชทสดของ Drift](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/lighthouse-third-party-fa-fd03a1923af91.jpg?authuser=6&hl=th)
วิธีเลื่อนบุคคลที่สามด้วย Facade
แทนที่จะเพิ่มการฝังของบุคคลที่สามลงใน HTML โดยตรง ให้โหลดหน้าเว็บด้วยองค์ประกอบคงที่ซึ่งมีลักษณะคล้ายกับบุคคลที่สามที่ฝังไว้ รูปแบบการโต้ตอบควรมีลักษณะดังนี้
เมื่อโหลด: เพิ่ม Facade ในหน้าเว็บ
เมื่อมีการวางเมาส์เหนือ: ส่วนหน้าจะเชื่อมต่อกับทรัพยากรของบุคคลที่สามล่วงหน้า
เมื่อคลิก: ส่วนหน้าจะแทนที่ตัวเองด้วยผลิตภัณฑ์ของบุคคลที่สาม
ส่วนหน้าที่แนะนำ
โดยทั่วไปแล้ว การฝังวิดีโอ วิดเจ็ตปุ่มโซเชียล และวิดเจ็ตแชทต่างก็ใช้รูปแบบ Facade ได้ รายการด้านล่างให้คำแนะนำของเราเกี่ยวกับส่วนหน้าอาคารแบบโอเพนซอร์ส เมื่อเลือก Facade ให้คำนึงถึงความสมดุลระหว่างขนาดและชุดฟีเจอร์ นอกจากนี้ คุณยังสามารถใช้ตัวโหลด iframe แบบ Lazy Loading เช่น vb/lazyframe ได้อีกด้วย
โปรแกรมเล่นแบบฝังของ YouTube
โปรแกรมเล่นแบบฝังของ Vimeo
แชทสด (Intercom, Drift, Help Scout, Facebook Messenger)
การเขียนส่วนหน้าของคุณเอง
คุณอาจเลือกสร้างโซลูชันส่วนหน้าที่กำหนดเองซึ่งใช้รูปแบบการโต้ตอบที่ระบุไว้ข้างต้น ส่วนหน้าควรมีขนาดเล็กกว่ามากเมื่อเทียบกับผลิตภัณฑ์ของบุคคลที่สามที่เลื่อนเวลาออกไป และมีโค้ดเพียงพอที่จะเลียนแบบลักษณะของผลิตภัณฑ์เท่านั้น
หากต้องการให้โซลูชันของคุณอยู่ในรายการด้านบน โปรดดูขั้นตอนการส่ง
แหล่งข้อมูล
ซอร์สโค้ดสำหรับการโหลดทรัพยากรของบุคคลที่สามแบบ Lazy Loading ด้วยการตรวจสอบ Facade