Lazy Loading von Drittanbieterressourcen mit Fassaden

Ressourcen von Drittanbietern werden oft verwendet, um Anzeigen oder Videos einzublenden und sie in soziale Medien einzubinden. Standardmäßig werden Drittanbieterressourcen geladen, sobald die Seite geladen wird. Dies kann den Seitenaufbau jedoch unnötig verlangsamen. Wenn Drittanbieterinhalte nicht kritisch sind, können diese Leistungskosten durch Lazy Loading reduziert werden.

Bei dieser Prüfung werden Einbettungen von Drittanbietern hervorgehoben, die bei Interaktionen verzögert geladen werden können. In diesem Fall wird eine Fassade anstelle der Inhalte von Drittanbietern verwendet, bis der Nutzer damit interagiert.

Wichtiger Begriff:Eine Fassade ist ein statisches Element, das dem eingebetteten Drittanbieterprodukt ähnelt, jedoch nicht funktionsfähig ist und den Seitenaufbau daher wesentlich weniger stark beansprucht.

Der eingebettete YouTube-Player mit einer Fassade wird geladen.

So erkennt Lighthouse zurückstellbare Einbettungen von Drittanbietern

Lighthouse sucht nach Drittanbieterprodukten, die verzögert werden können, z. B. Widgets für Schaltflächen für soziale Netzwerke oder eingebettete Videos (z. B. ein eingebetteter YouTube-Player).

Die Daten zu zurückstellbaren Produkten und verfügbaren Fassaden werden im Web von Drittanbietern verwaltet.

Die Prüfung schlägt fehl, wenn auf der Seite Ressourcen geladen werden, die zu diesen Einbettungen von Drittanbietern gehören.

Lighthouse-Prüfung der Drittanbieterfassade.

Drittanbieter mit einer Fassade zurückstellen

Statt eine Einbettung eines Drittanbieters direkt in Ihren HTML-Code einzufügen, laden Sie die Seite mit einem statischen Element, das dem eingebetteten Drittanbieterprodukt ähnelt. Das Interaktionsmuster sollte in etwa so aussehen:

1. Beim Laden: Der Seite eine Fassade hinzufügen

2. Bei Mouseover: Die Fassade stellt eine Vorverbindung zu Ressourcen von Drittanbietern her.

3. Beim Klicken: Die Fassade ersetzt sich durch das Drittanbieterprodukt.

Empfohlene Fassaden

Im Allgemeinen können Videoeinbettungen, Widgets für soziale Schaltflächen und Chat-Widgets alle das Fassadenmuster verwenden. Die folgende Liste enthält unsere Empfehlungen für Open-Source-Fassaden. Berücksichtigen Sie bei der Auswahl einer Fassade das ausgewogene Verhältnis zwischen Größe und Ausstattungsmerkmalen. Sie können auch einen Lazy iFrame Loader wie vb/lazyframe verwenden.

Eingebetteter YouTube-Player

• Paulirish/Lite-youtube-embed

• Justinribeiro/Lite-YouTube

• Daugilas/lazyYT

• ngx-lite-video

Eingebetteter Vimeo-Player

• Luwes/lite-vimeo-embed

• leicht deaktiviert/Lite-Vimeo

• ngx-lite-video

Livechat (Gegensprechanlage, Drift, Help Scout, Facebook Messenger)

• calibreapp/react-live-chat-loader (Blogpost)

Achtung:Beim verzögerten Laden von Drittanbietergeräten mit Fassaden gibt es einige Nachteile, da diese nicht den vollen Funktionsumfang wie die eigentlichen Einbettungen haben. Das Infofeld „Livechat Drift“ hat beispielsweise ein Badge, das die Anzahl der neuen Nachrichten angibt. Wenn das Livechat-Infofeld mit einer Fassade verzögert wird, erscheint es, wenn das eigentliche Chat-Widget geladen wird, nachdem der Browser requestIdleCallback ausgelöst hat. Bei eingebetteten Videos funktioniert die Autoplay-Funktion möglicherweise nicht immer, wenn sie verzögert geladen wird.

Eigene Fassade erstellen

Sie können eine benutzerdefinierte Fassadenlösung erstellen, die das oben beschriebene Interaktionsmuster verwendet. Die Fassade sollte im Vergleich zum zurückgestellten Drittanbieterprodukt deutlich kleiner sein und nur genügend Code enthalten, um das Aussehen des Produkts nachzuahmen.

Wenn Sie möchten, dass Ihre Lösung in die Liste oben aufgenommen wird, lesen Sie den Übermittlungsprozess.

Ressourcen

Quellcode für Audit von Lazy Loading von Drittanbieterressourcen mit Fassaden