Was ist das Frontend?
Stell dir deine Website als Laden vor. Das Frontend ist der Verkaufsraum: Schaufenster, Regale, Kasse. Das Backend ist das Lager mit der Buchhaltung dahinter. Kunden sehen nur den Verkaufsraum — und urteilen danach.
Technisch ist das Frontend der Code, der im Browser des Besuchers läuft. Entwickler sagen auch „clientseitig“. Er besteht aus drei Bausteinen:
- HTML gibt die Struktur vor: Überschrift, Absatz, Bild, Formular.
- CSS bestimmt das Aussehen: Farben, Schriften, Abstände, Layout am Handy.
- JavaScript sorgt für Verhalten: Menüs, die aufklappen, Filter, Warenkorb ohne Neuladen.
So beschreibt es auch die Entwicklerdoku MDN von Mozilla: Client-Code kümmert sich vor allem um Aussehen und Verhalten der Seite, der Server-Code entscheidet, welche Daten überhaupt ausgeliefert werden.
Frontend, Backend und WordPress
Schicht
Was sie macht
Frontend
Zeigt Inhalte an, nimmt Klicks entgegen
Backend
Speichert Daten, rechnet, liefert aus
Full-Stack
Beides zusammen
Im WordPress-Alltag wird es verwirrend: Viele nennen den Admin-Bereich unter /wp-admin „Backend“ und die öffentliche Seite „Frontend“. Technisch ist auch das Admin-Menü eine Oberfläche im Browser. Für den Alltag reicht: Frontend ist, was deine Kunden sehen.
WordPress läuft laut W3Techs auf 39,2 % aller Websites (Stand November 2026). Dort bauen Theme und Page-Builder wie Elementor das Frontend. Wer also eine WordPress-Seite pflegt, gestaltet täglich Frontend, auch ohne eine Zeile Code.
Warum das Frontend über Umsatz entscheidet
Google misst die Qualität eines Frontends mit den Core Web Vitals. Als „gut“ gelten: der größte Inhalt ist nach höchstens 2,5 Sekunden da (LCP), die Seite reagiert auf Klicks in höchstens 200 Millisekunden (INP) und nichts springt beim Laden herum (CLS bis 0,1).
Viele Seiten schaffen das nicht. Laut Web Almanac 2024 von HTTP Archive bestehen am Handy nur 43 % der Websites alle drei Werte. Eine mittlere mobile Startseite wiegt 2,3 MB, davon rund 560 KB JavaScript.
Case A · Telekommunikation
Vodafone Italien: schneller sichtbar
−31 %
LCP (Ladezeit größter Inhalt)
+8 %
Verkäufe
Schnellere Seite im A/B-Test → 8 % mehr Verkäufe
Fallstudie von Google mit Vodafone, 2021. Die Leads pro Besuch stiegen um 15 %.
Case B · Reiseportal
redBus: Suchergebnisse reagieren schneller
~900 → ~360 ms
INP (Reaktionszeit)
+7 %
Umsatz
Erst 10 statt 30 Ergebnisse laden → 7 % mehr Umsatz
Fallstudie auf web.dev. Der Trick war simpel: weniger auf einmal laden.
Häufige Fehler
Fehler 1 · Frontend mit Design gleichsetzen
Ein Entwurf in Figma ist noch kein Frontend. Erst der Code entscheidet, ob die Seite am Handy schnell lädt und ob ein Screenreader die Buttons findet. Prüf die fertige Seite, nicht nur den Entwurf.
Fehler 2 · Plugins und Skripte stapeln
Slider, Chat-Widget, drei Tracking-Tools, Animationen: Jedes Teil lädt eigenes JavaScript. Am Ende wartet der Besucher auf Code, den er nie braucht. Frag bei jedem Skript: Bringt das mehr, als es bremst?
Fehler 3 · Barrierefreiheit vergessen
Laut Web Almanac 2024 haben nur 29 % der mobilen Seiten ausreichenden Farbkontrast, bei rund 15 % der Bilder fehlt der Alternativtext. Für Onlineshops ist das seit dem Barrierefreiheitsstärkungsgesetz auch eine Rechtsfrage. Ausgenommen sind Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. € Umsatz.
Fehler 4 · Nur am Desktop testen
Du baust am großen Bildschirm, deine Kunden kommen vom Handy. Schau jede Änderung auch am Smartphone an, am besten über mobiles Netz statt WLAN.
So prüfst du dein Frontend
- PageSpeed Insights von Google: Adresse eingeben, Handy-Werte ansehen. Grün ist das Ziel.
- Search Console, Bericht „Core Web Vitals“: zeigt, welche Seitentypen bei echten Besuchern schwächeln.
- Lighthouse in den Chrome-Entwicklertools: prüft Leistung, Barrierefreiheit und SEO auf einen Schlag.
- WAVE oder axe: finden fehlende Alternativtexte und schwache Kontraste.
- Selbsttest: Seite am Handy öffnen und versuchen, in 30 Sekunden zu kaufen oder anzufragen.
Häufige Fragen
Was ist der Unterschied zwischen Frontend und Backend?
Welche Sprachen braucht man fürs Frontend?
HTML, CSS und JavaScript. JavaScript nutzen laut W3Techs 98,9 % aller Websites im Browser. Darauf bauen Frameworks wie React oder Vue.js auf, mit denen größere Oberflächen entstehen.
Ist WordPress Frontend oder Backend?
Beides. WordPress speichert Inhalte in einer Datenbank und erzeugt daraus auf dem Server die Seiten — das ist Backend. Theme und Page-Builder bestimmen, wie die Seiten im Browser aussehen — das ist Frontend.
Beeinflusst das Frontend mein Google-Ranking?
Ja, über die Seitenerfahrung. Google misst mit den Core Web Vitals, wie schnell und stabil eine Seite lädt. Wichtiger als das Ranking ist aber oft der direkte Effekt: Ein schnelles Frontend verkauft besser.
Quellen
- MDN: Introduction to the server side
- MDN: Frontend developer course
- W3Techs: Verbreitung von WordPress
- web.dev: Web Vitals
- HTTP Archive: Web Almanac 2024, Performance
- HTTP Archive: Web Almanac 2024, Barrierefreiheit
- § 3 BFSG: Barrierefreiheitsanforderungen
- web.dev: Fallstudie Vodafone
- web.dev: Fallstudie redBus
