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 gängiger Einbettungen von Drittanbietern.

Addy Osmani

Katie Hempenius

Leena Sohoni

Viele Websites verwenden Einbettungen von Drittanbietern, um eine ansprechende Nutzererfahrung zu schaffen, indem einige Bereiche einer Webseite an einen anderen Contentanbieter delegiert werden. Die gängigsten 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 beeinträchtigen. 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. Auch Einbettungen von Drittanbietern können beim Laden zu Layoutverschiebungen 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?

Auf Ihrer Website werden alle Inhalte einer Drittanbieter-Einbettung mit den folgenden Kriterien angezeigt:

Nicht von Ihnen erstellt
Über Drittanbieterserver bereitgestellt

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

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

Auf Websites zu den Themen Sport, Nachrichten, Unterhaltung und Mode wird Text durch Videos ergänzt.
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 oft aus einem <iframe> bestehen, mit dem eine Seite geladen wird, die aus Markup, Skripten und Stylesheets besteht. Einige Anbieter verwenden auch ein Skript-Snippet, das <iframe> dynamisch einfügt, um andere Inhalte abzurufen. Dies kann die Einbettung von Drittanbieter-Inhalten erschweren und die Leistung der Seite beeinträchtigen, da die selbst erhobenen Inhalte verzögert werden.

Auswirkungen von Einbettungen von Drittanbietern auf die Leistung

Viele beliebte Einbettungen umfassen über 100 KB JavaScript und manchmal sogar bis zu 2 MB. Das Laden dauert länger und der Hauptthread wird während der Ausführung ausgelastet. Mit Tools zur Leistungsüberwachung wie Lighthouse und Chrome DevTools können Sie die Auswirkungen von Einbettungen von Drittanbietern 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. Sie finden die Prüfung über die Chrome-Entwicklertools auf dem Lighthouse-Tab.

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. 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 verwenden und deren Auswirkungen auf die Leistung zu reduzieren.

Scriptsortierung

Bei einer gut gestalteten Seite stehen die wichtigsten eigenen Inhalte im Mittelpunkt, während die Einbettungen von Drittanbietern in Seitenleisten oder nach den eigenen Inhalten erscheinen.

Für eine optimale Nutzererfahrung sollte der Hauptinhalt schnell und vor allen anderen unterstützenden Inhalten geladen werden. Der Nachrichtentext auf einer Nachrichtenseite sollte beispielsweise 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. Skripts können die Ladesequenz beeinflussen, da die DOM-Konstruktion während der Skriptausführung pausiert. Platzieren Sie Drittanbieter-Script-Tags hinter den wichtigsten eigenen Tags und verwenden Sie die Attribute async oder defer, 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 kann das Herunterladen von Ressourcen von Drittanbietern verzögert werden, bis der Nutzer nach unten 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 der Einbettung kannst du verschiedene Lazy-Load-Techniken verwenden.

Lazy Loading für den Browser 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 der Browser das Laden des iFrames verschieben 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: Lädt den iFrame sofort. 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 Loading geladen wird.

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 loading-Attribut 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 bei der Entscheidung, wann ein iFrame geladen werden soll, nicht nur anhand von Signalen wie dem effektiven Verbindungstyp und dem Lite-Modus, sondern auch anhand des Abstands einer Einbettung zum Darstellungsbereich entscheiden, 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.

Beachten Sie, dass Lazysizes die Intersection Observer API verwenden, um zu erkennen, wann ein Element sichtbar wird.

Data Lazy in Facebook verwenden

Facebook bietet verschiedene Arten von Plug-ins für soziale Netzwerke, 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 es auf true setzen, verwendet das Plug-in den Lazy-Load-Mechanismus des Browsers, indem das iFrame-Attribut loading="lazy" festgelegt wird.

Lazy Loading von Instagram-Feeds

Instagram stellt einen Markup-Block und ein Skript als Teil der Einbettung bereit. Das Skript fügt ein <iframe> in die Seite 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. Beispielsweise klicken nicht alle Nutzer, die eine Restaurantseite besuchen, auf die eingebettete Karte, erweitern sie, scrollen und navigieren darin. 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 vermeiden, indem Sie stattdessen eine Fassade anzeigen lassen.

</ph> Eine Karteneinbettung mit einer Funktion zum Heran- und Herauszoomen.

</ph> Eine Kartenfassade in Form eines Bildes.

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

Anstelle von Karteneinbettungen können statische Bilder verwendet werden, bei denen die Karte möglicherweise nicht interaktiv gestaltet werden muss. Sie können auf der Karte das betreffende Gebiet heranzoomen, ein Bild aufnehmen und diese Funktion anstelle der interaktiven Karteneinbettung verwenden. Du kannst in den Entwicklertools auch mit der Funktion Screenshot des Knotens erstellen einen Screenshot des eingebetteten iframe-Elements erstellen.

Knoten-Screenshot aufnehmen

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 diesem Verfahren können Sie Bilder generieren, die einer interaktiven Einbettung zur 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 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 Karten-Screenshots können Sie mit diesem Konzept einen Twitter-Screenshot statt 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 entsprechenden 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 die Einbettung des Drittanbieters geladen. Dies wird auch als Import on Interaktion-Muster bezeichnet und kann mithilfe der folgenden Schritte implementiert werden.

Beim Seitenaufbau: Die Seite enthält eine Fassade oder ein statisches Element.
Bei Mouseover: Die Fassade wird mit dem Einbettungsanbieter des Drittanbieters vorab verbunden.
Durch Klicken: Die Fassade wird durch das Produkt des Drittanbieters ersetzt.

Fassaden können mit Drittanbietereinbettungen 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, die uns häufig begegnen. Das eigentliche Video wird nur 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>
```
Unten siehst du einen Vergleich zwischen dem lite-youtube-embed und der tatsächlichen Einbettung.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Eine Lite-YouTube-Einbettung

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Eine YouTube-Einbettung

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

Mit dem Ladeprogramm für Livechats reagieren wird eine Schaltfläche geladen, die wie eine Chateinbettung aussieht, nicht wie 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 du weiterhin möchtest, dass deine Nutzer auf die eingebetteten Inhalte zugreifen können, kannst du mit target="_blank" einen Link zu dem Inhalt bereitstellen, auf den er dann klicken und ihn auf einem anderen Tab ansehen kann.

Stabilität des Layouts

Durch das dynamische Laden eingebetteter Inhalte kann zwar die Ladeleistung einer Seite verbessert werden, es kann aber auch zu unerwarteten Verschiebungen von Seiteninhalten 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.

Layout Shifts können vermieden werden, indem Sie beim Laden der Seite Platz für Elemente reservieren, die später dynamisch geladen werden. Der Browser kann den zu reservierenden Raum bestimmen, 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 die Einbettung eines Drittanbieters geladen wird. Beispiel: Breite und Höhe eines iFrames für eine YouTube-Einbettung müssen folgendermaßen 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>

Anhand 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-Ende

Da bei Einbettungen von Drittanbietern die Abmessungen (Breite, Höhe) für den endgültigen Inhalt nicht berücksichtigt 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 für verschiedene Größen des Darstellungsbereichs manuell prüfen zu müssen.

Es gibt jetzt ein automatisiertes Tool, Layout Shift Terminator, mit dem du Layout Shifts von beliebten Einbettungen wie Twitter, Facebook und anderen Anbietern reduzieren kannst.

Abschluss des Layout Shifts:

Lädt die Einbettung clientseitig in einen iFrame
Die Größe des iFrames wird an verschiedene gängige Größen des Darstellungsbereichs angepasst.
Für jeden beliebten Darstellungsbereich werden die Abmessungen der Einbettung erfasst, um später Medien- und Containerabfragen zu generieren.
Passt die Größe eines Wrappers mit Mindesthöhe um das Einbettungs-Markup mithilfe von Medien- und Containerabfragen an, bis die Einbettung initialisiert wird. Danach werden die Stile für die minimale Hö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 Nutzern einen großen Mehrwert bieten, aber wenn die Anzahl und Größe der Einbettungen auf einer Seite zunimmt, kann dies die Leistung beeinträchtigen. Aus diesem Grund ist es notwendig, geeignete Ladestrategien für Einbettungen basierend auf ihrer Position, Relevanz und den Anforderungen.