Performance und SEO

Performance und SEO wirken auf den ersten Blick wie getrennte Themen. In der Praxis hängen sie eng zusammen: Schnelle, klar strukturierte und gut beschriebene Seiten sind angenehmer für Benutzer und leichter für Suchmaschinen zu verstehen.

Warum Performance wichtig ist

Langsame Webseiten führen zu Frust, Abbrüchen und schlechterer Nutzbarkeit. Besonders kritisch ist das auf mobilen Geräten, bei schwacher Verbindung oder auf älteren Geräten.

Performance betrifft:

• Ladezeit
• Reaktionsgeschwindigkeit
• flüssiges Scrollen
• stabile Layouts ohne Sprünge
• effiziente Bilder und Videos
• kleine JavaScript-Bundles
• gutes Caching

Core Web Vitals

Core Web Vitals sind Messwerte für die Nutzererfahrung.

Ziel ist nicht, nur eine Zahl zu verbessern. Ziel ist, dass sich die Seite zuverlässig schnell und stabil anfühlt.

Bilder optimieren

Bilder sind oft der größte Performance-Faktor.

Gute Praxis:

• passende Bildgröße statt riesiger Originaldateien
• moderne Formate wie WebP oder AVIF, wenn möglich
• width und height setzen, damit Layouts nicht springen
• wichtige Bilder priorisieren
• nicht sichtbare Bilder lazy laden
• sinnvolle alt-Texte ergänzen

<img
  src="team.webp"
  alt="Team arbeitet gemeinsam an einem Webprojekt"
  width="1200"
  height="800"
  loading="lazy"
>

JavaScript bewusst einsetzen

JavaScript macht Seiten interaktiv, kann sie aber auch langsam machen.

Typische Probleme:

• zu große Framework-Bundles
• ungenutzte Bibliotheken
• blockierende Skripte
• teure Berechnungen im Hauptthread
• unnötige Re-Renders
• zu viele Tracking-Skripte

Pragmatische Regel: Lade nur, was für die aktuelle Seite gebraucht wird.

Caching

Caching verhindert, dass unveränderte Dateien ständig neu geladen werden.

Typische Cache-Kandidaten:

• CSS-Dateien
• JavaScript-Bundles
• Bilder
• Fonts
• API-Antworten, wenn sie nicht hochdynamisch sind

Bei Caching ist wichtig, zwischen statischen Assets und persönlichen Daten zu unterscheiden. Private Inhalte dürfen nicht versehentlich öffentlich oder zu lange gecacht werden.

SEO-Grundlagen

SEO bedeutet, Inhalte für Suchmaschinen verständlich und auffindbar zu machen. Technisches SEO beginnt mit sauberem HTML.

Wichtige Punkte:

• genau ein klares <h1> pro Seite
• logische Überschriftenstruktur
• sprechende URLs
• aussagekräftiger <title>
• sinnvolle Meta-Description
• beschreibende Linktexte
• strukturierte Inhalte mit Listen, Tabellen und Abschnitten
• interne Verlinkung
• schnelle Ladezeiten
• mobile Nutzbarkeit

<title>Web Development Grundlagen | CAP Dokumentation</title>
<meta
  name="description"
  content="Einführung in HTML, CSS, JavaScript, APIs, Performance und Accessibility."
>

Technische Checks

Nützliche Prüfungen:

• Lighthouse im Browser ausführen
• Netzwerktab der Developer Tools prüfen
• große Dateien identifizieren
• Layout-Sprünge beobachten
• Seite per Tastatur bedienen
• mobile Ansicht testen
• HTML-Struktur prüfen