So reduzieren Sie die Schriftlast auf Shopify, ohne das Markendesign zu beeinträchtigen

Schnelle Lösung mit Thunder

If PageSpeed Insights shows font warnings, the fastest route is to install Thunder, test the same product and collection URLs, and watch whether LCP, FCP, and text rendering improve. Thunder is built from speed research across 20,000+ optimized Shopify stores and handles the common resource-loading work that most merchants should not be editing by hand.

Für ein umfassenderes Leistungsbild kombinieren Sie dies mit dem vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, das Leitfaden zur Shopify-Schriftoptimierungund die Aufschlüsselung der Thunder-Funktion. Schriftarten sind nur ein Teil von Core Web Vitals, aber sie können ansonsten saubere Speicher stillschweigend zurückhalten.

Warum das Laden von Schriftarten die Shopify Core Web Vitals beeinträchtigt

Fonts affect speed because text cannot be painted cleanly until the browser knows which typeface, file, and fallback behavior to use. If your theme requests multiple font families from an external domain, the browser has to open connections, download a stylesheet, discover the actual font files, and then fetch each WOFF2 file. On mobile, that chain can compete directly with the hero image that determines Größte inhaltsreiche Farbe.

Das gängige Shopify-Muster ist umfangreich: eine Überschriftenschriftart in Normal- und Fettschrift, eine Hauptschriftart in Normal-, Mittel-, Halbfett- und Fettschrift sowie eine Symbolschriftart, die von einem Seitenersteller oder einer Bewertungs-App zurückgelassen wurde. Dadurch können sechs bis zehn Schriftartenanfragen entstehen, bevor der Käufer einen Produkttitel gelesen hat. Nachdem alles geladen ist, sieht der Laden vielleicht poliert aus, aber der erste Eindruck ist verzögert.

Schriftartwechsel können auch zu Layoutverschiebungen führen. Wenn die Ersatzschriftart viel breiter oder höher als die endgültige Markenschriftart ist, können sich Produkttitel, Preiszeilen, Schaltflächen und Navigationsbeschriftungen verschieben. Darum gehört Schriftarbeit dazu CLS-Korrekturen, nicht nur LCP-Korrekturen.

Handbuch Schritt für Schritt: Schriftlast sicher reduzieren

1. Inventarisieren Sie jede Schriftartenanfrage

Öffnen Sie Chrome DevTools, laden Sie Ihre Homepage und eine Produktseite und filtern Sie dann das Netzwerkfenster nach „Schriftart“. Notieren Sie jede Familie, ihr Gewicht, ihre Herkunft und ihre Größe. Wiederholen Sie dies bei der mobilen Drosselung. Sie suchen nach Duplikaten, nicht verwendeten Strichstärken, App-Schriftarten und alten Symbolschriftarten.

2. Behalten Sie nur die Gewichtungen bei, die Ihr Theme verwendet

Viele Geschäfte laden 300, 400, 500, 600, 700 und kursive Varianten, wenn das Design nur 400 und 700 verwendet. Durchsuchen Sie Ihr Theme-CSS nach Schriftstärke bevor Sie etwas löschen. Wenn kein sichtbares Element 500 oder 600 verwendet, entfernen Sie diese Dateien.

3. Hosten Sie wichtige Schriftarten selbst als WOFF2

Shopify can serve assets from its CDN, which is usually faster than pulling CSS from a third-party font host on every page. Upload the exact WOFF2 files you need to theme assets, then define them in CSS:

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-regular.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-bold.woff2" | asset_url }}') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

In einem Astro-Artikel können wir Liquid direkt anzeigen, aber in einem Shopify-Theme gehört dies in Ihr Stylesheet oder in einen kleinen Schriftausschnitt, der von geladen wird theme.liquid.

4. Laden Sie eine wichtige Schriftart vor, nicht das gesamte Typografiesystem

Preloading is useful when the first visible text needs a specific file. It is harmful when you preload every font weight because those downloads can steal bandwidth from your LCP image. Start with one font:

<link
  rel="preload"
  href="{{ 'brand-sans-regular.woff2' | asset_url }}"
  as="font"
  type="font/woff2"
  crossorigin
>

5. Passen Sie Ersatzschriftarten an, um Layoutverschiebungen zu reduzieren

Verwenden Sie einen Fallback-Stack mit ähnlichen Proportionen. Wenn Ihre Markenschrift eine saubere serifenlose Schrift ist, system-ui, -apple-system, BlinkMacSystemFont, „Segoe UI“, serifenlos verhält sich normalerweise gut. Wenn Ihre Überschriftenschrift komprimiert oder kontrastreich ist, testen Sie sie vorher und nachher mit WebPageTest-Filmstreifen oder dem Leistungsbedienfeld.

Manueller Fix vs. Thunder Fix

Was Sie beim Reduzieren der Schriftlast nicht beschädigen sollten

Do not remove fonts used in the cart drawer, navigation, product badges, localization selector, or size guide without checking those states. Do not preload fonts that appear only below the fold. Do not stack multiple font optimization apps on top of a theme-level rewrite. And do not judge success from a single Lighthouse run; use before-and-after medians and real Shopify Web Performance Dashboard trends.

Wenn Ihr Shop auch über umfangreiche Skripte verfügt, korrigieren Sie nebenbei Schriftarten Shopify JavaScript-Optimierung und Bereinigung nicht verwendeter CSS- und JavaScript-Dateien. Eine saubere Schriftarteneinrichtung hilft, aber langsame Skripte von Drittanbietern können den Hauptthread dennoch verzögern und dazu führen, dass die Seite hängen bleibt.

FAQ