Die PE-Philosophie: Mit HTML beginnen

Progressive Enhancement (PE) bezeichnet den Ansatz, zunächst mit HTML allein eine nutzbare Oberfläche zu erstellen und anschließend CSS für die Darstellung sowie JavaScript für die Interaktivität hinzuzufügen. Jede Ebene erweitert die vorherige; keine ist erforderlich, damit die Seite funktioniert.

HTML ist die robusteste Ebene. Es wird auch bei fehlerhaftem Markup teilweise geparst, ignoriert unbekannte Tags und funktioniert ohne Skripte oder Stylesheets. Eine fehlende CSS-Datei beeinträchtigt dagegen die Darstellung, und ein fehlerhaftes JS-Bundle kann eine Seite unbenutzbar machen.

Inhalt (HTML), Darstellung (CSS), Verhalten (JS). Ein Absende-Button ist ein echtes <button type="submit"> – das Formular wird auch abgeschickt, wenn JS fehlschlägt. CSS sorgt für eine ansprechende Darstellung; JS kann das Absenden für AJAX abfangen, aber das zugrunde liegende HTML garantiert die Aktion.

Netzwerkverbindungen brechen ab. Skripte werden nicht geladen. Benutzer deaktivieren JS. Bei langsamen Verbindungen tritt ein Timeout auf, bevor die Bundles eintreffen. Eine PE-Seite verschlechtert sich in all diesen Fällen kontrolliert: Benutzer können mit HTML allein weiterhin lesen, navigieren und Formulare absenden.

Seiten, die bereits vor dem Laden der Skripte nutzbares HTML rendern, erreichen einen schnelleren First Contentful Paint, eine kürzere Time to Interactive und bessere Werte bei den Core Web Vitals. Der Browser zeigt bedeutungsvolle Inhalte an, ohne auf den Start von JS warten zu müssen.

Echte HTML-Elemente verfügen bereits über integrierte Barrierefreiheit. <button> kann per Tastatur aktiviert werden; <input type="email"> öffnet die passende virtuelle Tastatur; <a> wird von Screenreadern als Link angesagt. PE liefert standardmäßig und ohne zusätzlichen Aufwand eine barrierearme Grundlage.

Suchmaschinen-Crawler bevorzugen HTML, das sie ohne Ausführung von JavaScript parsen können. Mit PE erstellte Seiten werden vollständig indexiert, ohne dass JS ausgeführt werden muss; reine SPA-Seiten hängen von der Skriptunterstützung des Crawlers ab und übersehen häufig Inhalte.

Single-Page-Apps rendern alles clientseitig und fallen vollständig aus, wenn JS fehlschlägt. PE verfolgt den entgegengesetzten Ansatz: Der Server liefert vollständiges HTML aus, und JS ergänzt Funktionen wie Prefetching, optimistische Aktualisierungen oder Bearbeitung direkt auf der Seite, ohne jemals die grundlegende Funktionalität zu übernehmen.

Remix, Next.js Server Components, SvelteKit und Astro setzen alle auf serverseitig gerendertes HTML mit progressiver Erweiterung durch JavaScript. Wenn Sie ein solches Framework wählen, wird PE zum naheliegendsten Weg.

Hochgradig interaktive Oberflächen wie kollaborative Editoren, Zeichen-Apps oder Echtzeitspiele können ohne JS nicht sinnvoll existieren. Der „No-JS-Fallback“ solcher Apps besteht möglicherweise in einem statischen schreibgeschützten Modus – besser als nichts, aber zwangsläufig eingeschränkt. Seien Sie ehrlich, was diesen Zielkonflikt betrifft.

„Sorgen Sie zuerst dafür, dass es funktioniert, dann dafür, dass es gut aussieht, und anschließend dafür, dass es schnell ist.“ Erstellen Sie zuerst das HTML-Formular und überprüfen Sie mit curl, dass es funktioniert. Fügen Sie CSS für das Layout hinzu. Ergänzen Sie JS für Validierung direkt auf der Seite, optimistische Aktualisierungen oder das Absenden per AJAX. Jede Ebene ist optional; gemeinsam ergeben sie für alle eine hervorragende Nutzererfahrung.

Was ist das zentrale Versprechen von Progressive Enhancement?

Progressive Enhancement beginnt mit semantischem HTML, das ohne CSS oder JS funktioniert, und ergänzt anschließend CSS für die Darstellung sowie JS für die Interaktivität. Jede Ebene ist optional; bei Fehlern verschlechtert sich die Seite kontrolliert. PE bietet Vorteile bei Performance, Barrierefreiheit, SEO und Ausfallsicherheit – auf Kosten eines höheren Designaufwands zu Beginn bei hochgradig interaktiven Anwendungen.