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 -->
{{ 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
}}

3. Dimensionen zu rohen IMG-Tags hinzufügen

Wenn Sie in einem benutzerdefinierten Abschnitt ein img-Tag direkt verwenden müssen, geben Sie Breiten- und Höhenattribute an, die dem natürlichen Seitenverhältnis des Bildes entsprechen. CSS kann das Bild weiterhin responsiv skalieren. Die Attribute legen das Seitenverhältnis fest; CSS bestimmt die Skalierung.

<img
  src="{{ section.settings.badge | image_url: width: 480 }}"
  width="480"
  height="320"
  loading="lazy"
  decoding="async"
  alt="{{ section.settings.badge.alt | escape }}"
  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 aspect-ratio 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

Wenn das gemeldete Bild aus Bewertungen, Instagram-Feeds, Shoppable Galleries, Empfehlungen oder einem Seitenersteller stammt, kann die Lösung in den App-Einstellungen und nicht in den Theme-Dateien liegen. Deaktivieren Sie den Block in einem duplizierten Theme, testen Sie erneut und bestätigen Sie den Besitz, bevor Sie Änderungen vornehmen. Die Anleitungen zu Bewertungs-Widgets und Seitenersteller verlangsamen Shopify decken diesen Arbeitsablauf ab.

Manueller Fix vs. Thunder Fix

Was man nicht kaputt machen sollte

Legen Sie keine Abmessungen fest, die nur für Desktop-Geräte passen und mobile Bilder verzerren. Entfernen Sie beim Hinzufügen von Breite und Höhe nicht das responsive Attribut srcset. Erzwingen Sie nicht für alle Bilder dasselbe Seitenverhältnis, wenn die Produktfotos unterschiedliche Zuschnitte verwenden. Der Browser benötigt einen stabil reservierten Bereich, Käufer benötigen jedoch weiterhin eine saubere Produktdarstellung.

Denken Sie auch an LCP. Hero- und Produktbilder oberhalb des sichtbaren Bereichs sollten in der Regel sofort mit loading="eager" und hoher Priorität geladen werden, während Bilder unterhalb des sichtbaren Bereichs mit loading="lazy" verzögert geladen werden können. Lesen Sie Offscreen-Bilder auf Shopify verzögert laden und LCP-Optimierung, wenn dieselbe Seite Warnungen zur Bildpriorität 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