Shopify-Drittanbieter-Fassaden: Einbettungen laden, ohne die Seiten zu verlangsamen

Was Drittanbieter-Fassaden auf Shopify beheben

Ein normaler Iframe ist nicht nur ein Rechteck. Eine YouTube-, Vimeo-, Karten-, Formular- oder soziale Einbettung kann DNS-Suchen starten, Skripte herunterladen, CSS abrufen, Tracking ausführen, Layout-Platz stark belegen und mit Ihrem Heldenbild konkurrieren. In den Leitlinien von Google zu Einbettungen von Drittanbietern werden effiziente Lademuster empfohlen, da Inhalte von Drittanbietern das Rendern blockieren, Bandbreite verbrauchen, Layoutverschiebungen verursachen und Core Web Vitals beeinträchtigen können.

Eine Fassade verändert die Ladereihenfolge. Anstatt beim Laden der Seite das vollständige Drittanbieter-Erlebnis zu laden, rendert das Design einen einfachen lokalen Platzhalter: ein Bild, einen Titel, eine Wiedergabeschaltfläche, eine Kartenvorschau oder eine Karte. Die eigentliche Ressource eines Drittanbieters wird erst nach einer Interaktion geladen oder wenn der Abschnitt relevant wird.

Das ist besonders nützlich für Shops mit Landingpages, Produktvideos, Lookbooks, Tutorials, Filialsuchkarten, eingebetteten Formularen, Social Feeds, Termin-Widgets und Bewertungskarussells. Wenn Ihr Shop bereits unter vielen Drittanbieter-Skripten leidet, beginnen Sie mit den Leitfäden zu den Auswirkungen von Drittanbieter-Skripten auf Shopify, zu App-Skriptkorrekturen und zur Shopify-Videooptimierung.

Wann sollte eine Fassade anstelle des normalen Lazy Loading verwendet werden?

Natives loading="lazy" unterstützt iframes unterhalb des sichtbaren Bereichs, beseitigt jedoch nicht immer die anfänglichen Kosten für Skripte, Vorverbindungen, Stile und das Einbetten. Eine Fassade ist wirksamer, weil der iframe zunächst gar nicht existiert. Der Browser ruft erst dann Drittanbieterressourcen ab, wenn der Käufer interagiert.

Verwenden Sie eine Fassade, wenn die Einbettung schwer ist, für die erste Entscheidung nicht benötigt wird oder weiter unten auf der Seite erscheint. Nutzen Sie eine Fassade nicht für etwas, das Käufer sofort nutzen müssen, wie zum Beispiel einen geschäftskritischen Produktkonfigurator oberhalb der Falte. Optimieren Sie in diesen Fällen die Herstellereinstellungen, reduzieren Sie die Funktionen und testen Sie mit dem Arbeitsaufschlüsselung im Hauptthread.

Handbuch Schritt für Schritt: Shopify-Fassaden von Drittanbietern hinzufügen

1. Identifizieren Sie die teure Einbettung

Führen Sie PageSpeed Insights, Chrome DevTools und das aus kostenloser Shopify-Geschwindigkeitstest. Achten Sie auf Iframe-Domänen, JavaScript von Drittanbietern, Übertragungsgrößen, lange Aufgaben und Layoutverschiebungen. YouTube, Vimeo, Google Maps, Instagram-Feeds, TikTok-Einbettungen, Bewertungskarussells, Buchungstools und Quiz-Widgets sind häufige Kandidaten.

2. Reservieren Sie einen stabilen Platzhalter

Die Fassade sollte denselben visuellen Raum einnehmen wie das echte Embed. Dies schützt CLS. Verwenden Sie ein Bild von Shopifys CDN, ein Thumbnail oder eine statische Vorschau. Fügen Sie barrierefreien Schaltflächentext hinzu, damit Tastatur- und Screenreader-Benutzer den echten Inhalt laden können.

<div class="video-facade" data-video-facade data-video-id="abc123">
  <img
    src="https://cdn.shopify.com/s/files/1/0000/files/video-preview.jpg"
    alt="Produktdemonstrationsvideo"
    width="1280"
    height="720"
    loading="lazy"
  >
  <button type="button" class="video-facade__button">
    Video abspielen
  </button>
</div>

3. Laden Sie den echten Iframe bei Interaktion

Wenn der Käufer klickt, ersetzen Sie die Fassade durch den echten Iframe. Halten Sie die Attribute streng ein: verzögertes Laden, ein klarer Titel und nur die Berechtigungen, die für die Einbettung erforderlich sind.

document.querySelectorAll('[data-video-facade]').forEach((facade) => {
  facade.addEventListener('click', () => {
    const videoId = facade.dataset.videoId;
    const iframe = document.createElement('iframe');

    iframe.src = 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1';
    iframe.title = 'Product video';
    iframe.loading = 'lazy';
    iframe.allow = 'accelerometer; autoplay; encrypted-media; picture-in-picture';
    iframe.allowFullscreen = true;

    facade.replaceChildren(iframe);
  }, { once: true });
});

4. Gestalten Sie die Fassade so, dass sie sich nicht verschieben kann

Eine Fassade, deren Höhe sich nach dem Laden des Bildes ändert, kann zu der Layoutverschiebung führen, die Sie vermeiden wollten. Verwenden Sie ein festes Seitenverhältnis und sorgen Sie dafür, dass sowohl der Platzhalter als auch der Iframe den Platz füllen.

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111827;
  overflow: hidden;
}

.video-facade img,
.video-facade iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

.video-facade__button {
  position: absolute;
  inset: auto 50% 50% auto;
  transform: translate(50%, 50%);
}

5. Laden Sie Karten, Formulare und soziale Widgets mit demselben Muster

Zeigen Sie für Karten ein statisches Kartenbild oder eine Karte mit der Geschäftsadresse an und laden Sie die interaktive Karte erst nach einem Klick. Zeigen Sie für Formulare und Quizze eine Schaltfläche oder eine reduzierte Vorschau an. Zeigen Sie für soziale Feeds lokale Produkt- oder Lifestyle-Bilder an, statt Instagram oder TikTok für jeden Besucher zu laden.

6. Respektieren Sie die Einwilligung und Namensnennung

Einige Einbettungen setzen Cookies oder lösen Analysen aus. Wenn Ihr Geschäft ein Einwilligungsbanner verwendet, sollte die Fassade die Einwilligung nicht umgehen. Laden Sie den echten Anbieter nur, wenn beide Bedingungen erfüllt sind: Der Käufer hat interagiert und der Einwilligungsstatus lässt diese Anbieterkategorie zu.

Manueller Fix vs. Thunder Fix

So bestätigen Sie die verbesserte Geschwindigkeit von Fassaden

Testen Sie dieselbe Shopify-URL vor und nach der Fassade erneut. Sie sollten beim ersten Laden weniger Anfragen von Drittanbietern, eine geringere Übertragungsgröße, weniger lange Aufgaben und weniger Druck auf den Haupt-Thread sehen. Wenn sich die Einbettung oberhalb der Falte befand, achten Sie sorgfältig auf LCP und CLS. Wenn die Einbettung interaktiv war, testen Sie INP, indem Sie auf die Fassade tippen, das Video abspielen, die Karte öffnen oder das Formular absenden.

Fassaden sind Teil einer umfassenderen Performance-Strategie. Folgen Sie für den vollständigen Ablauf dem Leitfaden zur Shopify-Geschwindigkeitsoptimierung und prüfen Sie anschließend die Total Blocking Time sowie lange Aufgaben im Hauptthread. Wenn Sie vor individuellen Theme-Arbeiten eine automatisierte Grundlage wünschen, sehen Sie sich die Thunder-Preise an.

FAQ