Ressourcen von Drittanbietern werden häufig für die Auslieferung von Anzeigen oder Videos und die Einbindung in soziale Medien verwendet. Standardmäßig werden Drittanbieterressourcen sofort beim Laden der Seite geladen. Das kann das Laden der Seite jedoch unnötig verlangsamen. Wenn die Inhalte von Drittanbietern nicht kritisch sind, können diese Leistungskosten durch Lazy Loading reduziert werden.
Bei dieser Prüfung werden Einbettungen von Drittanbietern hervorgehoben, die bei einer Interaktion verzögert geladen werden können. In diesem Fall wird anstelle der Inhalte von Drittanbietern eine Fassade verwendet, bis der Nutzer mit ihnen interagiert.
So erkennt Lighthouse verzögerbare 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 Videoeinbettungen (z. B. eingebetteter YouTube-Player).
Die Daten zu zurückstellbaren Produkten und verfügbaren Fassaden werden im Drittanbieter-Web verwaltet.
Die Prüfung schlägt fehl, wenn auf der Seite Ressourcen geladen werden, die zu einer dieser eingebetteten Drittanbieter-Einbettungen gehören.
Drittanbieter mit einer Fassade zurückstellen
Anstatt eine Einbettung eines Drittanbieters direkt in den HTML-Code einzufügen, kannst du die Seite mit einem statischen Element laden, das dem tatsächlich eingebetteten Drittanbieter-Element ä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.
- Per Klick: Die Fassade ersetzt sich durch das Produkt des Drittanbieters.
Empfohlene Fassaden
Im Allgemeinen kann das Fassadenmuster bei Videoeinbettungen, Widgets für soziale Schaltflächen und Chat-Widgets verwendet werden. Berücksichtigen Sie bei der Auswahl der Fassade das richtige Gleichgewicht zwischen Größe und Ausstattung.
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 eine benutzerdefinierte Fassade erstellen, die das zuvor beschriebene Interaktionsmuster verwendet. Die Fassade sollte im Vergleich zum verzögerten Drittanbieterprodukt deutlich kleiner sein und nur so viel Code enthalten, dass das Erscheinungsbild des Produkts nachgebildet wird.
Wenn Sie möchten, dass Ihre Lösung in die Liste aufgenommen wird, lesen Sie den Einreichungsprozess.
Ressourcen
Quellcode für die Prüfung des Lazy Loadings von Drittanbieterressourcen mit Fassaden