Drittanbieterressourcen werden häufig zum Anzeigen von Anzeigen oder Videos und zur Integration in soziale Medien verwendet. Standardmäßig werden Ressourcen von Drittanbietern geladen, sobald die Seite geladen wird. Das kann den Seitenaufbau unnötig verlangsamen. Wenn die Inhalte von Drittanbietern nicht kritisch sind, können die Leistungseinbußen durch Lazy Loading reduziert werden.
Bei dieser Prüfung werden Einbettungen von Drittanbietern hervorgehoben, die bei Interaktion verzögert geladen werden können. In diesem Fall wird anstelle der Drittanbieterinhalte eine Fassade verwendet, bis der Nutzer mit ihr interagiert.
So erkennt Lighthouse aufschiebbare Einbettungen von Drittanbietern
Lighthouse sucht nach Produkten von Drittanbietern, die verzögert werden können, z. B. Social-Button-Widgets oder Videoeinbettungen (z. B. eingebetteter YouTube-Player).
Die Daten zu aufschiebbaren Produkten und verfügbaren Fassaden werden in third-party-web verwaltet.
Die Prüfung schlägt fehl, wenn auf der Seite Ressourcen geladen werden, die zu einem dieser Drittanbieter-Einbettungen gehören.
Drittanbieter mit einer Fassade zurückstellen
Anstatt ein Drittanbieter-Embed direkt in Ihren HTML-Code einzufügen, laden Sie die Seite mit einem statischen Element, das dem tatsächlichen Drittanbieter-Embed ähnelt. Das Interaktionsmuster sollte in etwa so aussehen:
- Beim Laden: Fügen Sie der Seite eine Fassade hinzu.
- Beim Hovern mit der Maus: Die Fassade stellt eine Preconnect-Verbindung zu Ressourcen von Drittanbietern her.
- Beim Klicken: Die Fassade wird durch das Drittanbieterprodukt ersetzt.
Empfohlene Fassaden
Im Allgemeinen können Video-Einbettungen, Social-Button-Widgets und Chat-Widgets alle das Fassadenmuster verwenden. Berücksichtigen Sie bei der Auswahl einer Fassade das Gleichgewicht zwischen Größe und Funktionsumfang.
In der folgenden Liste finden Sie unsere Empfehlungen für Open-Source-Fassaden. Sie können auch einen Lazy-Iframe-Loader wie vb/lazyframe verwenden.
Eingebetteter YouTube-Player
Eingebetteter Vimeo-Player
Live chat (Intercom, Drift, Help Scout, Facebook Messenger)
Eigene Fassade schreiben
Sie können auch eine benutzerdefinierte Fassadenlösung erstellen, die das oben beschriebene Interaktionsmuster verwendet. Die Fassade sollte im Vergleich zum verzögert geladenen Drittanbieterprodukt deutlich kleiner sein und nur so viel Code enthalten, dass das Erscheinungsbild des Produkts nachgeahmt wird.
Wenn Sie möchten, dass Ihre Lösung in die Liste aufgenommen wird, finden Sie hier Informationen zum Einreichen von Lösungen.
Ressourcen
Quellcode für den Lazy Loading von Ressourcen von Drittanbietern mit Fassaden-Audit.