La filosofia PE: partire dall’HTML

Il Progressive Enhancement (PE) è la pratica di costruire un'esperienza utilizzabile con il solo HTML, per poi aggiungere il CSS per la presentazione e JavaScript per l'interattività. Ogni livello migliora quello precedente; nessuno è indispensabile per il funzionamento della pagina.

L'HTML è il livello più resiliente. Viene analizzato parzialmente anche quando è malformato, ignora i tag che non riconosce e funziona senza script o fogli di stile. Al contrario, l'assenza di un file CSS peggiora l'aspetto e un bundle JavaScript non funzionante può rendere inutilizzabile una pagina.

Contenuto (HTML), presentazione (CSS), comportamento (JS). Un pulsante di invio è un vero <button type="submit">: il modulo viene inviato anche se JavaScript non funziona. Il CSS lo rende più gradevole; JS può intercettare l'invio per usare AJAX, ma l'HTML sottostante garantisce l'azione.

Le reti si interrompono. Gli script non vengono caricati. Gli utenti disabilitano JS. Le connessioni lente scadono prima che arrivino i bundle. Una pagina PE si degrada in modo armonioso in ciascuna di queste situazioni: l'utente può comunque leggere, navigare e inviare moduli utilizzando il solo HTML.

Le pagine che visualizzano HTML utilizzabile prima del caricamento degli script ottengono un First Contentful Paint più rapido, un Time to Interactive inferiore e punteggi migliori nei Core Web Vitals. Il browser visualizza contenuti significativi senza attendere l'avvio di JS.

Gli elementi HTML reali includono già funzionalità di accessibilità. <button> può essere attivato da tastiera; <input type="email"> attiva la tastiera virtuale appropriata; gli screen reader annunciano <a> come un link. Il PE offre impostazioni predefinite accessibili senza costi aggiuntivi.

I crawler dei motori di ricerca preferiscono HTML che possano analizzare senza eseguire JavaScript. Le pagine realizzate con PE vengono indicizzate completamente senza esecuzione di JS; le pagine basate esclusivamente su SPA dipendono dal supporto del crawler per gli script e spesso perdono parte dei contenuti.

Le Single-Page App eseguono il rendering di tutto lato client e si rompono completamente quando JS non funziona. Il PE segue l'approccio opposto: il server produce HTML completo e JS aggiunge miglioramenti come il prefetching, gli aggiornamenti ottimistici o la modifica in linea, senza mai gestire da solo le funzionalità di base.

Remix, Server Components di Next.js, SvelteKit e Astro favoriscono tutti l'HTML renderizzato dal server con un miglioramento progressivo tramite JS. Scegliere uno di questi framework fa del PE il percorso più semplice.

Le interfacce altamente interattive, come gli editor collaborativi, le app di disegno e i giochi in tempo reale, non possono esistere in modo significativo senza JS. Il «fallback senza JS» per app di questo tipo potrebbe essere una modalità statica di sola lettura: meglio di niente, ma inevitabilmente limitata. Sia onesto sui compromessi.

«Prima faccia in modo che funzioni, poi lo renda gradevole e infine lo renda veloce.» Costruisca prima il modulo HTML e verifichi che funzioni con curl. Aggiunga il CSS per il layout. Aggiunga JS per la validazione in linea, gli aggiornamenti ottimistici o l'invio tramite AJAX. Ogni livello è facoltativo; il risultato combina un'esperienza eccellente per tutti.

Qual è la promessa fondamentale del Progressive Enhancement?

Il Progressive Enhancement parte da HTML semantico che funziona senza CSS o JS, quindi aggiunge il CSS per la presentazione e JS per l'interattività. Ogni livello è facoltativo; la pagina si degrada in modo armonioso in caso di guasti. Il PE offre vantaggi in termini di prestazioni, accessibilità, SEO e resilienza, al costo di un maggiore lavoro iniziale di progettazione per le app altamente interattive.