Diese Seite wurde von der Cloud Translation API übersetzt.

Best Practices für die Verwendung von Einbettungen von Drittanbietern

Eine Übersicht über Techniken zum effizienten Laden beliebter Einbettungen von Drittanbietern.

Addy Osmani

Katie Hempenius

Leena Sohoni

Auf vielen Websites werden Einbettungen von Drittanbietern eingesetzt, um eine ansprechende Nutzererfahrung zu bieten. Dazu werden einige Bereiche einer Webseite an einen anderen Contentanbieter delegiert. Gängige Beispiele für eingebettete Inhalte von Drittanbietern sind Videoplayer, Feeds sozialer Medien, Karten und Anzeigen.

Inhalte von Drittanbietern können die Leistung einer Seite in vielerlei Hinsicht beeinflussen. Das kann das Rendering blockieren, mit anderen wichtigen Netzwerk- und Bandbreitenressourcen konkurrieren oder die Core Web Vitals-Messwerte beeinflussen. Einbettungen von Drittanbietern können beim Laden ebenfalls zu Layoutverschiebungen führen. In diesem Artikel werden Best Practices zur Leistungssteigerung beim Laden von Einbettungen von Drittanbietern, effiziente Ladetechniken und das Layout Shift Terminator-Tool erläutert, mit dem sich Layoutverschiebungen für beliebte Einbettungen reduzieren lassen.

Was ist eine Einbettung?

Einbettungen von Drittanbietern sind alle Inhalte auf Ihrer Website, die * nicht von Ihnen erstellt wurden * von Servern eines Drittanbieters bereitgestellt werden

Es werden mehrere nicht sichtbare Einbettungen angezeigt, die Lazy Loading enthalten könnten.

Einbettungen werden häufig in folgenden Bereichen verwendet: * Websites im Zusammenhang mit Sport, Nachrichten, Unterhaltung und Mode verwenden Videos, um Textinhalte zu ergänzen. * Organisationen mit aktiven Twitter- oder Social-Media-Konten betten Feeds von diesen Konten in ihre Webseiten ein, um mehr Menschen zu erreichen und mit ihnen zu interagieren. * Auf Seiten von Restaurants, Parks und Veranstaltungsorten werden häufig Karten eingebettet.

Einbettungen von Drittanbietern werden normalerweise in <iframe>-Elementen auf der Seite geladen. Drittanbieter stellen HTML-Snippets zur Verfügung, die oft aus einem <iframe> bestehen, das eine aus Markup, Skripts und Stylesheets bestehende Seite abruft. Einige Anbieter verwenden auch ein Skript-Snippet, mit dem ein <iframe> dynamisch eingeschleust wird, um andere Inhalte abzurufen. Dies kann die Einbettung der Drittanbieter-Inhalte beeinträchtigen und die Leistung der Seite beeinträchtigen, da die Erstanbieterinhalte verzögert angezeigt werden.

Leistungseinbußen bei eingebetteten Inhalten von Drittanbietern

Viele beliebte Einbettungen enthalten über 100 KB JavaScript, manchmal sogar bis zu 2 MB. Sie benötigen mehr Zeit zum Laden und halten den Hauptthread während der Ausführung ausgelastet. Mit Tools zur Leistungsüberwachung wie Lighthouse und Chrome-Entwicklertools kann die Auswirkung von Einbettungen von Drittanbietern auf die Leistung gemessen werden.

Auswirkungen von Drittanbietercode reduzieren In der Lighthouse-Prüfung wird eine Liste der von einer Seite verwendeten Drittanbieter angezeigt, einschließlich der Blockierungszeit für Größe und Hauptthread. Die Prüfung ist in den Chrome-Entwicklertools auf dem Tab „Lighthouse“ verfügbar.

Es empfiehlt sich, die Auswirkungen auf die Leistung Ihrer Einbettungen und des Codes von Drittanbietern regelmäßig zu prüfen, da sich der Einbettungsquellcode ändern kann. Sie können diese Gelegenheit nutzen, um redundanten Code zu entfernen.

Auswirkungen von Drittanbietercode reduzieren

Best Practices beim Laden

Einbettungen von Drittanbietern können sich negativ auf die Leistung auswirken, bieten aber auch wichtige Funktionen. Beachten Sie die folgenden Richtlinien, um Einbettungen von Drittanbietern effizient zu nutzen und deren Auswirkungen auf die Leistung zu reduzieren.

Skriptsortierung

Bei einer ansprechend gestalteten Seite liegt der Schwerpunkt der Seite auf den wichtigsten eigenen Inhalten. Einbettungen von Drittanbietern erscheinen dagegen in Seitenleisten oder hinter den eigenen Inhalten.

Für eine optimale Nutzererfahrung sollte der Hauptinhalt schnell und vor anderen unterstützenden Inhalten geladen werden. Beispielsweise sollte der Nachrichtentext auf einer Nachrichtenseite geladen werden, bevor ein Twitter-Feed oder Werbung eingebettet werden kann.

Anfragen für Einbettungen von Drittanbietern können das Laden von Erstanbieterinhalten beeinträchtigen. Daher ist die Position des Drittanbieter-Script-Tags wichtig. Skripts können die Ladesequenz beeinflussen, da die DOM-Konstruktion pausiert wird, während die Skripts ausgeführt werden. Platzieren Sie Drittanbieter-Skript-Tags nach den eigenen Schlüssel-Tags und verwenden Sie async- oder defer-Attribute, um sie asynchron zu laden.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

Lazy Loading

Da Inhalte von Drittanbietern normalerweise nach den primären Inhalten folgen, sind sie beim Laden der Seite möglicherweise nicht im Darstellungsbereich sichtbar. In diesem Fall kann das Herunterladen von Drittanbieter-Ressourcen verzögert werden, bis der Nutzer nach unten zu diesem Teil der Seite scrollt. Dies hilft nicht nur beim Optimieren des anfänglichen Seitenaufbaus, sondern reduziert auch die Downloadkosten für Nutzer mit festen Datentarifen und langsamen Netzwerkverbindungen.

Es wird als Lazy Loading bezeichnet, wenn der Download von Inhalten verzögert wird, bis sie tatsächlich benötigt werden. Je nach Anforderungen und Art der Einbettung können Sie verschiedene Lazy Loading-Techniken einsetzen, die im Folgenden erläutert werden.

Natives Lazy Loading für `<iframe>`

Bei Einbettungen von Drittanbietern, die über <iframe>-Elemente geladen werden, kannst du Lazy Loading auf Browserebene verwenden, um das Laden außerhalb des sichtbaren iFrames zu verzögern, bis der Nutzer in die Nähe scrollt. Das Ladeattribut für <iframe> ist in Chrome 77 und höher verfügbar und wurde auch für andere Chromium-basierte Browser eingeführt.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

Das Attribut „load“ unterstützt die folgenden Werte:

lazy: Gibt an, dass der Browser das Laden des iFrames verzögern soll. Der Browser lädt den iFrame, wenn er sich dem Darstellungsbereich nähert. Verwenden Sie diese Kennzeichnung, wenn sich der iFrame für Lazy Loading eignet.
eager: Der iFrame wird sofort geladen. Verwenden Sie diese Option, wenn der iFrame nicht für Lazy Loading geeignet ist. Wenn das Attribut loading nicht angegeben wurde, ist dies die Standardeinstellung – außer im Lite-Modus.
auto: Der Browser bestimmt, ob dieser Frame per Lazy Loading geladen wird.

Browser, die das Attribut loading nicht unterstützen, ignorieren es, sodass Sie natives Lazy Loading als progressive Verbesserung anwenden können. Browser, die das Attribut unterstützen, haben möglicherweise unterschiedliche Implementierungen für den Schwellenwert distance-from-viewport, also die Entfernung, bei der der Ladevorgang des iFrames beginnt.

Im Folgenden finden Sie einige Möglichkeiten, wie Sie iFrames für verschiedene Arten von Einbettungen laden können.

YouTube-Videos: Füge das Attribut loading in den von YouTube bereitgestellten Einbettungscode ein, um den iFrame eines YouTube-Videoplayers per Lazy Loading zu laden. Durch Lazy Loading der eingebetteten YouTube-Inhalte können beim ersten Seitenaufbau etwa 500 KB eingespart werden.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Google Maps: Wenn du einen Google Maps-iFrame per Lazy Loading laden möchtest, füge das Attribut loading in den Code für die iFrame-Einbettung ein, die von der Google Maps Embed API generiert wurde. Das folgende Beispiel zeigt den Code mit einem Platzhalter für den Google Cloud API-Schlüssel.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

Lazysizes-Bibliothek

Da Browser neben Signalen wie dem effektiven Verbindungstyp und dem Lite-Modus den Abstand vom Darstellungsbereich eines eingebetteten Darstellungsbereichs verwenden, um zu entscheiden, wann ein iFrame geladen werden soll, kann natives Lazy Loading inkonsistent sein. Wenn Sie mehr Kontrolle über die Grenzwerte für die Entfernung benötigen oder für ein einheitliches Lazy Loading in allen Browsern sorgen möchten, können Sie die Lazysizes-Bibliothek verwenden.

lazysizes ist ein schnelles, SEO-freundliches Lazy Loading für Bilder und iFrames. Sobald Sie die Komponente heruntergeladen haben, kann sie wie nachfolgend beschrieben mit einem iFrame für eine YouTube-Einbettung verwendet werden.

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Ebenso können Lazysizes mit iFrames für andere Einbettungen von Drittanbietern verwendet werden.

Bei Lazysizes wird die Intersection Observer API verwendet, um zu erkennen, wann ein Element sichtbar wird.

Datenverzögerung in Facebook verwenden

Facebook bietet verschiedene Arten von Social Plug-ins, die eingebettet werden können. Dazu gehören Beiträge, Kommentare, Videos und die beliebteste „Mag ich“-Schaltfläche. Alle Plug-ins enthalten eine Einstellung für data-lazy. Wenn Sie diesen Parameter auf true festlegen, verwendet das Plug-in den Lazy-Loading-Mechanismus des Browsers. Dazu wird das iFrame-Attribut loading="lazy" festgelegt.

Instagram-Feeds mit Lazy Loading

Instagram stellt als Teil der Einbettung einen Markup-Block und ein Skript zur Verfügung. Das Skript schleust ein <iframe> in die Seite ein. Lazy Loading dieses <iframe> kann die Leistung verbessern, da die Einbettung größer als 100 KB mit gzip sein kann. Viele Instagram-Plug-ins für WordPress-Websites wie WPZoom und Elfsight bieten diese Option.

Einbettungen durch Fassaden ersetzen

Obwohl interaktive Einbettungen einen Mehrwert für die Seite schaffen, interagieren viele Nutzer möglicherweise nicht mit ihnen. So klicken beispielsweise nicht alle Nutzer auf einer Restaurantseite auf die Einbettung der Karte, erweitern sie, scrollen und navigieren darin. Außerdem interagiert nicht jeder Nutzer der Seite eines Telekommunikationsanbieters mit dem Chatbot. In diesen Fällen können Sie das Laden oder Lazy Loading der Einbettung komplett vermeiden, indem Sie stattdessen eine Fassade anzeigen.

Eine Karteneinbettung mit einem Element zum Heran- und Herauszoomen.

Eine Fassade ist ein statisches Element, das dem eingebetteten Design eines Drittanbieters ähnelt, aber nicht funktionsfähig ist und den Seitenaufbau daher wesentlich reduziert. Im Folgenden findest du einige Strategien, wie du solche Einbettungen optimal laden und gleichzeitig einen Mehrwert für die Nutzer bieten kannst.

Statische Bilder als Fassaden verwenden

Anstelle von Karteneinbettungen können statische Bilder verwendet werden, wenn die Karte möglicherweise nicht interaktiv gestaltet werden muss. Sie können auf der Karte den gewünschten Bereich heranzoomen, ein Bild aufnehmen und diese anstelle der eingebetteten interaktiven Karte verwenden. Sie können auch mit der Funktion Screenshot des Knotens erfassen in den Entwicklertools einen Screenshot des eingebetteten iframe-Elements erstellen (siehe unten).

Knoten-Screenshot aufnehmen

Die Entwicklertools erfassen das Bild als png. Du kannst es aber auch in WebP format for better performance umwandeln.

Dynamische Bilder als Fassaden verwenden

Mit dieser Technik können Sie Bilder generieren, die einer interaktiven Einbettung während der Laufzeit entsprechen. Im Folgenden finden Sie einige Tools, mit denen Sie statische Versionen von Einbettungen auf Ihren Seiten generieren können.

Maps Static API: Der Maps Static API-Dienst generiert anhand der URL-Parameter einer Standard-HTTP-Anfrage eine Karte und gibt die Karte als Bild zurück, das Sie auf Ihrer Webseite anzeigen können. Die URL muss den Google Maps API-Schlüssel enthalten und im <img>-Tag auf der Seite als src-Attribut platziert werden.

Mit dem Tool Static Map Maker können Sie die für die URL erforderlichen Parameter konfigurieren und den Code für das Bildelement in Echtzeit abrufen.

Das folgende Snippet zeigt Code für ein Bild, bei dem als Quelle eine Maps Static API-URL festgelegt ist. Es wurde in ein Link-Tag eingefügt, das dafür sorgt, dass durch Klicken auf das Bild auf die eigentliche Karte zugegriffen werden kann. Hinweis: Das Attribut für den API-Schlüssel ist nicht in der URL enthalten.
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
Twitter-Screenshots: Ähnlich wie bei Karten-Screenshots können Sie auch hier dynamisch einen Twitter-Screenshot statt des Livefeeds einbetten. Tweetpik ist eines der Tools, mit denen Screenshots von Tweets erstellt werden können. Die Tweetpik API akzeptiert die URL des Tweets und gibt ein Bild mit seinem Inhalt zurück. Die API akzeptiert auch Parameter zum Anpassen des Hintergrunds, der Farben, der Ränder und der Abmessungen des Bilds.

Mit Click-to-Load Fassaden optimieren

Das Click-to-Load-Konzept kombiniert Lazy Loading mit Fassaden. Die Seite wird zuerst mit der Fassade geladen. Wenn der Nutzer mit dem statischen Platzhalter interagiert, indem er darauf klickt, wird die Einbettung des Drittanbieters geladen. Dies wird auch als Import-on-Interaktionsmuster bezeichnet und kann mit den folgenden Schritten implementiert werden.

Beim Seitenaufbau: Fassade oder statisches Element ist auf der Seite enthalten.
Bei Mouseover: Die Fassade stellt eine Vorabverbindung zum Drittanbieter für Einbettungen her.
Durch Klicken: Die Fassade wird durch das Produkt des Drittanbieters ersetzt.

Fassaden können für Einbettungen von Drittanbietern für Videoplayer, Chat-Widgets, Authentifizierungsdienste und Widgets für soziale Medien verwendet werden. Einbettungen von YouTube-Videos, die nur Bilder mit einer Wiedergabeschaltfläche sind, sind Fassaden, die uns häufig begegnen. Das eigentliche Video wird erst geladen, wenn Sie auf das Bild klicken.

Sie können eine benutzerdefinierte Click-to-Load-Fassade mithilfe des Musters Import bei Interaktion erstellen oder eine der folgenden Open-Source-Fassaden verwenden, die für verschiedene Arten von Einbettungen verfügbar sind.

YouTube-Fassade

Lite-youtube-embed ist eine empfohlene Fassade für den YouTube-Player, der wie der tatsächliche Player aussieht, aber 224 Mal schneller ist. Laden Sie einfach das Script und das Stylesheet herunter und verwenden Sie dann das <lite-youtube>-Tag in HTML oder JavaScript. Von YouTube unterstützte benutzerdefinierte Player-Parameter können über das params-Attribut eingefügt werden.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
Es folgt ein Vergleich zwischen der Lite-YouTube-Einbettung und der tatsächlichen Einbettung.

Eine Lite-YouTube-Einbettung

YouTube-Einbettung

Weitere ähnliche für YouTube- und Vimeo-Player verfügbare Fassaden sind lite-youtube, lite-vimeo-embed und lite-vimeo.
Fassade des Chat-Widgets

React-live-chat-loader lädt eine Schaltfläche, die wie die Einbettung eines Chats aussieht. Es kann mit verschiedenen Plattformen von Chatanbietern verwendet werden, z. B. Intercom, Help Scout, Messenger usw. Das ähnliche Widget ist viel leichter als das Chat-Widget und wird schneller geladen. Es kann durch das eigentliche Chat-Widget ersetzt werden, wenn der Nutzer den Mauszeiger auf die Schaltfläche bewegt oder darauf klickt oder wenn die Seite längere Zeit inaktiv war. In der Fallstudie zu Postmark wird erklärt, wie das Unternehmen Reagieren im Live-Chat und Leistungsverbesserungen implementiert hat.

Einbettungen entfernen oder durch Links ersetzen

Wenn Sie feststellen, dass einige Einbettungen von Drittanbietern zu einer schlechten Ladeleistung führen und keine der oben genannten Techniken in Frage kommen, können Sie die Einbettung am einfachsten vollständig entfernen. Wenn Sie möchten, dass Ihre Nutzer weiterhin auf die Inhalte zugreifen können, die eingebettet sind, können Sie mit target="_blank" einen Link zum Inhalt angeben. Der Nutzer kann dann darauf klicken, um sich die Inhalte auf einem anderen Tab anzusehen.

Layoutstabilität

Das dynamische Laden von eingebetteten Inhalten kann zwar die Ladeleistung einer Seite verbessern, es kann jedoch manchmal zu einer unerwarteten Verschiebung von Seiteninhalten führen. Dies wird als Layout Shift bezeichnet.

Da die visuelle Stabilität wichtig ist, um eine reibungslose Nutzererfahrung zu gewährleisten, misst Cumulative Layout Shift (CLS), wie oft diese Verschiebungen stattfinden und wie störend sie sind.

Layoutverschiebungen können vermieden werden, indem während des Seitenaufbaus Platz für Elemente reserviert wird, die später dynamisch geladen werden. Der Browser kann bestimmen, welcher Platz reserviert werden soll, wenn er die Breite und Höhe der Elemente kennt. Dazu können Sie die Attribute width und height von iFrames angeben oder eine feste Größe für statische Elemente festlegen, in die Einbettungen von Drittanbietern geladen werden. Beispielsweise sollten bei einem iFrame für eine YouTube-Einbettung die Breite und Höhe so definiert werden.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

Beliebte Einbettungen wie YouTube, Google Maps und Facebook stellen den Einbettungscode mit angegebenen Größenattributen bereit. Es kann jedoch Anbieter geben, die dies nicht angeben. Dieses Code-Snippet gibt beispielsweise nicht die Abmessungen der resultierenden Einbettung an.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Du kannst die eingeschleusten Entwicklertools mit den Entwicklertools überprüfen, iframenachdem diese Seite gerendert wurde. Wie im folgenden Snippet zu sehen ist, bleibt die Höhe des eingefügten iFrames fest, während die Breite in Prozent angegeben wird.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

Anhand dieser Informationen kann die Größe des enthaltenen Elements festgelegt werden, damit der Container beim Laden des Feeds nicht maximiert wird und es keine Layoutverschiebung gibt. Mit dem folgenden Snippet können Sie die Größe der zuvor enthaltenen Einbettung korrigieren.

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Layout Shift-Abschluss

Da bei Einbettungen von Drittanbietern die Abmessungen (Breite, Höhe) für den endgültigen Inhalt, den sie rendern, häufig weggelassen werden, können sie zu erheblichen Layoutverschiebungen auf einer Seite führen. Es kann schwierig sein, dieses Problem zu beheben, ohne die endgültigen Größen mit den Entwicklertools manuell bei verschiedenen Größen des Darstellungsbereichs zu überprüfen.

Mit dem automatisierten Tool Layout Shift Terminator lassen sich Layoutverschiebungen von beliebten eingebetteten Inhalten wie Twitter, Facebook und anderen Anbietern reduzieren.

Layout Shift-Abschluss:

Lädt die Einbettung clientseitig in einen iFrame.
Passt die Größe des iFrames an verschiedene gängige Größen des Darstellungsbereichs an.
Erfasst für jeden beliebten Darstellungsbereich die Abmessungen der eingebetteten Inhalte, um später Medien- und Containerabfragen zu generieren.
Die Größe eines Wrappers für die minimale Höhe um das Einbettungs-Markup wird mithilfe von Medien- und Containerabfragen so lange angepasst, bis die Einbettung initialisiert wird. Danach werden die Stile für die minimale Höhe entfernt.
Hiermit wird ein optimiertes Einbettungs-Snippet generiert, das Sie kopieren und an der Stelle einfügen können, an der Sie die Einbettung sonst in Ihre Seite einfügen würden.

Testen Sie den Layout Shift Terminator und geben Sie uns gern Feedback auf GitHub. Das Tool befindet sich in der Betaphase und wird durch weitere Optimierungen im Laufe der Zeit verbessert.

Fazit

Einbettungen von Drittanbietern können für Nutzer einen großen Mehrwert bieten. Mit zunehmender Anzahl und Größe der Einbettungen auf einer Seite kann die Leistung jedoch sinken. Deshalb ist es wichtig, angemessene Ladestrategien für Einbettungen auf der Grundlage ihrer Position, Relevanz und der Anforderungen potenzieller Nutzer zu messen, zu beurteilen und anzuwenden.