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 ingebedde 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.
Hoe je derden met een façade kunt uitstellen
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. De onderstaande lijst biedt onze aanbevelingen voor open-source gevels. Houd bij het kiezen van een gevel rekening met de balans tussen grootte en kenmerken. Je kunt ook een luie iframe-lader gebruiken, zoals vb/lazyframe .
Ingesloten YouTube-speler
Vimeo ingebedde speler
Livechat (Intercom, Drift, Help Scout, Facebook Messenger)
Je eigen gevel schrijven
U kunt ervoor kiezen om een geveloplossing op maat te bouwen die gebruik maakt van het hierboven 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 bovenstaande lijst wordt opgenomen, bekijk dan het indieningsproces .
Bronnen
Broncode voor Lazy load bronnen van derden met gevelaudit .