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
Katie Hempenius
X
Leena Sohoni
Leena Sohoni
X

Viele Websites verwenden Einbettungen von Drittanbietern, um eine ansprechende Nutzererfahrung zu schaffen, indem sie einige Bereiche einer Webseite an einen anderen Contentanbieter auslagern. Die häufigsten Beispiele für Einbettungen von Inhalten von Dritten sind Videoplayer, Social-Media-Feeds, Karten und Anzeigen.

Inhalte von Dritten können die Leistung einer Seite auf vielfältige Weise beeinträchtigen. Sie können das Rendering blockieren, mit anderen wichtigen Ressourcen um Netzwerk und Bandbreite konkurrieren oder sich auf die Core Web Vitals-Messwerte auswirken. Einbettungen von Drittanbietern können auch Layout Shifts verursachen, wenn sie geladen werden. In diesem Artikel werden Best Practices für die Leistung beim Laden von Einbettungen von Drittanbietern, effiziente Ladetechniken und das Tool Layout Shift Terminator erläutert, mit dem Layout Shifts bei beliebten Einbettungen reduziert werden können.

Was ist eine Einbettung?

Eine Einbettung von Drittanbietern ist jeder Inhalt, der auf Ihrer Website angezeigt wird und:

  • nicht von Ihnen erstellt wurde
  • von Drittanbieterservern bereitgestellt wird

Es werden mehrere Offscreen-Einbettungen angezeigt, für die Lazy Loading verwendet werden könnte.

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

  • Websites zu Sport, Nachrichten, Unterhaltung und Mode verwenden Videos, um Textinhalte zu ergänzen.
  • Organisationen mit aktiven Twitter- oder Social-Media-Konten betten Feeds aus diesen Konten in ihre Webseiten ein, um mehr Nutzer zu erreichen und mit ihnen zu interagieren.
  • Auf den Seiten von Restaurants, Parks und Veranstaltungsorten werden häufig Karten eingebettet.

Einbettungen von Drittanbietern werden in der Regel in <iframe>-Elementen auf der Seite geladen. Drittanbieter bieten HTML-Snippets an, die oft aus einem <iframe> bestehen, das eine Seite mit Markup, Skripts und Stylesheets abruft. Einige Anbieter verwenden auch ein Skript-Snippet, das dynamisch ein <iframe> einfügt, um andere Inhalte abzurufen. Dadurch können die Einbettungen von Drittanbietern schwer werden und die Leistung der Seite beeinträchtigen, indem sie die Inhalte der ersten Partei verzögern.

Auswirkungen von Einbettungen von Drittanbietern auf die Leistung

Viele beliebte Einbettungen enthalten über 100 KB JavaScript, manchmal sogar bis zu 2 MB. Sie benötigen mehr Zeit zum Laden und beanspruchen den Hauptthread bei der Ausführung. Mit Tools zur Leistungsüberwachung wie Lighthouse und Chrome-Entwicklertools lässt sich die Auswirkung von Einbettungen von Drittanbietern auf die Leistung messen.

Die Lighthouse-Prüfung „Auswirkungen von Drittanbietercode reduzieren“ zeigt eine Liste der Drittanbieter, die auf einer Seite verwendet werden, mit Größe und Blockierzeit des Hauptthreads. Die Prüfung ist in den Chrome-Entwicklertools auf dem Tab „Lighthouse“ verfügbar.

Es empfiehlt sich, die Auswirkungen von Einbettungen und Drittanbietercode auf die Leistung regelmäßig zu prüfen, da sich der Quellcode von Einbettungen ändern kann. So können Sie überflüssigen Code entfernen.

Lighthouse-Audit mit den Auswirkungen der einzelnen Drittanbieter-Code-Abschnitte auf eine Seite.

Best Practices beim Laden

Einbettungen von Drittanbietern können die Leistung negativ beeinflussen, bieten aber auch wichtige Funktionen. Wenn Sie Einbettungen von Drittanbietern effizient nutzen und ihre Auswirkungen auf die Leistung reduzieren möchten, folgen Sie diesen Richtlinien.

Reihenfolge der Skripts

Auf einer gut gestalteten Seite sind die wichtigsten Inhalte der ersten Partei im Mittelpunkt, während die Einbettungen von Drittanbietern in Seitenleisten oder nach den Inhalten der ersten Partei angezeigt werden.

Für eine optimale Nutzererfahrung sollten die Hauptinhalte 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 Anzeigen geladen werden.

Anfragen für Einbettungen von Drittanbietern können das Laden von Inhalten der ersten Partei behindern. Daher ist die Position eines Skript-Tags eines Drittanbieters wichtig. Skripts können sich auf die Ladefolge auswirken, da die DOM-Konstruktion unterbrochen wird, während Skripts ausgeführt werden. Platzieren Sie Skript-Tags von Drittanbietern nach den wichtigsten Tags der ersten Partei 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 Dritten in der Regel nach den Hauptinhalten angezeigt werden, 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 zu diesem Teil der Seite scrollt. Das optimiert nicht nur den anfänglichen Seitenaufbau, sondern reduziert auch die Downloadkosten für Nutzer mit festen Datentarifen und langsamen Netzwerkverbindungen.

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

Lazy Loading im Browser für <iframe>

Für Einbettungen von Drittanbietern, die über <iframe> Elemente geladen werden, können Sie Lazy Loading auf Browserebene verwenden, um das Laden von Offscreen-iFrames zu verzögern, bis Nutzer in ihre Nähe scrollen. Das Attribut <iframe> ist in allen modernen Browsern verfügbar.

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

Das Attribut `loading` 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 Option, wenn der iFrame für Lazy Loading geeignet 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 werden soll.

Browser, die das Attribut loading nicht unterstützen, ignorieren es. Sie können Lazy Loading auf Browserebene also als progressive Verbesserung anwenden. Browser, die das Attribut unterstützen, können unterschiedliche Implementierungen für den Schwellenwert für den Abstand zum Darstellungsbereich haben (der Abstand, bei dem der iFrame geladen wird).

Im Folgenden finden Sie einige Möglichkeiten, iFrames für verschiedene Arten von Einbettungen per Lazy Loading zu laden.

  • YouTube-Videos: Wenn Sie einen YouTube-Videoplayer-iFrame per Lazy Loading laden möchten, fügen Sie dem von YouTube bereitgestellten Einbettungscode das Attribut loading hinzu. Durch Lazy Loading der YouTube-Einbettung können beim anfänglichen 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 Sie einen Google Maps-iFrame per Lazy Loading laden möchten, fügen Sie das Attribut loading in den Code für die iFrame-Einbettung ein, der von der Google Maps Embed API generiert wurde. 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>

lazysizes-Bibliothek

Da Browser den Abstand einer Einbettung zum Darstellungsbereich sowie Signale wie den effektiven Verbindungstyp und den Lite-Modus verwenden, um zu entscheiden, wann ein iFrame geladen werden soll, kann Lazy Loading im Browser inkonsistent sein. Wenn Sie die Abstandsschwellenwerte besser steuern oder eine konsistente Lazy-Loading-Erfahrung in allen Browsern bieten möchten, können Sie die lazysizes Bibliothek verwenden.

lazysizes ist ein schneller, SEO-freundlicher Lazy Loader für Bilder und iFrames. Nachdem Sie die Komponente heruntergeladen haben, kann sie wie folgt 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 kann lazysizes mit iFrames für andere Einbettungen von Drittanbietern verwendet werden.

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

`data-lazy` in Facebook verwenden

Facebook bietet verschiedene Arten von Social-Plugins, die eingebettet werden können. Dazu gehören Beiträge, Kommentare, Videos und die beliebte Schaltfläche Gefällt mir. Alle Plugins enthalten eine Einstellung für data-lazy. Wenn Sie sie auf true setzen, verwendet das Plugin den Lazy-Loading-Mechanismus des Browsers, indem das iFrame-Attribut loading="lazy" festgelegt wird.

Lazy Loading für Instagram-Feeds

Instagram stellt als Teil der Einbettung einen Markup-Block und ein Skript bereit. Das Skript fügt ein <iframe> in die Seite ein. Durch Lazy Loading dieses <iframe> kann die Leistung verbessert werden, da die Einbettung komprimiert über 100 KB groß sein kann. Viele Instagram-Plugins für WordPress-Websites wie WPZoom und Elfsight bieten die Option für Lazy Loading.

Einbettungen durch Fassaden ersetzen

Interaktive Einbettungen bieten zwar einen Mehrwert für die Seite, aber viele Nutzer interagieren möglicherweise nicht mit ihnen. Beispielsweise klickt, maximiert, scrollt und navigiert nicht jeder Nutzer, der eine Restaurantseite aufruft, die Karteneinbettung. Ebenso interagiert nicht jeder Nutzer auf der Seite eines Telekommunikationsanbieters 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.

Eine Karteneinbettung mit einer Zoomfunktion.
Eine Kartenfassade, die ein Bild ist.

Eine Fassade ist ein statisches Element, das der tatsächlichen eingebetteten Einbettung von Drittanbietern ähnelt, aber nicht funktionsfähig ist und daher den Seitenaufbau viel weniger beeinträchtigt. Im Folgenden finden Sie einige Strategien, um solche Einbettungen optimal zu laden und dem Nutzer dennoch einen gewissen Mehrwert zu bieten.

Statische Bilder als Fassaden verwenden

Anstelle von Karteneinbettungen können statische Bilder verwendet werden, wenn die Karte nicht interaktiv sein muss. Sie können den gewünschten Bereich auf der Karte vergrößern, ein Bild aufnehmen und es anstelle der interaktiven Karteneinbettung verwenden. Sie können auch die Funktion Knoten-Screenshot erstellen in den DevTools verwenden, um einen Screenshot des eingebetteten iframe-Elements zu erstellen.

Die Option „Knoten-Screenshot aufnehmen“ ist in einem Kontextmenü in einem HTML-Editor hervorgehoben.

In den DevTools wird das Bild als png erfasst. Sie können es aber auch in das WebP-Format konvertieren, um die Leistung zu verbessern.

Dynamische Bilder als Fassaden verwenden

Mit dieser Technik 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 generiert eine Karte basierend auf den URL-Parametern, die in einer Standard-HTTP-Anfrage enthalten sind, 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 das src Attribut platziert werden.

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

    Das folgende Snippet zeigt Code für ein Bild, dessen Quelle auf eine Maps Static API-URL festgelegt ist. Es wurde in ein Link-Tag eingefügt, damit die tatsächliche Karte durch Klicken auf das Bild aufgerufen 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 mit diesem Konzept dynamisch einen Twitter-Screenshot anstelle des Live-Feeds einbetten. Tweetpik ist eines der Tools, mit denen Sie Screenshots von Tweets erstellen 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 des Hintergrunds, der Farben, der Rahmen und der Abmessungen des Bildes.

Click-to-Load verwenden, um Fassaden zu verbessern

Das Click-to-Load-Konzept kombiniert Lazy Loading und Fassaden. 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 bei Interaktion“ bezeichnet und kann mit den folgenden Schritten implementiert werden.

  1. Beim Seitenaufbau: Fassade oder statisches Element ist auf der Seite enthalten.
  2. Beim Bewegen des Mauszeigers: Die Fassade stellt eine Verbindung zum Anbieter der Einbettung des Drittanbieters her.
  3. Beim Klicken: Die Fassade wird durch das Produkt des Drittanbieters ersetzt.

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

Sie können eine benutzerdefinierte Click-to-Load-Fassade mit dem Muster 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, die wie der echte Player aussieht, aber 224-mal schneller ist. Sie können sie verwenden, indem Sie das Skript und das Stylesheet herunterladen und dann das <lite-youtube> Tag in HTML oder JavaScript verwenden. Benutzerdefinierte Playerparameter, die von YouTube unterstützt werden, können über das Attribut params eingefügt werden.

    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

    Im Folgenden finden Sie einen Vergleich zwischen der lite-youtube-embed-Fassade und der tatsächlichen Einbettung.

    Lite-YouTube-Einbettung
    Eine lite-YouTube-Einbettung
    Tatsächliches Einbetten von YouTube-Videos
    Eine YouTube-Einbettung

    Weitere ähnliche Fassaden, die für YouTube- und Vimeo-Player verfügbar sind, sind lite-youtube, lite-vimeo-embed und lite-vimeo.

  • Fassade für Chat-Widget

    React Live Chat Loader lädt eine Schaltfläche, die wie eine Chat-Einbettung aussieht, anstelle der Einbettung selbst. Es kann mit verschiedenen Chat-Anbieterplattformen wie Intercom, Help Scout und Messenger verwendet werden. Das ähnliche Widget ist viel leichter als das Chat-Widget und wird schneller geladen. Es kann durch das tatsächliche 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 erläutert, wie react-live-chat-loader implementiert wurde und welche Leistungsverbesserungen erzielt wurden.

    Postmark-Chat-Widget in einem HTML-Editor mit dem verpackten Code.

Wenn Sie feststellen, dass einige Einbettungen von Drittanbietern zu einer schlechten Ladeleistung führen und keine der zuvor beschriebenen Techniken verwendet werden kann, besteht die einfachste Möglichkeit darin, die Einbettung ganz zu entfernen. Wenn Sie möchten, dass Ihre Nutzer weiterhin auf die Inhalte in der Einbettung zugreifen können, können Sie einen Link dazu mit target="_blank" bereitstellen, damit der Nutzer darauf klicken und sie auf einem anderen Tab ansehen kann.

Layoutstabilität

Durch das dynamische Laden eingebetteter Inhalte kann die Ladeleistung einer Seite verbessert werden, aber manchmal kann es zu unerwarteten Bewegungen von Seiteninhalten kommen. Dies wird als Layout Shift bezeichnet.

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

Layout Shifts 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 Platz bestimmen, wenn er die Breite und Höhe der Elemente kennt. Sie können dies sicherstellen, indem Sie die Attribute width und height von iFrames angeben oder eine feste Größe für statische Elemente festlegen, in die die Einbettung des Drittanbieters geladen wird. Beispielsweise sollte für einen iFrame für eine YouTube-Einbettung die Breite und Höhe wie folgt angegeben werden.

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

Bei beliebten Einbettungen wie YouTube, Google Maps und Facebook wird der Einbettungscode mit Größenattributen angegeben. Es gibt jedoch möglicherweise Anbieter, die dies nicht tun. In diesem Code-Snippet werden beispielsweise die Abmessungen der resultierenden Einbettung nicht angegeben.

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

Sie können die eingefügte iframe nach dem Rendern dieser Seite mit den DevTools untersuchen. Wie im folgenden Snippet zu sehen, ist die Höhe des eingefügten iFrames festgelegt, 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>

Mit diesen Informationen können Sie die Größe des enthaltenden Elements festlegen, damit der Container beim Laden des Feeds nicht erweitert wird und es zu keinem Layout Shift kommt. Mit dem folgenden Snippet kann die Größe der zuvor eingefügten Einbettung festgelegt 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 Einbettungen von Drittanbietern häufig die Abmessungen (Breite, Höhe) für die endgültigen Inhalte, die gerendert werden, fehlen, können sie erhebliche Layout Shifts auf einer Seite verursachen. Dieses Problem lässt sich nur schwer beheben, ohne die endgültigen Größen mit den DevTools bei verschiedenen Darstellungsbereichsgrößen manuell zu prüfen.

Jetzt gibt es ein automatisiertes Tool, den Layout Shift Terminator, mit dem Sie Layout Shifts bei beliebten Einbettungen wie Twitter, Facebook und anderen Anbietern reduzieren können.

Layout Shift Terminator:

  • Lädt die Einbettung clientseitig in einen iFrame.
  • Ändert die Größe des iFrames auf verschiedene beliebte Darstellungsbereichsgrößen.
  • Erfasst für jeden beliebten Darstellungsbereich die Abmessungen der Einbettung, um später Media Queries und Container Queries zu generieren.
  • Legt mit Media Queries (und Container Queries) einen Wrapper mit einer Mindesthöhe um das Einbettungs-Markup fest, bis die Einbettung initialisiert wird. Danach werden die Stile für die Mindesthöhe entfernt.

  • Generiert ein optimiertes Einbettungs-Snippet, das kopiert und an der Stelle eingefügt werden kann, an der Sie die Einbettung sonst auf Ihrer Seite einfügen würden.

    Der Layout Shift Terminator mit einer Codeausgabe und einer Vorschau.

Testen Sie den Layout Shift Terminator und geben Sie uns Feedback zum GitHub-Projekt Layout Shift Terminator. Das Tool befindet sich in der Betaphase und soll mit weiteren Verbesserungen im Laufe der Zeit optimiert werden.

Fazit

Einbettungen von Drittanbietern können für Nutzer sehr nützlich sein. Wenn jedoch die Anzahl und Größe der Einbettungen auf einer Seite zunimmt, kann die Leistung darunter leiden. Daher ist es notwendig, geeignete Ladestrategien für Einbettungen basierend auf ihrer Position, Relevanz und den potenziellen Bedürfnissen der Nutzer zu messen, zu bewerten und zu verwenden.