Pagine lente delle GIF animate di Shopify: utilizza i formati video

Perché le GIF animate danneggiano la velocità di Shopify

GIF è conveniente, ma è inefficiente per i moderni media delle vetrine. Una dimostrazione di prodotto in loop, una clip di movimento del tessuto, un'animazione prima e dopo o un banner di eroi possono diventare diversi megabyte come GIF. Il browser deve scaricarlo, decodificarlo ed eseguirne il rendering, gestendo anche l'immagine hero, i CSS, gli script, gli incorporamenti di app e i dati di prodotto.

La guida Lighthouse di Chrome consiglia formati video come MP4 o WebM per i contenuti animati perché le GIF di grandi dimensioni sprecano larghezza di banda rispetto ai video. La documentazione multimediale del prodotto Shopify supporta file GIF animati e WebP e le immagini dei prodotti possono essere di grandi dimensioni, ma il supporto non equivale alle prestazioni. Un negozio può caricare una GIF che funziona tecnicamente e comunque non superare i test di velocità mobile.

Il problema è più doloroso quando la GIF appare sopra la piega. Se la GIF diventa l'elemento visibile più grande, può influenzare LCP. Se viene caricato lower the fold ma si avvia immediatamente, può aggiungere un carico utile di rete non necessario. Se appare all'interno di un carosello di prodotti senza dimensioni stabili, può contribuire alla CLS. Usa il Guida all'ottimizzazione di Shopify LCP e guida alla consegna delle immagini se tali diagnostici appaiono insieme.

Quando conservare una GIF e quando sostituirla

Conserva una GIF solo quando è piccola, decorativa e non fa parte della prima schermata. Sostituiscilo quando si tratta di una demo di prodotto, di un banner a larghezza intera, di un loop di home page, di un'animazione di pagina di destinazione o di qualsiasi nome di file PageSpeed ​​nella diagnostica del contenuto animato.

Utilizza un'immagine statica quando il movimento non cambia la decisione di acquisto. Utilizza MP4 quando gli acquirenti devono comprendere movimento, scala, assemblaggio, struttura o vestibilità. Utilizza WebM come fonte aggiuntiva opzionale se il tuo flusso di lavoro lo supporta, ma mantieni MP4 per un'ampia compatibilità.

Manuale passo passo: sostituisci le GIF di Shopify con i video

1. Trova la GIF costosa

Esegui PageSpeed Insights, Chrome DevTools Network e il Test di velocità Shopify gratuito. Ordina le richieste di rete per dimensione e cerca .gif File . Controlla se la GIF è sopra la piega, all'interno di una galleria di prodotti, caricata da un generatore di pagine o iniettata da un'app.

2. Esporta l'animazione come MP4

Mantieni il video breve, disattivato, riproducibile in loop e ritagliato alla dimensione di visualizzazione esatta. Evita di esportare una clip di larghezza 1920px per una scheda prodotto di 420px. Un obiettivo pratico per il movimento dell'interfaccia utente del prodotto è spesso inferiore a 1 MB e più piccolo è meglio sui dispositivi mobili.

3. Utilizzare un'immagine poster e dimensioni stabili

L'immagine del poster fornisce al browser qualcosa di veloce da dipingere prima che il video venga caricato. Larghezza, altezza o proporzioni proteggono la stabilità del layout.

<video
  class="product-motion"
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  poster="{{ 'folding-demo-poster.jpg' | asset_url }}"
  width="900"
  height="900"
>
  <source src="{{ 'folding-demo.webm' | asset_url }}" type="video/webm">
  <source src="{{ 'folding-demo.mp4' | asset_url }}" type="video/mp4">
</video>

4. Movimento del carico pigro sotto la piega

Se il video non è visibile al primo rendering, evita una riproduzione impaziente. Utilizza prima un poster, quindi imposta la sorgente quando la sezione si avvicina alla finestra.

const videos = document.querySelectorAll('video[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;

    const video = entry.target;
    video.src = video.dataset.src;
    video.load();
    observer.unobserve(video);
  });
}, { rootMargin: '300px' });

videos.forEach((video) => observer.observe(video));

5. Non riprodurre automaticamente tutti i video delle schede prodotto

Le pagine di raccolta con molte carte animate possono diventare pesanti rapidamente. Preferisci un'immagine statica del prodotto, quindi riproduci il movimento al passaggio del mouse o al tocco. Ciò protegge gli utenti mobili e mantiene reattivi i filtri di raccolta.

.product-motion {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #f3f4f6;
}

@media (prefers-reduced-motion: reduce) {
  .product-motion {
    display: none;
  }
}

6. Testare nuovamente LCP, peso della pagina e interazione

Dopo aver sostituito la GIF, riprova lo stesso URL. Dovresti vedere dimensioni di trasferimento inferiori e meno byte di immagini animate. Se la GIF era sopra la piega, confronta LCP. Se la pagina sembra ancora lenta, controlla enormi carichi utili di rete, velocità della pagina del prodottoe Ottimizzazione video di Shopify.

Correzione manuale vs. Correzione Thunder

Crea una regola multimediale migliore per il tuo negozio

Usa questa regola: prima l'immagine statica, il video quando il movimento aiuta la conversione, GIF solo quando il file è piccolo e non critico. Ciò mantiene ricca l'esperienza del prodotto senza costringere ogni visitatore mobile a scaricare pesanti animazioni prima di aver compreso l'offerta.

Per la sequenza di ottimizzazione completa, utilizzare il file guida completa all'ottimizzazione della velocità di Shopify, confronta le tue pagine ricche di contenuti multimediali con quelle Guida alla velocità per dispositivi mobili e desktope revisione Prezzi tempestosi se desideri l'ottimizzazione automatizzata prima della pulizia manuale dei supporti.

FAQ