Shopify Vermeiden Sie document.write: Beheben Sie alte Skriptwarnungen

Warum document.write die Shopify-Leistung beeinträchtigt

document.write() ist eine alte JavaScript-Methode, die Markup direkt in die Seite schreibt, während der Browser HTML analysiert. Das machte bei älteren Anzeigen- und Analyse-Snippets Sinn, steht jedoch im Widerspruch zur modernen Storefront-Performance. Wenn der Browser auf ein blockierendes Skript stößt, das aufruft document.write(), muss das Parsen möglicherweise angehalten, mehr JavaScript abgerufen, neues Markup eingefügt und erst dann fortgefahren werden, wenn die Arbeit abgeschlossen ist.

Die Lighthouse-Dokumentation von Chrome warnt davor document.write() kann bei langsamen Verbindungen sichtbare Seiteninhalte stark verzögern und Chrome hat einige problematische Verwendungen unter bestimmten Netzwerkbedingungen blockiert. Auf Shopify sind langsame mobile Käufer genau die Menschen, deren Bestrafung Sie sich nicht leisten können. Wenn das alte Skript vor dem Helden, dem Produkttitel, dem Preis oder der Schaltfläche „In den Warenkorb“ erscheint, kann es schaden Shopify LCP, INPund Gesamtblockierungszeit.

Die Warnung überschneidet sich auch mit reduziert die Ausführungszeit von JavaScript, Legacy-JavaScript, und JavaScript von Drittanbietern blockiert Shopify. In der Praxis handelt es sich bei der Lösung meist nicht um eine magische Einstellung. Sie müssen ermitteln, welches Snippet auf die Seite schreibt, entscheiden, ob es noch benötigt wird, und es durch ein sichereres Lademuster ersetzen.

Woher document.write in Shopify Themes kommt

Beginnen Sie mit Ihrem Theme-Code. Suchen theme.liquid, Snippets, Abschnitte und Assets für document.write. Alte Themes verwenden es manchmal für Abzeichen, Vertrauenssiegel, Affiliate-Tracker, Popups, soziale Einbettungen, Store-Locator-Widgets oder alte Browser-Fallbacks. Wenn Sie ein zuvor eingefügtes Skript sehen oder nahe der Oberkante <Körper>, überprüfen Sie es zuerst.

Überprüfen Sie anschließend die Reste deinstallierter Apps. Shopify-Apps können Snippets, Skript-Tags oder Theme-App-Erweiterungsblöcke hinterlassen. Ein Store kann die App deinstallieren, aber den alten Loader im Theme behalten. Das führt zu einem doppelten Problem: Das Skript beeinträchtigt die Leistung und es gehört niemandem mehr. Der Bereinigungsworkflow in Entfernen Sie nicht verwendetes CSS und JavaScript Hier gilt .

Überprüfen Sie abschließend den Google Tag Manager und die Marketing-Tags. Einige Anzeigenanbieter stellen immer noch alte Snippets bereit, die aufrufen document.write() , um eine Iframe-, Tracking-Pixel- oder Skriptabhängigkeit einzufügen. Wenn GTM Teil des Problems ist, verwenden Sie die entsprechende Anleitung auf Behebung, dass GTM Shopify verlangsamt bevor Sie das umsatzkritische Tracking ändern.

Manuelle Schritt-für-Schritt-Anleitung: Vermeiden Sie document.write auf Shopify

1. Bestätigen Sie die genaue Skriptquelle

Entfernen Sie Skripte nicht durch Raten. Erweitern Sie in PageSpeed ​​Insights die Diagnose und notieren Sie sich die Skript-URL. Öffnen Sie in Chrome DevTools das Quellenfenster oder durchsuchen Sie alle geladenen Dateien nach document.write. Wenn die URL zu Ihrem Theme gehört, korrigieren Sie das Theme. Wenn es zu einem App- oder Tag-Anbieter gehört, suchen Sie die aktuelle asynchrone Version des Snippets.

2. Ersetzen Sie statische Schreibvorgänge durch Liquid oder HTML

If the code writes markup that is always present, it should not be JavaScript at all. Render it in Liquid so the browser receives stable HTML from the server.

<!-- Avoid this old pattern -->
<script>
  document.write('<div class="trust-badge">Kostenloser Versand über 75 $</div>');
</script>

<!-- Use normal theme markup instead -->
<div class="trust-badge">
  Kostenloser Versand über 75 $
</div>

This is safer for layout stability because the element exists from the first HTML response. It also makes the section easier to manage in Shopify's theme editor.

3. Ersetzen Sie dynamische Schreibvorgänge durch DOM-Einfügung

Wenn JavaScript nach dem Laden wirklich Markup erstellen muss, verwenden Sie DOM-APIs. Sie sind explizit, einfacher zu steuern und unterbrechen die HTML-Analyse nicht auf die gleiche Weise, wie es beim Parser-Schreiben der Fall sein kann.

const slot = document.querySelector('[data-promo-slot]');

if (slot) {
  const badge = document.createElement('div');
  badge.className = 'promo-badge';
  badge.textContent = 'Today only: free shipping over $75';
  slot.appendChild(badge);
}

4. Ersetzen Sie Skriptschreibvorgänge durch asynchrone Skripterstellung

Viele ältere Snippets verwenden document.write() um ein anderes Skript zu laden. Ersetzen Sie dies durch einen asynchronen Loader und platzieren Sie ihn nach kritischen Inhalten oder hinter der Benutzerabsicht, wenn das Skript nicht sofort benötigt wird.

function loadVendorScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.async = true;
  script.defer = true;
  document.head.appendChild(script);
}

window.addEventListener('load', () => {
  loadVendorScript('https://vendor.example.com/widget.js');
});

5. Unkritische Lieferanten später verschieben

Bewertungs-Widgets, Chat-Tools, Heatmaps, Umfragen, Popups, Affiliate-Badges und einige Personalisierungstools müssen selten vor dem ersten Ansichtsfenster ausgeführt werden. Verzögern Sie sie bis zum Laden, zur Leerlaufzeit, zum Scrollen, zum Klicken oder zur Sichtbarkeit des Abschnitts. Verwenden Sie für Videos und Karten eine Fassade, anstatt sofort den vollständigen Iframe zu laden.

const schedule = window.requestIdleCallback || ((callback) => setTimeout(callback, 1200));

schedule(() => {
  loadVendorScript('https://vendor.example.com/non-critical.js');
}, { timeout: 2500 });

6. Testen Sie den Checkout und die Namensnennung vor der Veröffentlichung

Seien Sie vorsichtig mit Einwilligung, Analysen, Anzeigen, Abonnement-Widgets, Add-to-Cart-Logik und Checkout-Übergabe. Eine schnellere Seite, die das Conversion-Tracking verliert oder ein Produktformular zerstört, ist kein Gewinn. Testen Sie Homepage, Produktseite, Kollektionsseite, Warenkorbschublade, Checkout-Weiterleitung und alle Marketingereignisse nach der Änderung.

Manueller Fix vs. Thunder Fix

So überprüfen Sie, ob die Warnung behoben ist

Testen Sie dieselbe URL in PageSpeed Insights und dem kostenloser Shopify-Geschwindigkeitstest. Überprüfen Sie, ob die Warnung verschwindet oder sich die Skriptquelle ändert. Zeichnen Sie dann eine mobile Leistungsverfolgung auf und stellen Sie sicher, dass das Legacy-Skript die frühe Analyse nicht mehr blockiert oder lange Aufgaben erstellt.

Beobachten Sie auch den Geschäftsablauf. Geben Sie bei Bedarf eine Testbestellung auf. Bestätigen Sie, dass „Add-to-Cart“ funktioniert, die Einwilligung weiterhin ausgelöst wird, Analyseereignisse weiterhin angezeigt werden und die Werbepixel weiterhin die Datenschutzeinstellungen respektieren. Für einen vollständigen Bereinigungspfad folgen Sie der vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, vergleichen Sie die Automatisierung im Bester Leitfaden für Shopify-Speed-Apps, oder verwenden professionelle Geschwindigkeitsoptimierung für die Bereinigung riskanter Themes.

FAQ