Lezione 7: Peso, prestazioni e chi resta fuori

Obiettivi della lezione

Un sito 3D che gira bene sul portatile di chi l'ha fatto non vuol dire niente: quello è il dispositivo migliore che toccherà mai quella pagina. Questa lezione serve a misurare sul serio e a mettere online una cosa che regge anche fuori dal tuo studio.

Finita questa lezione, e con lei il corso, sai:

• Leggere i tre numeri che contano: fotogrammi, chiamate di disegno, peso scaricato;
• Alleggerire un modello e delle texture senza rifarli;
• Caricare la scena in ritardo, così non entra nel primo disegno della pagina;
• Servire chi non può o non vuole vedere il 3D;
• Passare la checklist prima di pubblicare.

I tre numeri

I fotogrammi al secondo. Si guardano nel pannello delle prestazioni del browser, mentre si scorre. Il bersaglio è 60 stabile: più dei numeri conta la regolarità, perché un 60 che ogni tanto cade a 30 si sente peggio di un 40 costante.

Le chiamate di disegno. Three.js te le dice da solo, e sono il numero che spiega quasi tutti i rallentamenti.

console.log(renderer.info.render.calls);     // chiamate per fotogramma
console.log(renderer.info.render.triangles); // triangoli disegnati
console.log(renderer.info.memory.geometries, renderer.info.memory.textures);

Un ordine di grandezza per orientarsi: sotto le 100 chiamate stai tranquillo, fra 100 e 300 sei nella norma di una scena ricca, sopra le 500 su un telefono comincia a sentirsi. E il numero scende unendo oggetti che condividono lo stesso materiale, perché una chiamata disegna un materiale per volta.

Il peso scaricato. Scheda Rete, cache vuota, e si guarda il totale. Per una pagina con un oggetto, sotto i 2 MB è un buon posto dove stare; sopra i 5 si comincia a perdere gente prima ancora che la scena compaia.

Alleggerire quello che pesa

Il peso sta in due posti soli, e il codice non è nessuno dei due.

Il modello

Il formato per il web è glTF, nella sua forma compatta .glb. Se ti arriva un OBJ, un FBX o roba da CAD, la prima cosa da fare è convertirlo. Poi ci sono due compressioni che si sommano: Draco per i vertici e meshopt, che stringono un modello di parecchie volte senza che si veda la differenza. Si applicano con gli strumenti a riga di comando dell'ecosistema glTF, e in Three si caricano attivando il decodificatore corrispondente.

La cosa che rende di più, però, viene prima: guardare quanti triangoli ha il modello. Un oggetto che in pagina sarà grande 500 pixel non ha bisogno di 900.000 triangoli, e quel numero nei modelli che arrivano dai reparti tecnici è la regola.

Le texture

Un JPG da 2048 pesa poco da scaricare e tanto in memoria, perché sulla scheda grafica sta decompresso. Il formato giusto è KTX2 con compressione Basis, che resta compresso anche nella GPU e taglia la memoria di parecchie volte. Prima ancora: guarda se ti serve quella misura. Su un oggetto piccolo in pagina, 1024 è spesso indistinguibile da 2048 e costa un quarto.

Caricare la scena dopo

Il 3D non deve entrare nel primo disegno della pagina. Se il titolo compare dopo che sono arrivati tre megabyte di modello, hai peggiorato la metrica che Google guarda per prima e hai fatto aspettare una persona per una cosa che voleva vedere dopo.

const osservatore = new IntersectionObserver((voci) => {
  for (const v of voci) {
    if (!v.isIntersecting) continue;
    osservatore.disconnect();
    import('./scena.js').then(m => m.avvia());   // il codice arriva adesso
  }
}, { rootMargin: '200px' });                      // un po' prima di arrivarci

osservatore.observe(document.querySelector('#vista'));

Due guadagni in una volta: la pagina si apre alla velocità di una pagina normale, e chi non scende mai fin lì non scarica niente. Il rootMargin fa partire il caricamento duecento pixel prima, così quando ci arrivi la scena c'è già.

Chi resta fuori, e come si serve

• Chi ha chiesto meno movimento. Con prefers-reduced-motion la scena non si muove: la mostri ferma in una posa buona, oppure metti l'immagine di scorta. Il contenuto resta identico.
• Chi non ha WebGL. Il controllo della Lezione 6, e dietro al canvas un'immagine vera con il suo alt.
• Chi naviga da tastiera o con un lettore di schermo. Un canvas non è raggiungibile e non dice niente: se dentro c'è qualcosa di interattivo, quella funzione deve esistere anche fuori, come pulsante o come elenco.
• Chi ha la batteria al 12%. Il disegno a richiesta della Lezione 6, più la pausa quando il canvas esce dallo schermo.

Sono quattro casi che capitano ogni giorno sullo stesso sito, e tutti e quattro si servono con del codice che hai già scritto nelle lezioni precedenti.

La checklist prima di pubblicare

• La pagina si legge tutta con JavaScript disattivato
• Con WebGL spento resta un'immagine sensata, non un buco
• Con «riduci animazioni» acceso non si muove niente e si capisce tutto
• Il peso totale a cache vuota sta sotto la soglia che ti sei dato
• La scena si carica dopo, e non entra nel primo disegno
• Da ferma la pagina non ridisegna
• setPixelRatio è limitato
• Provata su un telefono vero, non solo nel simulatore del browser
• Le chiamate di disegno sono un numero che conosci
• I markers di ScrollTrigger sono spenti

Laboratorio: misura e metti online

Obiettivo: il tuo progetto misurato, alleggerito e passato per la checklist.

Consegna

1. Prendi i tre numeri di partenza: fotogrammi mentre scorri, renderer.info.render.calls, peso totale a cache vuota. Scrivili.
2. Guarda i triangoli del tuo modello e decidi se sono troppi per la misura che ha in pagina.
3. Alleggerisci: converti in .glb, prova una compressione, e dimezza la misura delle texture. Riprendi i tre numeri.
4. Sposta il caricamento dentro a un IntersectionObserver e guarda il tempo del primo disegno prima e dopo.
5. Passa la checklist voce per voce, comprese le tre prove spegnendo cose.
6. Apri la pagina su un telefono vero e guarda i fotogrammi e la temperatura dopo due minuti.
7. Scrivi il verdetto in tre righe: che cosa hai guadagnato, che cosa resta da fare, e se il 3D vale ancora il suo prezzo.

Mini-test finale

Sezione A: risposta multipla

1. Il peso di una pagina 3D lo fanno soprattutto:
   a) le librerie   b) modelli e texture   c) il CSS   d) gli shader
2. Il formato dei modelli per il web è:
   a) OBJ   b) glTF, in forma .glb   c) FBX   d) STL
3. KTX2 con Basis serve perché:
   a) si scarica prima   b) resta compresso anche nella memoria della scheda grafica   c) ha più colori   d) lo vuole Three.js
4. Le chiamate di disegno si leggono in:
   a) scena.children   b) renderer.info.render.calls   c) camera.info   d) console.time
5. Con scrub l'ease (Lezione 3):
   a) va messo out   b) va tolto   c) è obbligatorio   d) dipende
6. Un metallo senza ambiente (Lezione 5) appare:
   a) bianco   b) scuro   c) trasparente   d) verde
7. Caricare la scena con IntersectionObserver serve a:
   a) fare le ombre   b) non farla entrare nel primo disegno della pagina   c) risparmiare triangoli   d) supportare i lettori di schermo
8. Se il messaggio della pagina sta solo dentro al canvas:
   a) va bene   b) per i motori di ricerca quella pagina è vuota   c) serve un sitemap   d) si risolve col tone mapping

Sezione B: risposta aperta

9. (3 punti) Racconta il tuo progetto dall'inizio: che cosa doveva far capire, quale delle tre cose è diventato, che cosa hai misurato prima e dopo.
10. (3 punti) Un cliente vuole la homepage con una scena a schermo intero che parte subito. Scrivi le tre obiezioni che gli faresti e che cosa proporresti al suo posto.

Riassunto del corso