Schnelle Lösung mit Thunder
Thunder improves common Shopify resource loading patterns automatically, including Core Web Vitals pressure from images, scripts, fonts, and render-blocking assets. Use it for the baseline, then reserve manual preload tags for the few assets that are truly critical on a specific template.
Was PageSpeed unter Preload-Key-Anfragen versteht
A preload tells the browser: this resource matters soon, start fetching it early. PageSpeed surfaces preload opportunities when the browser discovers an important request late in the waterfall. On Shopify, the usual candidates are a self-hosted font, a hero image referenced from Liquid or CSS, or a CSS file required to paint the first view.
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
| Vermögenswert | Vorspannung? | Grund |
|---|---|---|
| Homepage-Heldenbild | Oft ja | Wahrscheinlich LCP-Bild und im ersten Ansichtsfenster erforderlich. |
| Hauptproduktbild | Manchmal | Nützlich, wenn es sich um das LCP-Element handelt und erst spät entdeckt wird. |
| Primäre Above-the-Fold-Schriftart | Manchmal | Nützlich für selbst gehostete Schriftarten, die sich auf sichtbaren Text auswirken. |
| Sammlungsbilder „Below the Fold“. | Nein | Diese sollten normalerweise verzögert geladen und nicht vorinstalliert werden. |
| Überprüfen Sie das Widget-Skript | Nein | Normalerweise nicht vor dem ersten Rendern erforderlich. |
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 often look important because they appear in the waterfall, but reviews, chat, recommendations, popups, personalization, and heatmaps are rarely needed before the first paint. Preloading them can make the score worse by stealing bandwidth and CPU from LCP. Use the 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
| Vorladeproblem | Manuelle Korrektur | Donnerfix |
|---|---|---|
| Heldenbild spät entdeckt | Fügen Sie bedingtes Vorladen, Eager Loading und Abrufpriorität hoch hinzu. | Verbessert automatisch gängige LCP- und Bildprioritätsmuster. |
| Schriftart spät entdeckt | Laden Sie die genaue WOFF2-Datei vor und verwenden Sie den Font-Display-Swap. | Trägt als Teil der Storefront-Grundlinie dazu bei, den Druck beim Laden von Schriftarten zu reduzieren. |
| Zu viele Vorspannungen | Entfernen Sie breite Vorlasten und behalten Sie nur die Ressourcen des ersten Ansichtsfensters bei. | Vermeidet die Behandlung jedes Vermögenswerts als kritisch. |
| App-Ressourcen-Wasserfall ist laut | Verzögern Sie unkritische App-Skripte, anstatt sie vorab zu laden. | Optimiert das App-Ressourcen-Timing für häufige Shopify-Leistungsprobleme. |
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
Was bedeuten Preload-Key-Anfragen bei Shopify?
Dies bedeutet, dass ein kritischer Vermögenswert später entdeckt wird, als er sein sollte. Bei Shopify handelt es sich bei diesem Asset oft um eine Schriftart, ein Hero-Bild, eine kritische CSS-Datei oder eine Skriptabhängigkeit, die sich auf das erste Rendering auswirkt.
Sollte ich alle wichtigen Shopify-Assets vorab laden?
Nein. Laden Sie nur die Assets vor, die für das erste Ansichtsfenster benötigt werden. Zu viele Preload-Tags können das eigentliche LCP-Bild, CSS und Schriftarten verdrängen und die Leistung verschlechtern.
Welche Shopify-Assets sind gute Preload-Kandidaten?
Gute Kandidaten sind das wahrscheinliche LCP-Hero-Bild, eine selbst gehostete „above-the-fold“-Schriftartdatei und gelegentlich eine wichtige CSS-Datei. Below-the-Fold-Bilder, App-Widgets, Überprüfungsskripte und allgemeines Themen-JavaScript sind normalerweise schlechte Kandidaten.
Kann Thunder bei Anfragen zum Vorladen von Schlüsseln helfen?
Thunder kann die Ressourcenpriorität im Store und allgemeine Lademuster für Core Web Vitals automatisch verbessern. Manuelle Vorladungen können für stark benutzerdefinierte Heldenbilder oder Schriftarten immer noch nützlich sein.
Woher weiß ich, ob eine Vorspannung funktioniert hat?
Testen Sie dieselbe URL erneut und prüfen Sie, ob die kritische Ressource früher erkannt wurde, sich LCP verbessert oder stabil bleibt und keine Warnung angezeigt wird, dass vorinstallierte Ressourcen kurz nach dem Laden nicht verwendet werden.
Ressourcenpriorität auf praktische Weise festlegen
Laden Sie Schlüsselanfragen auf Shopify nur dann vor, wenn das Asset für das erste Ansichtsfenster von entscheidender Bedeutung ist. Thunder verwaltet die allgemeine automatisierte Basislinie und manuelle Vorladevorgänge können die Feinabstimmung benutzerdefinierter Helden- und Schriftartenfälle ermöglichen.
Installieren Sie Thunder