Zurück zum Blog

Progressive Enhancement mit JavaScript: Ein Leitfaden für KMU

03. September 2026 Essentials
BM B&D Medien Autor
Vivid, blurred close-up of colorful code on a screen, representing web development and programming.

Deine Website soll Anfragen bringen. Dafür muss sie bei jedem Besucher funktionieren, auch wenn der Browser alt ist, das Netz im Ries gerade schwächelt oder ein Werbeblocker dazwischenfunkt. Genau darum geht es bei Progressive Enhancement. Nach diesem Artikel weißt du, was der Begriff bedeutet, warum er für deinen Betrieb Geld wert ist und welche Fragen du deiner Agentur stellen solltest.

Was Progressive Enhancement bedeutet

Progressive Enhancement ist eine Bauweise für Websites. Übersetzt heißt es „schrittweise Verbesserung“. Die Idee: Die Seite wird zuerst so gebaut, dass Inhalt und Grundfunktionen mit reinem HTML laufen. HTML ist die Grundstruktur jeder Webseite, also Texte, Bilder, Links und Formulare. Erst danach kommt CSS für das Aussehen dazu, und zum Schluss JavaScript für Komfort wie animierte Menüs, Bildergalerien oder eine Live-Suche.

Das Mozilla Developer Network beschreibt das Prinzip so: Eine Basis aus wesentlichen Inhalten und Funktionen wird möglichst vielen Nutzern bereitgestellt, während moderne Browser zusätzlich das bestmögliche Erlebnis bekommen. Die Definition von Progressive Enhancement bei MDN ist kurz und auf Deutsch, wenn du sie nachlesen willst.

Für dich als Auftraggeber heißt das: Der Kern deiner Seite, also Leistungen, Öffnungszeiten, Telefonnummer und Kontaktformular, hängt nicht davon ab, ob JavaScript läuft. JavaScript macht die Seite schöner und bequemer. Es darf sie aber nie kaputt machen.

Warum das für kleine Betriebe wichtig ist

Viele denken: „Jeder hat doch heute einen modernen Browser mit JavaScript.“ Stimmt meistens. Aber das Skript muss nicht nur vorhanden sein, es muss auch fehlerfrei ankommen und ausgeführt werden. Und das klappt öfter nicht, als man glaubt.

Der britische Government Digital Service hat in seinem Leitfaden zu Progressive Enhancement zusammengetragen, woran JavaScript im Alltag scheitert. Dazu gehören:

  • Kurze Netzwerkfehler, etwa im Zug oder auf der Baustelle mit schwachem Empfang
  • Werbeblocker und andere Browser-Erweiterungen, die Skripte blockieren
  • Firmen-Firewalls, die bestimmte Inhalte aussperren
  • Ein Skript eines Drittanbieters, das einen Fehler wirft und den Rest mitreißt
  • Browser-Updates, die alten Code plötzlich nicht mehr verstehen

Jeder dieser Fälle betrifft nur einen kleinen Teil deiner Besucher. Zusammen sind sie aber nicht null. Wenn dein Kontaktformular nur mit JavaScript abschickt, geht genau bei diesen Leuten die Anfrage verloren. Du erfährst nie davon, denn der Besucher meldet sich nicht, er geht zum nächsten Betrieb.

Aus unserer Erfahrung bei Kundenprojekten ist der häufigste Fall nicht der alte Browser, sondern das kaputte Skript: Ein Plugin wird aktualisiert, ein zweites verträgt sich nicht damit, und plötzlich öffnet das Menü auf dem Handy nicht mehr. Bei einer Seite, die nach Progressive Enhancement gebaut ist, bleibt das Menü als einfache Linkliste trotzdem bedienbar. Bei einer Seite, die komplett auf JavaScript aufbaut, steht der Besucher vor einer leeren Fläche.

Progressive Enhancement und Google

Es gibt noch einen zweiten Grund, und der betrifft deine Sichtbarkeit. Google kann JavaScript ausführen, aber nicht sofort und nicht immer vollständig. In den Grundlagen zu JavaScript-SEO beschreibt Google drei Schritte: Crawlen, Rendern, Indexieren. Das Rendern, also das Ausführen der Skripte, passiert in einer eigenen Warteschlange und kann sich verzögern.

Google empfiehlt in demselben Dokument ausdrücklich serverseitiges Rendering oder Pre-Rendering, weil die Seite dadurch für Nutzer und Crawler schneller wird. Übersetzt: Wenn dein Text schon im HTML steht, kann Google ihn sofort lesen. Wenn der Text erst per JavaScript nachgeladen wird, muss Google erst rendern, und das dauert oder klappt im schlechtesten Fall gar nicht.

Für einen Handwerksbetrieb in Donauwörth, der bei „Dachdecker Donauwörth“ gefunden werden will, ist das keine Nebensache. Die Leistungsbeschreibung, die Adresse und die Referenzen müssen im HTML stehen, nicht in einem Skript. Wie lokale Rankings sonst noch funktionieren, steht in unserem Artikel zu lokalem SEO im Donau-Ries.

Wie eine Seite nach diesem Prinzip aufgebaut ist

Du musst nicht programmieren können, um das Prinzip zu verstehen. Hier sind vier typische Bausteine und wie sie mit und ohne JavaScript funktionieren.

Das Kontaktformular

Ohne JavaScript: Das Formular ist ein normales HTML-Formular. Beim Absenden lädt die Seite neu und zeigt eine Bestätigung. Das ist nicht elegant, aber es funktioniert seit über 25 Jahren in jedem Browser.

Mit JavaScript: Die Eingaben werden schon beim Tippen geprüft, das Absenden läuft ohne Neuladen, und eine freundliche Meldung erscheint direkt im Formular.

Der Unterschied: Beides führt zur Anfrage in deinem Postfach. Nur der Weg ist unterschiedlich bequem.

Das Menü auf dem Handy

Ohne JavaScript: Die Navigation ist eine Liste von Links, die sichtbar auf der Seite steht oder sich mit reinem CSS aufklappen lässt.

Mit JavaScript: Ein Burger-Icon öffnet das Menü mit sanfter Animation, das Menü schließt sich beim Klick daneben.

Die Bildergalerie

Ohne JavaScript: Alle Bilder stehen untereinander auf der Seite. Jedes Bild ist ein Link zur großen Version.

Mit JavaScript: Die Bilder liegen in einem Slider, ein Klick öffnet eine Lightbox mit Pfeilen zum Blättern.

Die Karte zum Standort

Ohne JavaScript: Die Adresse steht als Text auf der Seite, dazu ein Link zu Google Maps.

Mit JavaScript: Eine eingebettete Karte zeigt deinen Betrieb direkt an.

Der Punkt bei allen vier Beispielen: Die Version ohne JavaScript ist nicht die Notlösung, sondern das Fundament. JavaScript kommt oben drauf. Fällt es weg, bleibt das Fundament stehen.

Was das mit Ladezeit und Barrierefreiheit zu tun hat

Progressive Enhancement hat zwei Nebeneffekte, die du nicht bestellst, aber gratis bekommst.

Erstens: weniger JavaScript. Wer nach diesem Prinzip baut, lädt nur die Skripte, die wirklich etwas verbessern. Das hält die Seite schnell. Google erklärt auf web.dev zu langen Tasks, dass JavaScript im Browser auf einem einzigen Hauptstrang läuft und jede Aufgabe über 50 Millisekunden als „lange Aufgabe“ gilt, die Nutzereingaben blockiert. Weniger Skript bedeutet weniger solcher Blockaden. Für den Besucher heißt das: Die Seite reagiert sofort auf Tippen und Scrollen.

Zweitens: bessere Zugänglichkeit. Screenreader, Tastaturbedienung und Vergrößerungssoftware kommen mit sauberem HTML am besten zurecht. Eine Seite, die im Kern aus gutem HTML besteht, ist schon ein gutes Stück barrierefrei, bevor jemand extra daran arbeitet. Was Barrierefreiheit für Unternehmen bedeutet und wo sie Pflicht ist, erklären wir auf unserer Seite zu Barrierefreiheit im Web.

So prüfst du deine eigene Website in fünf Minuten

Du brauchst dafür keinen Entwickler. In Chrome geht es so:

  1. Öffne deine Website.
  2. Drücke F12 oder rechte Maustaste und „Untersuchen“. Es öffnen sich die Entwicklertools.
  3. Drücke Strg+Umschalt+P, auf dem Mac Cmd+Umschalt+P. Tippe „JavaScript“ und wähle „JavaScript deaktivieren“.
  4. Lade die Seite neu.

Jetzt schaust du dir vier Dinge an:

  • Siehst du deine Texte und Leistungen? Oder ist die Seite leer oder zeigt nur einen Ladekreis?
  • Kannst du das Menü bedienen und zu jeder Unterseite kommen?
  • Kannst du das Kontaktformular ausfüllen und abschicken?
  • Steht deine Telefonnummer als klickbarer Link auf der Seite?

Wenn du alle vier Fragen mit Ja beantwortest, ist deine Seite gut gebaut. Wenn nicht, weißt du jetzt, wo Anfragen verloren gehen können. Weitere Prüfpunkte findest du in unserer Website-Checkliste 2026.

Vergiss nicht, JavaScript danach wieder einzuschalten.

Was du deine Agentur fragen solltest

Wenn du eine neue Website beauftragst oder eine bestehende überarbeiten lässt, reichen drei Fragen:

„Funktioniert das Kontaktformular auch ohne JavaScript?“ Die Antwort sollte ein klares Ja sein. Wenn die Agentur zögert oder erklärt, dass das heute niemand mehr braucht, ist das ein Warnsignal.

„Stehen alle Texte im HTML, oder werden sie nachgeladen?“ Bei einer klassischen WordPress-Seite ist das automatisch so. Bei manchen modernen Baukästen und App-ähnlichen Seiten nicht. Warum wir aus genau diesem Grund auf WordPress setzen, steht in unserem Artikel zu WordPress für lokale Unternehmen.

„Welche Plugins laden JavaScript, und was passiert, wenn eines davon ausfällt?“ Diese Frage zeigt, ob die Agentur ihre eigenen Abhängigkeiten kennt. Je weniger Plugins, desto weniger kann brechen.

Das Prinzip ist nicht teurer. Es verlangt nur, dass die Reihenfolge beim Bauen stimmt: erst Inhalt, dann Gestaltung, dann Komfort. So planen wir unsere Websites für Betriebe im Donau-Ries von Anfang an.

Fazit

Progressive Enhancement bedeutet, dass deine Website zuerst mit reinem HTML funktioniert und JavaScript nur als Verbesserung obendrauf kommt. Das schützt dich vor Anfragen, die im Werbeblocker, im Funkloch oder in einem fehlerhaften Plugin verschwinden. Es hilft Google, deine Inhalte sofort zu lesen. Und es macht die Seite schneller und zugänglicher, ohne dass du das extra bezahlst. Der Fünf-Minuten-Test oben zeigt dir, wo deine Seite steht.

Wenn deine Seite den Test nicht besteht oder du eine neue planst, sprich mit uns. Wir schauen uns deine Seite an und sagen dir ehrlich, was nötig ist und was nicht.

FAQ

Muss ich als Betrieb selbst etwas dafür tun?

Nein. Progressive Enhancement ist eine Entscheidung beim Bau der Website, nicht bei der Pflege. Du solltest es beim Auftrag ansprechen und mit dem Fünf-Minuten-Test kontrollieren. Den Rest erledigt die Agentur.

Ist eine Website ohne JavaScript nicht altmodisch?

Es geht nicht um „ohne JavaScript“, sondern um „auch ohne JavaScript“. Die Seite darf alle modernen Komfortfunktionen haben. Sie darf nur nicht davon abhängen. Die Besucher mit funktionierendem Browser merken keinen Unterschied.

Gilt das auch für meine bestehende WordPress-Seite?

Ja, und oft ist die Grundlage schon da, weil WordPress Inhalte serverseitig als HTML ausliefert. Probleme entstehen meist durch Page-Builder und Plugins, die Menüs, Formulare oder Inhalte per Skript nachbauen. Der Test zeigt dir schnell, ob das bei dir der Fall ist.

Kostet eine Website nach diesem Prinzip mehr?

Beim Neubau in der Regel nicht, weil es nur die Reihenfolge der Arbeit betrifft. Ein nachträglicher Umbau kann Aufwand bedeuten, je nachdem, wie stark die Seite von Skripten abhängt. Was eine Website bei uns kostet, steht offen auf unserer Preisseite.

Quelle: https://alistapart.com/article/progressiveenhancementwithjavascript/

WordPress Cookie Plugin von Real Cookie Banner