Simona Rosati: a composer's site where nothing loads until you press play

simonarosaticomposer.it presents the work of Simona Rosati, a composer, pianist and teacher: a short biography, a catalogue of pieces to listen to, the courses she teaches, and a way to get in touch. I built the site, and the footer says so. The music, the photographs and the words are hers.

What stands out about it is how little it asks of the browser. The music is the heaviest thing on the page, and almost nothing else is.

One page, two languages

Italian lives at the root and English under /en/, each page pointing at the other with hreflang, and a switch in the header to move between them.

The detail that’s easy to miss is that the anchors are translated too. The sections are #biografia, #brani, #corsi and #contatti in Italian, and #biography, #works, #courses and #contact in English, so a link copied out of one language doesn’t read like the wrong language in the other.

Music that loads when asked

The catalogue is nine pieces, each with a player and its credits: the performers and, where they apply, the conductor, the sound engineer and the publisher. Credits matter in this field, and listing them properly is part of presenting a composer’s work.

The works section: one card per piece, with its performers.

Each piece is a native <audio> element with preload="none", pointing at an MP3 on the same server. Nothing is downloaded until the visitor presses play. There is no SoundCloud, YouTube or Spotify embed, so no request goes to a third party before anyone asks for anything. The one video, a new orchestral project, loads only its metadata and a poster image until it’s played.

That’s the trade-off a native player makes against an embed. An embed is quicker to set up and brings someone else’s scripts, cookies and layout into the page. A native player is plainer, and the page stays entirely the owner’s.

Small by design

The page is about 15 kB of HTML, 2.6 kB over the wire once compressed. It has one stylesheet of 13 kB (3 kB compressed), and the fonts are the system’s own: no font file is downloaded. The only script is a single line that closes the mobile menu after you tap a link, and the menu itself is a native <details> element, so it works before any script does.

On a phone: the same page, with the navigation collapsed into a menu.

What costs real bandwidth is what should: the photographs. The audio costs nothing until it’s requested.

The courses section, with the call to book a consultation.

What it shows

A catalogue of nine pieces doesn’t need a framework running in the browser, a player library or an analytics script, and each of those would have made the page slower for the one thing a visitor comes to do, which is listen. Most of the work on a site like this is deciding what to leave out.