Shopify Preload Key-Anfragen: Korrigieren Sie Schriftarten und Hero-Assets

Was PageSpeed unter Preload-Key-Anfragen versteht

Ein Preload teilt dem Browser mit: Diese Ressource ist bald wichtig, beginnen Sie frühzeitig mit dem Abrufen. PageSpeed zeigt Preload-Möglichkeiten auf, wenn der Browser eine wichtige Anfrage spät in der Wasserfall-Ansicht entdeckt. Auf Shopify sind die üblichen Kandidaten eine selbst gehostete Schriftart, ein Hero-Bild, das von Liquid oder CSS referenziert wird, oder eine CSS-Datei, die zum Rendern der ersten Ansicht erforderlich ist.

Diese Warnung überschneidet sich mit Core Web Vitals, da eine späte Erkennung Largest Contentful Paint verzögern kann. Der LCP-Leitfaden von Google besagt, dass ein guter LCP bei mindestens 75 % der Besuche 2,5 Sekunden oder schneller ist, und ein wichtiger Teilaspekt des LCP ist die Verzögerung der Ressourcenauslastung. Das Vorladen kann diese Verzögerung reduzieren, wenn die Ressource wirklich kritisch ist.

Es kann auch nach hinten losgehen. Wenn Sie fünf Schriftarten, drei Bilder, App-CSS, Rezensionen und ein Slider-Skript vorab laden, haben Sie keine Prioritäten gesetzt. Sie haben eine lautere Warteschlange geschaffen. Für einen breiteren Kontext lesen Sie die Leitfaden mit Shopify-Ressourcenhinweisen und die Leitfaden für kritische Anforderungsketten.

Gute und schlechte Shopify-Preload-Kandidaten

Manuelle Schritt-für-Schritt-Anleitung: Vorab-Download-Schlüsselanfragen auf Shopify beheben

1. Bestätigen Sie, dass die Ressource oberhalb der Falte verwendet wird

Öffnen Sie PageSpeed Insights, identifizieren Sie die vorgeschlagene Ressource und fragen Sie im ersten Ansichtsfenster, ob Käufer sie benötigen. Wenn die Antwort „Nein“ lautet, laden Sie es nicht vor. Erwägen Sie stattdessen ein verzögertes Laden oder eine Verzögerung. Wenn es sich bei der Ressource um das Heldenbild oder die primäre Schriftart handelt, fahren Sie fort.

2. Laden Sie das wahrscheinliche Heldenbild vor

Platzieren Sie bei einem von Liquid gesteuerten Hero-Bild die Vorspannung nur dann im Dokumentkopf oder in der Abschnittslogik, wenn dieser Abschnitt über dem Falz erscheint. Rendern Sie außerdem das eigentliche Bild mit Eager Loading und hoher Priorität.

<!-- In theme.liquid or a hero section rendered first -->
<link
  rel="preload"
  as="image"
  href="{{ section.settings.hero_image | image_url: width: 1600 }}"
  imagesrcset="
    {{ section.settings.hero_image | image_url: width: 750 }} 750w,
    {{ section.settings.hero_image | image_url: width: 1100 }} 1100w,
    {{ section.settings.hero_image | image_url: width: 1600 }} 1600w"
  imagesizes="100vw"
  fetchpriority="high"
>

Wenn dies Ihr LCP-Problem ist, dann Anleitung zum Vorladen von Heldenbildern und Leitfaden zur Erkennung von LCP-Anfragen gehen Sie tiefer.

3. Laden Sie nur kritische selbstgehostete Schriftarten vor

Das Vorladen von Schriftarten ist nur dann sinnvoll, wenn die Schriftartdatei sofort verwendet wird und die URL mit der von CSS angeforderten Schriftart übereinstimmt. Benutzen Crossorigin für Schriftartdateien. Kombinieren Sie dies mit Schriftartenanzeige: tauschen , damit der Text beim Laden der Schriftart nicht unsichtbar bleibt.

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

@font-face {
  font-family: 'Brand';
  src: url('{{ 'brand-regular.woff2' | asset_url }}') format('woff2');
  font-display: swap;
}

Weitere Einzelheiten finden Sie unter Shopify-Schriftoptimierung, Reduzierung der Schriftartenlast, und Schrift-Anzeige-Tausch.

4. Laden Sie keine unkritischen App-Assets vor

App-Assets sehen oft wichtig aus, weil sie in der Wasserfall-Ansicht erscheinen, aber Bewertungen, Chat, Empfehlungen, Popups, Personalisierung und Heatmaps werden selten vor dem ersten Paint benötigt. Das Vorladen dieser kann die Punktzahl verschlechtern, indem es Bandbreite und CPU von LCP stiehlt. Verwenden Sie den JavaScript-Leitfaden eines Drittanbieters , um stattdessen unkritische App-Arbeiten zu verzögern.

5. Achten Sie auf nicht verwendete Vorspannungswarnungen

Browser warnen, wenn eine vorinstallierte Ressource kurz nach dem Laden nicht verwendet wird. Das bedeutet, dass der Preload wahrscheinlich zu umfassend ist, die bedingte Logik falsch ist, die URL nicht übereinstimmt oder das Asset nicht wirklich kritisch ist. Entfernen Sie Vorspannungen, die sich im Test nicht bewährt haben.

Manueller Fix vs. Thunder Fix

Wie Preload eine Verbindung zu LCP, CSS und Skripten herstellt

Vorspannung ist keine eigenständige Geschwindigkeitsstrategie. Es funktioniert, wenn es den kritischen Pfad verkürzt. Wenn Ihr LCP-Bild zu spät startet, weil es in CSS versteckt, von JavaScript eingefügt oder verzögert geladen ist, kann ein Vorladen hilfreich sein. Wenn LCP langsam ist, weil die Bilddatei riesig ist, benötigen Sie auch moderne Bildformate und Quellen in der richtigen Größe. Wenn Rendering-blockierendes CSS das Malen verzögert, lesen Sie Behebung von Render-blockierendem CSS.

Wenn Skripte den Flaschenhals darstellen, ist das Vorabladen eines Skripts normalerweise der falsche Schritt. Möglicherweise müssen Sie die Ausführungszeit verkürzen, unkritische Skripte zurückstellen oder nicht verwendeten App-Code entfernen. Die Leitfaden zur Reduzierung der JavaScript-Ausführungszeit ist der bessere nächste Schritt.

So bestätigen Sie, dass der Fix funktioniert hat

Test mit PageSpeed Insights und dem kostenloser Shopify-Geschwindigkeitstest. Im Wasserfall sollte das vorinstallierte Asset früher starten. In Bezug auf die Kennzahlen sollte sich LCP verbessern oder zumindest stabil bleiben. In Warnungen sollten keine Meldungen „vorinstalliert, aber nicht verwendet“ angezeigt werden. Testen Sie auch auf Mobilgeräten, da Vorladefehler am deutlichsten sichtbar sind, wenn die Bandbreite knapp ist.

Für den vollständigen Store-weiten Ansatz verwenden Sie die vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung und vergleichen Sie die Automatisierungsoptionen im beste Shopify-Apps zur Geschwindigkeitsoptimierung Anleitung.

FAQ