Elementi immagine Shopify Larghezza e altezza mancanti: correggi l'avviso PageSpeed Gli elementi immagine

Perché Shopify riceve l'avviso di larghezza e altezza

Lighthouse contrassegna gli elementi dell'immagine senza larghezza e altezza esplicite perché il browser non può riservare con sicurezza lo spazio del layout durante il download dell'immagine. Se l'immagine appare e spinge testo, pulsanti, schede prodotto, recensioni o contenuti sotto la piega lungo la pagina, gli acquirenti vedono un salto. Google lo spiega nella guida alla stabilità del layout: immagini e video necessitano di dimensioni in modo che il browser possa allocare spazio prima che la risorsa termini il caricamento.

I temi di Shopify spesso iniziano in modo pulito e poi vanno alla deriva. Uno sviluppatore aggiunge un eroe personalizzato. Una sezione della pagina di destinazione codifica un'immagine. Un generatore di pagine inserisce un banner. Un'app di revisione inserisce le foto dei clienti. Un post del blog utilizza HTML non elaborato anziché il componente immagine del tema. Ognuno può creare lo stesso avviso PageSpeed.

Questo si sovrappone a Shopify Correzioni CLS, ottimizzazione dell'immaginee dimensionamento corretto delle immagini. La larghezza e l'altezza non riguardano la compressione del file. Si tratta di rendere il layout prevedibile.

Manuale passo passo: correzione degli elementi dell'immagine senza dimensioni

1. Trova le immagini esatte riportate da Lighthouse

Esegui PageSpeed Insights sulla home page, su una pagina di prodotto e su una pagina di collezione. Apri il controllo "Gli elementi dell'immagine non hanno larghezza e altezza esplicite" e copia gli URL delle immagini. Quindi cerca nel tema il nome del file, il nome della sezione, il blocco dell'app o lo snippet che lo esegue il rendering.

Utilizza gli stessi URL durante i test. Le esecuzioni di PageSpeed variano, quindi mantieni un processo stabile prima e dopo l'utilizzo la guida alla varianza del punteggio del test di velocità.

2. Preferisci Shopify image_tag per le immagini di proprietà del tema

Per le immagini archiviate in Shopify, utilizza la pipeline di immagini di Liquid anziché gli URL CDN non elaborati. Aiuta a generare fonti reattive e mantiene l'immagine all'interno del comportamento CDN di Shopify. La chiave è rendere il markup che dia al browser una scatola stabile.

<!-- 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. Aggiungi dimensioni ai tag img grezzi

Se una sezione personalizzata deve utilizzare un file raw img Tag , aggiungi attributi di larghezza e altezza che corrispondono al rapporto intrinseco dell'immagine. I CSS possono comunque rendere l'immagine reattiva. Gli attributi definiscono il rapporto; I CSS definiscono il modo in cui si ridimensiona.

<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. Prenota uno slot con proporzioni per le carte ritagliate

Schede prodotto, riquadri di collezione, lookbook e blocchi editoriali spesso ritagliano le immagini. Se non puoi fare affidamento sulle dimensioni naturali dell'immagine, prenota un contenitore stabile con Proporzioni e ritaglia l'immagine al suo interno.

.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. Controlla i widget dell'app e i blocchi del generatore di pagine

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 widget di revisione e page builder che rallentano Shopify copre quel flusso di lavoro.

Correzione manuale vs. Correzione Thunder

Cosa non rompere

Non codificare le dimensioni solo per desktop che distorcono le immagini mobili. Non rimuovere il responsivo srcset aggiungendo larghezza e altezza. Non forzare tutte le immagini nello stesso rapporto se la fotografia del prodotto utilizza ritagli diversi. Il browser ha bisogno di un'area riservata stabile, ma gli acquirenti hanno comunque bisogno di una presentazione del prodotto pulita.

Tieni presente anche LCP. Le immagini degli eroi e dei prodotti Above-the-fold dovrebbero solitamente essere entusiastiche e ad alta priorità, mentre le immagini Below-the-fold possono essere pigre. Leggi rinvia le immagini fuori schermo su Shopify e Ottimizzazione LCP se la stessa pagina presenta avvisi di priorità dell'immagine.

Come verificare che la correzione della larghezza e dell'altezza di Shopify abbia funzionato

Ripeti il test con PageSpeed Insights e il Test di velocità Shopify gratuito. L'avviso dovrebbe elencare meno immagini o scomparire. Il CLS dovrebbe rimanere inferiore a 0,1 nei dati sul campo e la pagina dovrebbe risultare stabile durante il caricamento su una connessione mobile.

Per un flusso di lavoro completo in tutto il negozio, utilizzare il file guida completa all'ottimizzazione della velocità di Shopify. Se il tuo negozio ha molte sezioni legacy o widget di app, confronta le opzioni di automazione nel migliore guida alle app veloci di Shopify o revisione Prezzi tempestosi.

FAQ