Progetti — SULKO

Di cosa si tratta

Vetrina e primo contatto commerciale. Costruito con Vite e React, gira su Cloudflare Pages, e ha due vincoli che ne hanno guidato quasi ogni scelta: deve essere leggibile dai motori di ricerca pur essendo una SPA, e non deve caricare niente prima che l'utente abbia deciso sui cookie. Il primo problema è risolto sul bordo della rete, riscrivendo l'intestazione di ogni rotta prima che la pagina parta; il secondo con un banner ospitato nel bundle e i tag di analisi resi testo inerte finche' non arriva il consenso.

Funzionalità principali

Prestazioni e accessibilita'

Si animano solo transform e opacity: nessun ricalcolo del layout per fotogramma
Rispetto di prefers-reduced-motion su ogni animazione
Stati di focus visibili su ogni elemento interattivo

Conformita'

Privacy policy, cookie policy e termini di servizio, in due lingue
Tabella dei cookie verificata a mano su un browser vero
Modulo di contatto protetto da Cloudflare Turnstile

Problemi e soluzioni

Aprendo il sito da telefono capitava una schermata nera, senza nemmeno l'animazione di caricamento. Il banner dei cookie veniva inserito con document.write: uno script di terza parte che blocca la lettura dell'HTML, e finche' non risponde non esiste niente da disegnare.

SoluzioneScript creato e appeso invece che scritto nel flusso, quindi asincrono per definizione, più un sipario iniziale già presente nell'HTML. Misurato prima e dopo: il DOM passa da 522 a 331 millisecondi.

L'animazione di un pulsante sembrava impastata senza che si capisse perché. Dura trecento millisecondi: a occhio non si vede.

SoluzioneRallentata dieci volte e fotografata a intervalli. Il componente disegnava due volte la stessa parola e le incrociava in dissolvenza: a metà transizione si leggeva la stessa scritta sovrapposta a se' stessa. Riscritto con una sola etichetta.