Diese Seite wurde von der Cloud Translation API übersetzt.

Best Practices für die Verwendung von Einbettungen von Drittanbietern

Hier finden Sie einen Überblick über Methoden, mit denen beliebte Einbettungen von Drittanbietern effizient geladen werden können.

Addy Osmani

Katie Hempenius

Leena Sohoni

Viele Websites verwenden Einbettungen von Drittanbietern, um die Nutzerfreundlichkeit zu verbessern, indem einige Bereiche einer Webseite an einen anderen Inhaltsanbieter delegiert werden. Die gängigsten Beispiele für eingebettete Inhalte von Drittanbietern sind Videoplayer, Social-Media-Feeds, Karten und Werbung.

Inhalte von Drittanbietern können die Leistung einer Seite in vielerlei Hinsicht beeinflussen. Sie können das Rendering blockieren, mit anderen wichtigen Ressourcen bezüglich des Netzwerks und der Bandbreite in Konflikt stehen oder die Core Web Vitals-Messwerte beeinträchtigen. Eingebettete Inhalte von Drittanbietern können beim Laden auch zu Layoutänderungen führen. In diesem Artikel werden Best Practices für die Leistung beschrieben, die Sie beim Laden von Einbettungen von Drittanbietern anwenden können, effiziente Ladetechniken und das Tool „Layout Shifts“, mit dem Layout Shifts für beliebte Einbettungen reduziert werden können.

Was ist eine Einbettung?

Einbettete Inhalte von Drittanbietern sind alle Inhalte, die auf Ihrer Website angezeigt werden und

Nicht von Ihnen verfasst
Über Drittanbieterserver bereitgestellt

Es werden mehrere nicht sichtbare Einbettungen angezeigt, für die Lazy Loading verwendet werden kann.

Embeds werden häufig in folgenden Fällen verwendet:

Websites zu Themen wie Sport, Nachrichten, Unterhaltung und Mode verwenden Videos, um Textinhalte zu ergänzen.
Unternehmen mit aktiven Twitter- oder Social-Media-Konten betten Feeds dieser Konten in ihre Webseiten ein, um mehr Menschen anzusprechen und mit ihnen zu interagieren.
Auf den Seiten von Restaurants, Parks und Veranstaltungsorten werden häufig Karten eingebettet.

Einbettungen von Drittanbietern werden normalerweise in <iframe>-Elementen auf der Seite geladen. Drittanbieter bieten HTML-Snippets an, die häufig aus einem <iframe> bestehen, über das eine Seite mit Markup, Scripts und Stylesheets eingefügt wird. Einige Anbieter verwenden auch ein Script-Snippet, das dynamisch ein <iframe> einfügt, um andere Inhalte einzubinden. Das kann die Einbettungen von Drittanbietern beschweren und sich auf die Leistung der Seite auswirken, da die eigenen Inhalte verzögert werden.

Leistungseinbußen durch eingebettete Inhalte von Drittanbietern

Viele beliebte Einbettungen enthalten über 100 KB JavaScript, manchmal sogar bis zu 2 MB. Sie benötigen mehr Zeit zum Laden und belegen den Hauptthread bei der Ausführung. Mithilfe von Tools zur Leistungsüberwachung wie Lighthouse und Chrome DevTools können Sie die Auswirkungen von Drittanbieter-Embeds auf die Leistung messen.

Auswirkungen von Drittanbietercode reduzieren: In der Lighthouse-Prüfung wird eine Liste der auf einer Seite verwendeten Drittanbieter angezeigt, zusammen mit der Größe und der Blockierzeit des Hauptthreads. Die Prüfung ist in den Chrome DevTools auf dem Tab „Lighthouse“ verfügbar.

Es empfiehlt sich, die Auswirkungen Ihrer Einbettungen und des Drittanbietercodes auf die Leistung regelmäßig zu prüfen, da sich der Quellcode von Einbettungen ändern kann. Nutzen Sie diese Gelegenheit, 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 verwenden und deren Auswirkungen auf die Leistung zu reduzieren.

Scriptsortierung

Auf einer gut gestalteten Seite stehen die wichtigsten selbst erhobenen Inhalte im Mittelpunkt, während die eingebetteten Inhalte von Drittanbietern in den Seitenleisten oder nach den selbst erhobenen Inhalten angezeigt werden.

Für eine optimale Nutzererfahrung sollte der Hauptinhalt schnell und vor allen anderen unterstützenden Inhalten geladen werden. Beispielsweise sollte der Nachrichtentext auf einer Nachrichtenseite vor Einbettungen für einen Twitter-Feed oder Werbung geladen werden.

Anfragen für Einbettungen von Drittanbietern können das Laden von eigenen Inhalten beeinträchtigen. Daher ist die Position eines Drittanbieter-Script-Tags wichtig. Scripts können sich auf die Ladeabfolge auswirken, da die DOM-Erstellung pausiert, während Scripts ausgeführt werden. Platzieren Sie Drittanbieter-Script-Tags hinter den wichtigsten eigenen 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 dem primären Inhalt erscheinen, sind sie beim Laden der Seite möglicherweise nicht im Darstellungsbereich sichtbar. In diesem Fall wird der Download von Drittanbieterressourcen möglicherweise verschoben, bis der Nutzer zu diesem Teil der Seite scrollt. Dies optimiert nicht nur den anfänglichen Seitenaufbau, sondern senkt auch die Downloadkosten für Nutzer mit festen Datentarifen und langsamen Netzwerkverbindungen.

Das Verzögern des Ladens von Inhalten, bis sie wirklich benötigt werden, wird als Lazy Loading bezeichnet. Je nach Anforderungen und Art des Embeds können Sie verschiedene Lazy-Loading-Techniken verwenden.

Browser-Lazy-Loading für `<iframe>`

Bei Einbettungen von Drittanbietern, die über <iframe>-Elemente geladen werden, kannst du Lazy Loading auf Browserebene verwenden. Damit wird das Laden von nicht sichtbaren iFrames verzögert, bis Nutzer in ihrer Nähe scrollen. Das Ladeattribut für <iframe> ist in allen modernen Browsern verfügbar.

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

Das Ladeattribut unterstützt die folgenden Werte:

lazy: Gibt an, dass das Laden des iFrames verzögert werden soll. Der Browser lädt den iFrame, sobald er sich dem Darstellungsbereich nähert. Verwenden Sie diese Option, wenn der iFrame ein guter Kandidat für Lazy Loading ist.
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 das Standardverhalten – außer im Lite-Modus.
auto: Der Browser bestimmt, ob dieser Frame per Lazy-Load geladen werden soll.

Browser, die das Attribut loading nicht unterstützen, ignorieren es, sodass Sie Lazy Loading auf Browserebene als progressive Verbesserung anwenden können. Browser, die das Attribut unterstützen, haben möglicherweise unterschiedliche Implementierungen für den Grenzwert distance-from-viewport (die Entfernung, bei der der iFrame mit dem Laden beginnt).

Nachfolgend finden Sie einige Möglichkeiten, wie Sie Lazy Loading für iFrames für verschiedene Einbettungsarten nutzen können.

YouTube-Videos: Wenn du einen iFrame eines YouTube-Videoplayers per Lazy Loading laden möchtest, füge das Attribut loading in den von YouTube bereitgestellten Einbettungscode ein. Durch Lazy Loading der eingebetteten YouTube-Seite können Sie beim ersten Seitenaufbau etwa 500 KB sparen.

<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 ein Google Maps-iFrame per Lazy Loading geladen werden soll, füge das Attribut loading in den Code für die iFrame-Einbettung ein, die von der Google Maps Embed API generiert wird. Im Folgenden finden Sie ein Beispiel für 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>

Lazysize-Bibliothek

Da Browser neben Signalen wie dem effektiven Verbindungstyp und dem Lite-Modus auch den Abstand eines eingebetteten Elements vom Viewport verwenden, um zu entscheiden, wann ein Iframe geladen werden soll, kann das Lazy-Loading im Browser inkonsistent sein. Wenn Sie die Grenzwerte für die Entfernung besser steuern oder für ein einheitliches Lazy Loading in Browsern sorgen möchten, können Sie die Lazysizes-Bibliothek verwenden.

lazysizes ist ein schneller, SEO-freundlicher Lazy Loader für Bilder und iFrames. Nachdem du die Komponente heruntergeladen hast, kannst du sie wie folgt mit einem iFrame für eine YouTube-Einbettung verwenden:

<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.

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

Data Lazy in Facebook verwenden

Facebook bietet verschiedene Arten von Social-Media-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 du es auf true festlegst, wird das Plug-in das Lazy-Loading-Attribut loading="lazy" verwenden, um den Lazy-Loading-Mechanismus des Browsers zu nutzen.

Lazy Loading von Instagram-Feeds

Instagram stellt einen Markup-Block und ein Script als Teil des Embeds bereit. Das Script fügt der Seite ein <iframe> ein. Lazy Loading dieses <iframe> kann die Leistung verbessern, da die Einbettung in einer gzip-Datei mit mehr als 100 KB vorliegen kann. Viele Instagram-Plug-ins für WordPress-Websites wie WPZoom und Elfsight bieten Lazy Loading.

Einbettungen durch Fassaden ersetzen

Interaktive Einbettungen schaffen einen Mehrwert für die Seite, viele Nutzer interagieren jedoch möglicherweise nicht mit ihnen. Nicht jeder Nutzer, der eine Restaurantseite besucht, klickt, maximiert, scrollt und navigiert durch die eingebettete Karte. Ebenso interagiert nicht jeder Nutzer, der die Seite eines Telekommunikationsanbieters aufruft, mit dem Chatbot. In diesen Fällen können Sie das Laden oder Lazy Loading der Einbettung ganz vermeiden, indem Sie stattdessen eine Fassade anzeigen lassen.

Eine Karteneinbettung — Eine Karte mit einer Funktion zum Heran- und Herauszoomen.

Eine Fassade ist ein statisches Element, das dem tatsächlich eingebetteten Drittanbieter ähnelt, jedoch nicht funktionsfähig ist und daher den Seitenaufbau weitaus weniger belastet. Im Folgenden finden Sie einige Strategien, wie Sie solche Einbettungen optimal laden und gleichzeitig dem Nutzer einen Mehrwert bieten können.

Statische Bilder als Fassaden verwenden

Statische Bilder können anstelle von Karten-Embeds verwendet werden, wenn die Karte nicht interaktiv sein muss. Sie können auf der Karte das betreffende Gebiet heranzoomen, ein Bild aufnehmen und diese Funktion anstelle der interaktiven Karteneinbettung verwenden. Sie können auch die Funktion Knoten-Screenshot aufnehmen in den DevTools verwenden, um einen Screenshot des eingebetteten iframe-Elements aufzunehmen.

Knoten-Screenshot erstellen

In den Entwicklertools wird das Bild als png erfasst. Du kannst es aber auch in das WebP-Format konvertieren, um die Leistung zu verbessern.

Dynamische Bilder als Fassaden verwenden

Mit dieser Methode können Sie Bilder generieren, die einem interaktiven Einbettungselement entsprechen. Im Folgenden findest du einige Tools, mit denen du statische Versionen von Einbettungen auf deinen Seiten generieren kannst.

Maps Static API: Der Google Maps Static API-Dienst erstellt eine Karte basierend auf den URL-Parametern, die in einer Standard-HTTP-Anfrage enthalten sind, und gibt die Karte als Bild zurück, das auf Ihrer Webseite angezeigt werden kann. Die URL muss den Google Maps API-Schlüssel enthalten und als src-Attribut in das <img>-Tag auf der Seite eingefügt 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, mit dem sichergestellt wird, dass durch Klicken auf das Bild auf die eigentliche Karte zugegriffen werden kann. Hinweis: Das API-Schlüsselattribut 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 mit diesem Konzept einen Twitter-Screenshot anstelle des Livefeeds dynamisch einbetten. Tweetpik ist eines der Tools, mit dem Screenshots von Tweets aufgenommen werden können. Die Tweetpik API akzeptiert die URL des Tweets und gibt ein Bild mit dem Inhalt zurück. Die API akzeptiert auch Parameter zum Anpassen von Hintergrund, Farben, Rahmen und Abmessungen des Bildes.

Fassaden per Click-to-Load optimieren

Beim Click-to-Load-Konzept werden Lazy Loading mit Fassaden kombiniert. Die Seite wird zunächst mit der Fassade geladen. Wenn der Nutzer mit dem statischen Platzhalter interagiert, indem er darauf klickt, wird das eingebettete Element des Drittanbieters geladen. Dies wird auch als Import bei Interaktion-Muster bezeichnet und kann mit den folgenden Schritten implementiert werden.

Beim Laden der Seite: Die Fassade oder das statische Element ist auf der Seite enthalten.
Beim Mouseover: Facade stellt eine Vorabverbindung zum Drittanbieter des Embeds her.
Durch Klicken: Die Fassade wird durch das Produkt des Drittanbieters ersetzt.

Fassaden können mit eingebetteten Inhalten von Drittanbietern für Videoplayer, Chat-Widgets, Authentifizierungsdienste und Widgets für soziale Medien verwendet werden. YouTube-Videoeinbettungen, die nur Bilder mit einer Wiedergabeschaltfläche sind, sind Fassaden, auf die wir häufig stoßen. Das Video wird erst geladen, wenn Sie auf das Bild klicken.

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

YouTube-Fassade

Lite-youtube-embed wird als Fassade für den YouTube-Player empfohlen. Sie sieht aus wie der echte Player, ist aber 224-mal schneller. Laden Sie dazu das Skript und das Stylesheet herunter und verwenden Sie dann das <lite-youtube>-Tag in HTML oder JavaScript. Benutzerdefinierte Player-Parameter, die von YouTube unterstützt werden, können über das Attribut params eingeschlossen werden.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
Im Folgenden wird das lite-youtube-embed mit dem tatsächlichen Embed verglichen.

YouTube-Lite-Embed

YouTube-Embed

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

Das Ladeprogramm für Livechats reagieren lädt eine Schaltfläche, die wie eine Chateinbettung aussieht, nicht die Einbettung selbst. Er kann mit verschiedenen Plattformen von Chatanbietern wie Intercom, Help Scout und Messenger verwendet werden. Das Look-Alike-Widget ist wesentlich leichter als das Chat-Widget und lädt schneller. 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 Poststempel wird erläutert, wie das Unternehmen react-live-chat-loader implementiert und Leistungsverbesserungen erzielt hat.

Einbettungen entfernen oder durch Links ersetzen

Wenn du feststellst, dass einige Einbettungen von Drittanbietern zu einer schlechten Ladeleistung führen und keine der oben beschriebenen Techniken verwendet werden kann, kannst du die Einbettung am einfachsten entfernen. Wenn Nutzer weiterhin auf die Inhalte im eingebetteten Element zugreifen sollen, können Sie mit target="_blank" einen Link dazu angeben, über den sie sie auf einem anderen Tab aufrufen können.

Layoutstabilität

Das dynamische Laden eingebetteter Inhalte kann die Ladeleistung einer Seite verbessern, aber manchmal zu unerwarteten Bewegungen des Seiteninhalts führen. Dies wird als Layout Shift bezeichnet.

Da die visuelle Stabilität für eine reibungslose Nutzererfahrung wichtig ist, misst Cumulative Layout Shift (CLS), wie oft diese Veränderungen auftreten und wie störend sie sind.

Layoutverschiebungen können vermieden werden, indem beim Seitenaufbau Platz für Elemente reserviert wird, die später dynamisch geladen werden. Der Browser kann den zu reservierenden Raum bestimmen, wenn er die Breite und Höhe der Elemente kennt. Du kannst das durch Angabe der Attribute width und height für Iframes oder durch Festlegen einer festen Größe für statische Elemente erreichen, in denen das eingebettete Drittanbieterelement geladen wird. Beispiel: Breite und Höhe eines iFrames für eine YouTube-Einbettung sollten wie folgt angegeben 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 diese Informationen nicht angeben. Dieses Code-Snippet gibt beispielsweise nicht die Größe 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 Entwicklertools verwenden, um die eingefügten iframe-Elemente zu prüfen, nachdem diese Seite gerendert wurde. Wie im folgenden Snippet zu sehen ist, ist 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>

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

<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 Terminator

Da bei eingebetteten Inhalten von Drittanbietern häufig die Abmessungen (Breite, Höhe) für die endgültigen Inhalte weggelassen werden, können sie zu erheblichen Layoutänderungen auf einer Seite führen. Dieses Problem lässt sich nur schwer beheben, ohne die endgültigen Größen manuell mithilfe der DevTools bei verschiedenen Darstellungsbereichen zu prüfen.

Mit dem automatisierten Tool Layout Shift Terminator können Sie Layoutänderungen bei beliebten Einbettungen wie von Twitter, Facebook und anderen Anbietern reduzieren.

Layout Shift-Terminator:

Lädt das eingebettete Element clientseitig in einen iFrame.
Die Größe des iFrames wird an verschiedene gängige Größen des Darstellungsbereichs angepasst.
Für jeden gängigen Darstellungsbereich werden die Abmessungen des Embeds erfasst, um später Medienabfragen und Containerabfragen zu generieren.
Mithilfe von Medienabfragen (und Containerabfragen) wird die Größe eines Wrappers mit Mindesthöhe um das Embed-Markup herum festgelegt, bis das Embed initialisiert wird. Danach werden die Stile für die Mindesthöhe entfernt.
Generiert ein optimiertes Einbettungs-Snippet, das Sie kopieren und an der Stelle einfügen können, an der Sie die Einbettung in Ihre Seite normalerweise einbinden 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 mit der Zeit immer weiter optimiert.

Fazit

Einbettungen von Drittanbietern können für Nutzer sehr nützlich sein. Wenn die Anzahl und Größe der Einbettungen auf einer Seite jedoch zunimmt, kann die Leistung beeinträchtigt werden. Aus diesem Grund ist es notwendig, geeignete Ladestrategien für Einbettungen basierend auf ihrer Position, Relevanz und den Anforderungen der potenziellen Nutzer zu messen, zu beurteilen und anzuwenden.