Hulpbronnen van derden worden vaak gebruikt voor het weergeven van advertenties of video's en voor de integratie met sociale media. De standaardaanpak is om bronnen van derden te laden zodra de pagina wordt geladen, maar dit kan het laden van de pagina onnodig vertragen. Als de inhoud van derden niet kritisch is, kunnen deze prestatiekosten worden verlaagd door deze lui te laden .
Deze audit belicht insluitingen van derden die lui kunnen worden geladen tijdens interactie. In dat geval wordt een façade gebruikt in plaats van de inhoud van derden totdat de gebruiker ermee communiceert.
Hoe Lighthouse uitstelbare insluitingen van derden detecteert
Lighthouse zoekt naar producten van derden die kunnen worden uitgesteld, zoals widgets voor sociale knoppen of video-insluitingen (bijvoorbeeld de ingesloten YouTube-speler).
De gegevens over uitstelbare producten en beschikbare gevels worden bijgehouden in web van derden .
De audit mislukt als de pagina bronnen laadt die bij een van deze insluitingen van derden horen.
Stel derden uit met een façade
In plaats van een insluiting van derden rechtstreeks aan uw HTML toe te voegen, laadt u de pagina met een statisch element dat lijkt op de daadwerkelijke insluiting van derden. Het interactiepatroon zou er ongeveer zo uit moeten zien:
- Bij belasting: gevel toevoegen aan de pagina.
- Bij mouseover: de gevel maakt vooraf verbinding met bronnen van derden.
- Met een klik: de gevel vervangt zichzelf door het product van derden.
Aanbevolen gevels
Over het algemeen kunnen video-insluitingen, widgets voor sociale knoppen en chatwidgets allemaal het façadepatroon gebruiken. Houd bij het kiezen van een gevel rekening met de balans tussen grootte en kenmerken.
De volgende lijst biedt onze aanbevelingen voor open-source gevels. Je kunt ook een luie iframe-lader gebruiken, zoals vb/lazyframe .
Ingesloten YouTube-speler
Vimeo ingebedde speler
Livechat (Intercom, Drift, Help Scout, Facebook Messenger)
Schrijf je eigen gevel
U kunt ervoor kiezen om een geveloplossing op maat te bouwen die gebruik maakt van het eerder beschreven interactiepatroon. De gevel moet aanzienlijk kleiner zijn in vergelijking met het uitgestelde product van derden en slechts voldoende code bevatten om het uiterlijk van het product na te bootsen.
Als u wilt dat uw oplossing in de lijst wordt opgenomen, bekijk dan het indieningsproces .
Bronnen
Broncode voor Lazy load bronnen van derden met gevelaudit .