Shopify-Bildelemente mit fehlender Breite und Höhe: Behebung der PageSpeed-Warnung

Warum Shopify die Breiten- und Höhenwarnung erhält

Lighthouse markiert Bildelemente ohne explizite Breite und Höhe, da der Browser beim Herunterladen des Bildes nicht sicher Platz für das Layout reservieren kann. Wenn das Bild erscheint und Text, Schaltflächen, Produktkarten, Rezensionen oder „Below-the-Fold“-Inhalte auf der Seite nach unten verschiebt, sehen Käufer einen Sprung. Google erklärt dies unter Anleitung zur Layoutstabilität: Bilder und Videos benötigen Abmessungen, damit der Browser Speicherplatz zuweisen kann, bevor die Ressource vollständig geladen ist.

Shopify-Themes beginnen oft sauber und driften dann ab. Ein Entwickler fügt einen benutzerdefinierten Helden hinzu. Ein Landingpage-Abschnitt codiert ein Bild fest. Ein Seitenersteller fügt ein Banner ein. Eine Bewertungs-App fügt Kundenfotos ein. Ein Blog-Beitrag verwendet rohes HTML anstelle der Bildkomponente des Themas. Jeder kann die gleiche PageSpeed-Warnung erstellen.

Dies überschneidet sich mit Shopify CLS-Korrekturen, Bildoptimierung, und Bilder richtig dimensionieren. Bei Breite und Höhe geht es nicht um die Komprimierung der Datei. Es geht darum, das Layout vorhersehbar zu machen.

Handbuch Schritt für Schritt: Bildelemente ohne Abmessungen korrigieren

1. Finden Sie die genauen Bilder, die Lighthouse meldet

Führen Sie PageSpeed Insights auf der Startseite, einer Produktseite und einer Sammlungsseite aus. Öffnen Sie die Prüfung „Bildelemente haben keine explizite Breite und Höhe“ und kopieren Sie die Bild-URLs. Durchsuchen Sie dann Ihr Theme nach dem Dateinamen, Abschnittsnamen, App-Block oder Snippet, das es rendert.

Verwenden Sie beim Testen dieselben URLs. Die Ausführung von PageSpeed variiert. Halten Sie daher die Geschwindigkeit vor und nach der Verwendung stabil der Leitfaden zur Varianz der Geschwindigkeitstestergebnisse.

2. Bevorzugen Sie Shopify image_tag für themeneigene Bilder

Verwenden Sie für in Shopify gespeicherte Bilder die Bildpipeline von Liquid anstelle von rohen CDN-URLs. Es hilft bei der Generierung reaktionsfähiger Quellen und hält das Bild im CDN-Verhalten von Shopify. Der Schlüssel besteht darin, Markup zu rendern, das dem Browser eine stabile Box verleiht.

<!-- Product card image -->
&lbrace;&lbrace; product.featured_image
  | image_url: width: 700
  | image_tag:
    widths: '350, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    loading: 'lazy',
    alt: product.featured_image.alt
&rbrace;&rbrace;

3. Dimensionen zu rohen IMG-Tags hinzufügen

Wenn ein benutzerdefinierter Abschnitt ein Raw verwenden muss Bild -Tag, fügen Sie Breiten- und Höhenattribute hinzu, die dem intrinsischen Verhältnis des Bildes entsprechen. CSS kann das Bild weiterhin responsive machen. Die Attribute definieren das Verhältnis; CSS definiert, wie es skaliert.

<img
  src="&lbrace;&lbrace; section.settings.badge | image_url: width: 480 &rbrace;&rbrace;"
  width="480"
  height="320"
  loading="lazy"
  decoding="async"
  alt="&lbrace;&lbrace; section.settings.badge.alt | escape &rbrace;&rbrace;"
  class="feature-badge"
>

.feature-badge {
  width: 100%;
  height: auto;
}

4. Reservieren Sie einen Steckplatz mit Seitenverhältnis für zugeschnittene Karten

Produktkarten, Kollektionskacheln, Lookbooks und redaktionelle Blöcke beschneiden häufig Bilder. Wenn Sie sich nicht auf die natürlichen Abmessungen des Bildes verlassen können, reservieren Sie einen stabilen Behälter mit Seitenverhältnis und beschneiden Sie das darin enthaltene Bild.

.product-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f5f5f5;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

5. Überprüfen Sie die App-Widgets und Seitenerstellungsblöcke

If the reported image comes from reviews, Instagram feeds, shoppable galleries, recommendations, or a page builder, the fix may live in app settings rather than theme files. Disable the block in a duplicated theme, retest, and confirm ownership before editing. The guides on Bewertungs-Widgets und Seitenersteller verlangsamen Shopify decken diesen Arbeitsablauf ab.

Manueller Fix vs. Thunder Fix

Was man nicht kaputt machen sollte

Codieren Sie keine Nur-Desktop-Abmessungen fest, die mobile Bilder verzerren. Responsive nicht entfernen Quelle beim Hinzufügen von Breite und Höhe. Erzwingen Sie nicht, dass alle Bilder das gleiche Verhältnis haben, wenn bei der Produktfotografie unterschiedliche Ausschnitte verwendet werden. Der Browser benötigt einen stabilen reservierten Bereich, Käufer benötigen jedoch weiterhin eine saubere Produktpräsentation.

Denken Sie auch an LCP. „Above-the-Fold“-Helden- und Produktbilder sollten in der Regel eifrig sein und hohe Priorität haben, während „Below-the-Fold“-Bilder faul sein können. Lesen Offscreen-Bilder auf Shopify verschieben und LCP-Optimierung wenn dieselbe Seite Bildprioritätswarnungen enthält.

So bestätigen Sie, dass die Shopify-Breiten- und Höhenkorrektur funktioniert hat

Erneuter Test mit PageSpeed Insights und dem kostenloser Shopify-Geschwindigkeitstest. Die Warnung sollte weniger Bilder auflisten oder verschwinden. CLS sollte in Felddaten unter 0,1 bleiben und die Seite sollte sich beim Laden über eine mobile Verbindung stabil anfühlen.

Für einen vollständigen geschäftsweiten Workflow verwenden Sie die vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung. Wenn Ihr Shop über viele ältere Abschnitte oder App-Widgets verfügt, vergleichen Sie die Automatisierungsoptionen im Bester Leitfaden für Shopify-Speed-Apps oder Rezension Thunder-Preise.

FAQ