Simona Rosati: il sito di una compositrice in cui nulla si carica finché non premi play

simonarosaticomposer.it presenta il lavoro di Simona Rosati, compositrice, pianista e docente: una biografia breve, un catalogo di brani da ascoltare, i corsi che tiene e un modo per mettersi in contatto. Il sito l’ho realizzato io, e il piè di pagina lo dice. La musica, le fotografie e i testi sono suoi.

Quello che lo distingue è quanto poco chiede al browser. La musica è la cosa più pesante della pagina, e quasi nient’altro lo è.

Una pagina, due lingue

L’italiano sta alla radice e l’inglese sotto /en/, ogni pagina rimanda all’altra con hreflang, e un selettore nell’intestazione permette di passare dall’una all’altra.

Il dettaglio che si nota meno è che anche le ancore sono tradotte. Le sezioni sono #biografia, #brani, #corsi e #contatti in italiano, e #biography, #works, #courses e #contact in inglese, così un link copiato da una lingua non sembra sbagliato nell’altra.

Musica che si carica solo se richiesta

Il catalogo conta nove brani, ognuno con il suo player e i suoi crediti: gli esecutori e, dove servono, direttore, fonico ed editore. In questo ambiente i crediti contano, e elencarli come si deve fa parte del presentare il lavoro di una compositrice.

La sezione dei brani: una scheda per ogni pezzo, con i suoi esecutori.

Ogni brano è un elemento <audio> nativo con preload="none", che punta a un MP3 sullo stesso server. Non si scarica niente finché il visitatore non preme play. Non ci sono embed di SoundCloud, YouTube o Spotify, quindi nessuna richiesta parte verso terze parti prima che qualcuno chieda qualcosa. L’unico video, un nuovo progetto orchestrale, carica solo i metadati e un’immagine di anteprima finché non viene avviato.

È il compromesso che un player nativo fa rispetto a un embed. L’embed è più veloce da mettere su e porta nella pagina script, cookie e layout di qualcun altro. Il player nativo è più semplice, e la pagina resta interamente di chi la possiede.

Piccolo per costruzione

La pagina pesa circa 15 kB di HTML, 2,6 kB in rete una volta compressa. Ha un solo foglio di stile da 13 kB (3 kB compresso) e i font sono quelli del sistema: nessun file di font viene scaricato. L’unico script è una riga che chiude il menu mobile dopo il tocco su un link, e il menu stesso è un elemento <details> nativo, quindi funziona prima di qualsiasi script.

Su telefono: la stessa pagina, con la navigazione raccolta in un menu.

Quello che consuma banda davvero è ciò che deve: le fotografie. L’audio non costa nulla finché non viene richiesto.

La sezione dei corsi, con l’invito a prenotare una consulenza.

Cosa dimostra

Un catalogo di nove brani non ha bisogno di un framework che giri nel browser, di una libreria per i player o di uno script di analytics, e ognuna di queste cose avrebbe reso la pagina più lenta per l’unica cosa che un visitatore viene a fare: ascoltare. Gran parte del lavoro su un sito così sta nel decidere cosa lasciare fuori.