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.
![Beispiel für das Laden des eingebetteten YouTube-Players mit einer Fassade Die Fassade wiegt 3 KB und der 540 KB große Player wird bei einer Interaktion geladen.](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/an-example-loading-youtu-d7a9b6d1365a5.jpg?authuser=6&hl=de)
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.
![Drittanbieter-Fassadenprüfung in Lighthouse, in der der eingebettete Vimeo-Player und der Livechat von Drift hervorgehoben werden.](https://developer.chrome.com/static/docs/lighthouse/performance/third-party-facades/image/lighthouse-third-party-fa-fd03a1923af91.jpg?authuser=6&hl=de)
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:
Beim Laden: Der Seite eine Fassade hinzufügen
Bei Mouseover: Die Fassade stellt eine Vorverbindung zu Ressourcen von Drittanbietern her.
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
Eingebetteter Vimeo-Player
Livechat (Gegensprechanlage, Drift, Help Scout, Facebook Messenger)
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