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

Schnelle Lösung mit Thunder

Wenn PageSpeed Insights Schriftwarnungen anzeigt, ist der schnellste Weg, zu installieren Thunder, testen Sie dieselben Produkt- und Kollektions-URLs und beobachten Sie, ob LCP, FCP, und die Textwiedergabe sich verbessert. Thunder wird aus Geschwindigkeitsforschung über 20,000+ optimierten Shopify Shops und übernimmt die gängige Ressourcenlade-Arbeit, die die meisten Händler nicht manuell bearbeiten sollten.

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

Schriftarten beeinflussen die Geschwindigkeit, da Text nicht sauber dargestellt werden kann, bis der Browser weiß, welche Schriftart, Datei und Fallback-Verhalten zu verwenden sind. Wenn Ihr Theme mehrere Schriftfamilien von einer externen Domain anfordert, muss der Browser Verbindungen öffnen, ein Stylesheet herunterladen, die tatsächlichen Schriftdateien entdecken und dann jede WOFF2-Datei abrufen. Auf Mobilgeräten kann diese Kette direkt mit dem Hero-Bild konkurrieren, das bestimmt 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 font-weight 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 kann Assets von seinem CDN bereitstellen, was normalerweise schneller ist, als CSS von einem Drittanbieter-Schriftarten-Host auf jeder Seite abzurufen. Laden Sie die exakten WOFF2-Dateien, die Sie benötigen, in die Theme-Assets hoch und definieren Sie sie dann 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 ist nützlich, wenn der erste sichtbare Text eine bestimmte Datei benötigt. Es ist schädlich, wenn Sie jedes Schriftgewicht vorladen, da diese Downloads Bandbreite von Ihrem LCP-Bild stehlen können. Beginnen Sie mit einer Schriftart:

<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", sans-serif 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

Entfernen Sie keine Schriftarten, die im Warenkorb-Drawer, in der Navigation, bei Produkt-Badges, im Lokalisierungs-Selektor oder im Größenratgeber verwendet werden, ohne diese Zustände zu überprüfen. Laden Sie keine Schriftarten vor, die nur unterhalb des sichtbaren Bereichs erscheinen. Stapeln Sie nicht mehrere Schriftoptimierungs-Apps auf einer Theme-weiten Neuschreibung. Und beurteilen Sie den Erfolg nicht anhand eines einzelnen Lighthouse-Laufs; verwenden Sie Vorher-Nachher-Mediane und echte 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