Glossar

Begriffe

1) HTML

HTML ist die Auszeichnungssprache für Struktur und Bedeutung von Inhalten im Web. Überschriften, Absätze, Listen, Navigation und Formulare werden damit semantisch beschrieben. Sauberes HTML verbessert Verständlichkeit, Barrierefreiheit und technische Auswertbarkeit.

2) CSS

CSS steuert Darstellung und Layout. Gute CSS-Arbeit basiert auf wiederholbaren Regeln statt Einmal-Styles. Grid und Flexbox helfen, Layouts stabil zu halten, und saubere Zustände wie Fokus und Hover machen Bedienung verlässlich.

3) JavaScript

JavaScript bringt Interaktivität und Logik in die Seite. Sinnvoll eingesetzt ergänzt es HTML und CSS, ohne sie zu ersetzen. Weniger Abhängigkeiten, klare Events und robuste Fehlerfälle machen JavaScript wartbar und performanter.

4) DOM

Der DOM ist das Objektmodell der Seite im Browser. JavaScript liest und verändert den DOM, um Inhalte und Zustände zu steuern. Ein übermäßig komplexer DOM kann Rendering verlangsamen und Debugging unnötig schwer machen.

5) Semantisches HTML

Semantisches HTML nutzt passende Elemente für passende Inhalte, zum Beispiel nav, main, article oder section. Dadurch verstehen Screenreader und Suchmaschinen besser, was wichtig ist. Nebenbei wird CSS und Pflege oft einfacher.

6) Accessibility

Accessibility (Barrierefreiheit) bedeutet, dass Inhalte für möglichst viele Menschen nutzbar sind. Dazu gehören Tastaturbedienbarkeit, sinnvolle Fokusführung, Kontraste und Alternativtexte. Viele A11y-Probleme entstehen durch fehlende Struktur, nicht durch Design.

7) Responsive Design

Responsive Design passt Layout und Typografie an unterschiedliche Bildschirmgrößen an. Es geht nicht nur um Breakpoints, sondern um flexible Komponenten, sinnvolle Abstände und klare Prioritäten auf Mobile. Eine Seite kann „responsive“ sein und trotzdem unbenutzbar wirken.

8) Viewport

Der Viewport ist der sichtbare Bereich im Browser. Das Meta-Viewport-Tag sorgt dafür, dass mobile Browser Layouts nicht künstlich skalieren. Ohne korrekte Viewport-Einstellung wirkt eine Seite auf Smartphones häufig zu klein oder bricht.

9) Breakpoints

Breakpoints sind Schwellenwerte, ab denen sich Layout-Regeln ändern. Gute Breakpoints orientieren sich am Inhalt, nicht an Gerätemodellen. Zu viele Breakpoints können CSS unübersichtlich machen, zu wenige führen zu komischen Zwischenzuständen.

10) Flexbox

Flexbox ist ein CSS-Layoutmodell für eindimensionale Layouts, also Reihen oder Spalten. Es eignet sich gut für Navigationen, Buttons, Kartenreihen oder Alignment. Häufige Fehler sind überkomplizierte Verschachtelung und fehlende Basis-Constraints.

11) CSS Grid

CSS Grid ist für zweidimensionale Layouts gemacht, also Zeilen und Spalten gleichzeitig. Es macht komplexe Layouts planbar und reduziert Hacky-Konstruktionen. In Kombination mit klaren Komponenten bleibt Layout auch bei Content-Wachstum stabil.

12) Lazy Loading

Lazy Loading lädt Ressourcen erst, wenn sie gebraucht werden, typischerweise Bilder außerhalb des sichtbaren Bereichs. Das verbessert Startzeit und spart Datenvolumen. Wichtig ist, nicht den Above-the-fold-Bereich zu lazy-loaden, sonst leidet die wahrgenommene Geschwindigkeit.

13) LCP

Largest Contentful Paint misst, wann das größte sichtbare Element im Viewport gerendert ist. Schlechter LCP kommt oft durch große Bilder, späte Fonts oder Render-Blocking CSS/JS. Ziel ist eine schnelle, stabile erste Sichtbarkeit.

14) CLS

Cumulative Layout Shift misst Layout-Verschiebungen während des Ladens. Ursachen sind fehlende Größenangaben für Bilder, nachladende Fonts oder dynamische Banner. Guter CLS bedeutet: Inhalt bleibt stehen, Nutzer klicken nicht daneben.

15) INP

Interaction to Next Paint misst, wie schnell eine Seite auf Nutzeraktionen reagiert. Hohe INP-Werte entstehen durch lange JavaScript-Tasks, zu viel DOM-Arbeit oder teure Repaints. Ziel ist ein flüssiges, direktes Gefühl bei Klicks und Eingaben.

16) TTFB

Time To First Byte beschreibt, wie schnell der Server das erste Byte einer Antwort liefert. Schlechter TTFB kann Hosting, Datenbank, Cache oder Routing betreffen. Gute Serverantwortzeiten helfen allen weiteren Lade-Metriken.

17) Render Blocking

Render-Blocking Ressourcen verhindern, dass der Browser schnell etwas anzeigen kann, meist CSS oder synchrones JavaScript im Head. Die Seite wirkt dann leer, obwohl Daten schon unterwegs sind. Entschärfung: kritisches CSS, deferred JS, saubere Priorisierung.

18) Critical CSS

Critical CSS ist der minimale CSS-Teil, der für den sichtbaren Startbereich nötig ist. Wird er früh ausgeliefert, kann der Browser schneller rendern. Der Rest kann später nachgeladen werden, ohne dass es „unstyled“ aussieht.

19) Minification

Minification verkleinert Dateien, indem Leerzeichen, Kommentare und unnötige Zeichen entfernt werden. Das reduziert Transfergrößen, ändert aber nicht die Logik. Minify ist Standard, aber ersetzt keine inhaltliche Optimierung von Bildern oder Scripts.

20) Tree Shaking

Tree Shaking entfernt ungenutzten Code aus Bundles, wenn Module statisch analysierbar sind. Das kann große Einsparungen bringen, wenn Libraries nur teilweise genutzt werden. Es funktioniert nur zuverlässig, wenn Imports sauber sind und Build-Tools korrekt konfiguriert sind.

21) Preload

Preload gibt dem Browser einen Hinweis, dass eine Ressource früh gebraucht wird, etwa ein Hero-Bild oder eine Schriftdatei. Richtig eingesetzt verbessert es LCP. Falsch eingesetzt kann es Bandbreite verschwenden und andere wichtige Ressourcen verdrängen.

22) Prefetch

Prefetch lädt Ressourcen mit niedriger Priorität, die wahrscheinlich später gebraucht werden, zum Beispiel für die nächste Seite. Das kann Navigation schneller wirken lassen. Es sollte zurückhaltend genutzt werden, damit es nicht unnötig Daten zieht.

23) Caching

Caching speichert Antworten oder Assets zwischen, damit sie nicht jedes Mal neu geladen werden. Browser-Caching, Server-Caching und CDN-Caching sind unterschiedliche Ebenen. Gute Cache-Strategien brauchen Versionierung, sonst werden Updates schwer kontrollierbar.

24) CDN

Ein CDN verteilt statische Inhalte über viele Standorte, damit Nutzer Dateien von einem nahen Server laden. Das reduziert Latenz und kann Ausfallsicherheit erhöhen. CDN ist kein Allheilmittel, aber für Assets oft ein klarer Vorteil.

25) Brotli

Brotli ist ein Kompressionsverfahren für Textressourcen wie HTML, CSS und JavaScript. Es liefert oft bessere Kompressionsraten als Gzip, besonders bei modernen Assets. Voraussetzung ist Serverunterstützung und korrekte Content-Encoding-Auslieferung.

26) HTTP/2

HTTP/2 verbessert den Transport durch Multiplexing, Header-Kompression und effizientere Verbindungen. Dadurch werden viele kleine Requests weniger problematisch als früher. Trotzdem bleiben große Dateien und Render-Blocking weiterhin echte Performance-Killer.

27) HTTP/3

HTTP/3 basiert auf QUIC (UDP) und kann Verbindungsaufbau und Paketverluste besser handhaben. In mobilen Netzen kann das spürbar sein. Ob es hilft, hängt vom Setup, CDN und der Zielgruppe ab, es ist kein garantierter Boost.

28) TLS

TLS verschlüsselt Verbindungen (HTTPS) und schützt Datenübertragung vor Mitlesen und Manipulation. Moderne Browser erwarten HTTPS praktisch überall. Eine saubere TLS-Konfiguration beeinflusst auch Handshake-Zeit und damit den Start des Ladens.

29) 301 Redirect

Ein 301 Redirect ist eine dauerhafte Weiterleitung. Er wird genutzt, um URLs sauber umzuziehen oder www/non-www und HTTP/HTTPS zu vereinheitlichen. Ketten von Redirects machen Ladezeiten schlechter und verwässern Signale, deshalb möglichst kurz halten.

30) 404

Ein 404 ist die Serverantwort, wenn eine Ressource nicht existiert. 404 ist nicht automatisch schlecht, aber es sollte klar kommuniziert werden, dass die Seite fehlt. Für SEO ist wichtig, dass wirklich fehlende Seiten nicht fälschlich als 200 ausgeliefert werden.

31) Canonical

Ein Canonical-Tag zeigt Suchmaschinen, welche URL als Hauptversion gilt, wenn Inhalte mehrfach erreichbar sind. Das hilft gegen Duplicate Content und sortiert Signale. Canonicals müssen konsistent sein, sonst entstehen Verwirrung und Indexierungsprobleme.

32) Robots Meta

Das Robots-Meta-Tag steuert Indexierung und Link-Following auf Seitenebene, etwa noindex oder nofollow. Es ist ein Steuerhebel, kein Pflaster für schlechte Struktur. Wichtig ist, dass es bewusst gesetzt wird, sonst verschwinden Seiten unbemerkt aus dem Index.

33) Sitemap

Eine Sitemap ist eine Liste wichtiger URLs, meist als XML, die Suchmaschinen beim Crawlen hilft. Sie ersetzt keine interne Verlinkung, macht aber Prioritäten und Umfang sichtbar. Sitemaps sollten nur echte, indexierbare Seiten enthalten.

34) Interne Verlinkung

Interne Verlinkung verbindet Inhalte innerhalb einer Website. Sie hilft Nutzern beim Navigieren und Suchmaschinen beim Verstehen von Themenclustern. Gute interne Links sind logisch, sparsam und konsistent, nicht ein Link-Teppich mit Wiederholungen.

35) Informationsarchitektur

Informationsarchitektur beschreibt, wie Inhalte strukturiert, gruppiert und erreichbar gemacht werden. Gute Architektur trennt Startseite, Themenübersichten und Detailartikel. Das reduziert Textmonster, verbessert Orientierung und macht SEO organischer.

36) Structured Data

Structured Data sind maschinenlesbare Zusatzinformationen, mit denen Inhalte präziser beschrieben werden. Sie können Rich Results unterstützen, sind aber kein Ranking-Trick. Wichtig ist, dass Markup korrekt, aktuell und passend zum sichtbaren Inhalt ist.

37) JSON-LD

JSON-LD ist ein Format, um strukturierte Daten als Script im Head oder Body zu hinterlegen. Es ist beliebt, weil es HTML nicht „verschmutzt“ und leicht wartbar ist. Entscheidend ist, dass die Daten zur Seite passen und valide sind.

38) Open Graph

Open Graph steuert, wie Seiten beim Teilen in Social Apps dargestellt werden, zum Beispiel Titel, Beschreibung und Vorschaubild. Es hat nichts mit Google-Rankings zu tun, verbessert aber Klickrate beim Teilen. OG-Tags sollten zu Inhalt und Branding passen.

39) CSP

Content Security Policy (CSP) begrenzt, welche Quellen Skripte, Styles oder Medien laden dürfen. Das schützt gegen bestimmte Angriffsarten und macht unerwartete Einbindungen sichtbar. CSP erfordert saubere Planung, sonst blockt sie versehentlich legitime Inhalte.

40) XSS

Cross-Site Scripting (XSS) ist eine Sicherheitslücke, bei der fremder Code in eine Seite eingeschleust wird. Häufige Ursachen sind unescaped Input und unsichere Templates. Schutz: Output Escaping, Content Security Policy und vorsichtige DOM-Manipulation.