Bronnen van derden worden vaak gebruikt voor het weergeven van advertenties of video's en voor integratie met sociale media. Standaard worden bronnen van derden geladen zodra de pagina laadt, maar dit kan het laden van de pagina onnodig vertragen. Als de content van derden niet kritisch is, kunnen deze prestatiekosten worden verlaagd door deze lazy loading te gebruiken.
Deze audit brengt externe embeds aan het licht die traag geladen kunnen worden bij interactie. In dat geval wordt een 'facade' gebruikt in plaats van de content van derden totdat de gebruiker ermee interageert.
Hoe Lighthouse uitstelbare insluitingen van derden detecteert
Lighthouse zoekt naar producten van derden die kunnen worden uitgesteld, zoals widgets met sociale knoppen of ingesloten video's (bijvoorbeeld de ingesloten YouTube-speler).
De gegevens over uitstelbare producten en beschikbare gevels worden bijgehouden in third-party-web .
De controle mislukt als de pagina bronnen laadt die bij een van deze externe insluitingen horen.
Derden afschermen met een façade
In plaats van een embed van een derde partij rechtstreeks aan je HTML toe te voegen, laad je de pagina met een statisch element dat lijkt op het daadwerkelijk ingebedde element van de derde partij. Het interactiepatroon zou er ongeveer zo uit moeten zien:
- Bij laden: voeg een gevel toe aan de pagina.
- Bij muisbeweging: De gevel maakt vooraf verbinding met externe bronnen.
- Bij klikken: De gevel vervangt zichzelf door het product van derden.
Aanbevolen gevels
Over het algemeen kunnen video-embeds, widgets met sociale knoppen en chatwidgets allemaal het 'facade'-patroon gebruiken. Houd bij het kiezen van een 'facade' rekening met de balans tussen grootte en functionaliteit.
De volgende lijst bevat onze aanbevelingen voor open-sourcefacades. Je kunt ook een luie iframe-loader gebruiken, zoals vb/lazyframe .
YouTube-ingesloten speler
Vimeo-ingesloten speler
Livechat (Intercom, Drift, Help Scout, Facebook Messenger)
Schrijf je eigen façade
U kunt ervoor kiezen om een aangepaste geveloplossing te bouwen die gebruikmaakt van het eerder beschreven interactiepatroon. De gevel moet aanzienlijk kleiner zijn in vergelijking met het uitgestelde product van derden en alleen voldoende code bevatten om het uiterlijk van het product na te bootsen.
Als u wilt dat uw oplossing in de lijst wordt opgenomen, raadpleeg dan het indieningsproces .
Bronnen
Broncode voor Lazy load van externe bronnen met facades audit .