Caricamento Lazy del Player

2 min read

Il player audio viene caricato in modalità lazy per impostazione predefinita. Non carica JavaScript o CSS finché il visitatore non scorre vicino ad esso. Questo mantiene veloce il Largest Contentful Paint (LCP) della pagina.

Cosa fa il caricamento lazy

  • Al caricamento della pagina, viene visualizzato un piccolo segnaposto nella posizione del player
  • JavaScript e CSS del player completo NON vengono ancora caricati
  • Quando il visitatore scorre entro 500px dal player, il player completo si carica e sostituisce il segnaposto
  • La transizione è visivamente fluida (di solito meno di 100 ms)

Perché aiuta i Core Web Vitals

Senza il caricamento lazy, ogni pagina con un player paga il costo del JS e CSS del player al caricamento iniziale. Con il caricamento lazy:

  • LCP: invariato - il player non si trova nel contenuto above-the-fold
  • INP: invariato - nessun JS pesante viene eseguito al caricamento
  • CLS: invariato - il segnaposto ha la stessa altezza del player finale

Quando disattivarlo

Il caricamento lazy è attivo per impostazione predefinita. Disattivalo se:

  • Il tuo player è sempre above-the-fold (raro)
  • Usi l'autoplay e vuoi che il player sia pronto immediatamente (molto raro)
  • Vuoi testare senza caricamento lazy per il debug

Come disattivarlo

  1. Vai su Testo in Voce - TTSWP → Avanzate.
  2. Imposta Caricamento lazy del player su disattivato.
  3. Salva.

Come funziona tecnicamente

  • Il plugin usa IntersectionObserver per rilevare quando il player entra nel campo visivo durante lo scorrimento
  • All'intersezione, carica dinamicamente il JS e il CSS necessari
  • Una volta caricati, gli script rimangono in cache nel browser per il resto della sessione

I browser senza IntersectionObserver (molto vecchi) tornano a caricare gli script al caricamento della pagina.

Casi limite noti

Player all'interno di un elemento nascosto

Se il tuo player si trova all'interno di una sezione con display: none (come una fisarmonica compressa), il caricamento lazy non si attiva finché la sezione non diventa visibile. Di solito questo è il comportamento desiderato - non ha senso caricare ciò che non viene mostrato.

Autoplay audio

Se imposti l'autoplay sul player e viene caricato in modalità lazy, non verrà riprodotto finché il visitatore non scorre fino ad esso. L'autoplay parte non appena il player si carica.

Pagine correlate