TL;DR: una demo WebGL o WebAssembly non deve partire insieme alla pagina WordPress. Mostra una cover statica, crea l’iframe solo dopo il clic e lascia un fallback. La demo resta spettacolare; il sito, invece, resta usabile.

Il problema: la demo diventa il costo di tutti

Una città 3D costruita con caratteri ASCII mostra bene quanto può fare il browser: secondo l’analisi tecnica di Tom’s Hardware, il prototipo usa un modulo Rust WebAssembly da 283 KB, un renderer WebGL e due fallback. È un ottimo esperimento. Incorporato senza criterio in una pagina WordPress, però, inizializza motore, memoria e canvas anche per chi voleva soltanto leggere l’articolo.

Il punto non è se WebAssembly sia veloce. MDN lo descrive come un formato binario compatto, pensato per affiancare JavaScript nei carichi intensivi. Il costo iniziale esiste comunque. Su mobile può arrivare prima del valore.

La soluzione: click-to-load reale

Tratta la demo come un contenuto opzionale. Nel markup iniziale inserisci una cover WebP, una breve descrizione e un pulsante “Avvia la demo”. Conserva l’indirizzo dell’app in un attributo data-src. Solo dopo il clic, JavaScript crea l’iframe e assegna il suo src.

<div class="demo-shell" data-src="/demo/index.html">
  <button type="button">Avvia la demo 3D</button>
</div>

clic → crea iframe → assegna src → sostituisci la cover

loading="lazy" resta utile, e WordPress può aggiungerlo agli iframe dotati di sorgente e dimensioni. Ma non equivale a “carica solo dopo consenso”: se vuoi quel comportamento, il browser non deve ricevere il src prima del clic.

I passaggi essenziali

  1. Ospita la demo in una directory o origine separata dal tema, così aggiornamenti e cache non si pestano i piedi.
  2. Definisci larghezza, altezza e rapporto del contenitore per evitare salti di layout.
  3. Carica lo script con l’enqueue di WordPress, non incollarlo nell’editor. Il Theme Handbook consiglia il caricamento differito degli asset non necessari.
  4. Aggiungi un titolo accessibile all’iframe, gestione tastiera del pulsante e un link alternativo per aprire la demo in una nuova scheda.
  5. Misura la pagina prima e dopo: trasferimento iniziale, LCP e reattività devono restare stabili finché la demo non viene avviata.

L’errore da evitare

Non inserire un bundle trovato online dentro un blocco HTML e non concedere all’iframe più permessi del necessario. Isola il contenuto con sandbox, abilita soltanto le capacità richieste e verifica origine, dipendenze e policy CSP. La stessa disciplina vale per il codice generato con l’AI: prima definisci il contratto dell’output, come nella guida AI WordPress: blocca l’output.

Take finale

La performance non chiede di rinunciare alle esperienze ricche. Chiede di farle pagare solo a chi le usa. Per una PMI, una demo che parte al clic è quasi sempre più sensata di un effetto che rallenta ogni visita.

Fonti