Immagini Shopify senza larghezza e altezza esplicite: correggete l’avviso PageSpeed

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

Se una sezione personalizzata deve usare direttamente un tag img, aggiungi gli attributi di larghezza e altezza corrispondenti alle proporzioni naturali dell'immagine. Il CSS può comunque adattarla allo schermo. Gli attributi definiscono le proporzioni; il CSS determina come viene ridimensionata.

<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. 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 aspect-ratio 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

Se l'immagine segnalata proviene da recensioni, feed di Instagram, gallerie acquistabili, raccomandazioni o un page builder, la soluzione potrebbe trovarsi nelle impostazioni dell'app anziché nei file del tema. Disabilitate il blocco in un tema duplicato, ritestate e confermate la proprietà prima di modificare. Le guide su 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 il LCP. L’immagine hero o di prodotto sopra la piega dovrebbe solitamente caricarsi subito con loading="eager" e priorità alta, mentre le immagini sotto la piega possono essere caricate in modo differito con loading="lazy". Leggi come rinviare le immagini fuori schermo su Shopify e la guida all’ottimizzazione LCP se la stessa pagina presenta avvisi sulla priorità delle immagini.

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, utilizza la 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 nella guida alle migliori app per la velocità di Shopify o consulta i prezzi di Thunder.

FAQ