Ladegeschwindigkeit ist entscheidend. Jede Sekunde Verzögerung kann Conversions kosten und Ihr Suchmaschinenranking beeinträchtigen. Dieser Leitfaden zeigt Ihnen, wie Sie Ihre Website für beste Performance optimieren.
Warum Performance wichtig ist
- 53% der Nutzer verlassen eine Seite, wenn sie länger als 3 Sekunden lädt
- 1 Sekunde Verbesserung kann Conversions um 7% steigern
- Google nutzt Ladegeschwindigkeit als Rankingfaktor
Core Web Vitals
Google misst die Nutzererfahrung mit drei Hauptmetriken:
LCP (Largest Contentful Paint)
Zeit bis der Hauptinhalt sichtbar ist.
- Gut: < 2,5s
- Verbesserungsbedarf: 2,5s - 4s
- Schlecht: > 4s
FID (First Input Delay)
Zeit bis die Seite auf erste Interaktion reagiert.
- Gut: < 100ms
- Verbesserungsbedarf: 100ms - 300ms
- Schlecht: > 300ms
CLS (Cumulative Layout Shift)
Visuelle Stabilität während des Ladens.
- Gut: < 0,1
- Verbesserungsbedarf: 0,1 - 0,25
- Schlecht: > 0,25
Optimierungstechniken
1. Bildoptimierung
<!-- Moderne Formate nutzen -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Beschreibung" loading="lazy">
</picture>2. Lazy Loading
// Intersection Observer für Lazy Loading
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});3. Minifizierung und Komprimierung
- CSS, JavaScript und HTML minifizieren
- Gzip oder Brotli-Komprimierung aktivieren
- Ungenutzten Code entfernen (Tree Shaking)
4. Effektives Caching
# Nginx Cache-Konfiguration
location ~* \.(css|js|jpg|png|webp|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}5. Kritische Ressourcen vorladen
<head>
<!-- Schriftarten vorladen -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<!-- Verbindung zu externen Quellen vorher aufbauen -->
<link rel="preconnect" href="https://api.example.com">
</head>6. Server-seitiges Rendering
SSR oder SSG nutzen, um vollständiges HTML an den Browser zu liefern:
// Beispiel mit Next.js
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 3600 // Jede Stunde neu generieren
};
}Messwerkzeuge
- Lighthouse (Chrome DevTools)
- PageSpeed Insights (Google)
- WebPageTest
- GTmetrix
Optimierungs-Checkliste
- Bilder optimiert und in modernen Formaten
- Lazy Loading implementiert
- Kritisches CSS inline
- JavaScript verzögert geladen
- Cache korrekt konfiguriert
- CDN eingerichtet
- Komprimierung aktiviert
- Schriftarten optimiert
Fazit
Performance-Optimierung ist ein kontinuierlicher Prozess. Überwachen Sie Ihre Metriken regelmäßig und passen Sie sie bei Bedarf an.
Benötigt Ihre Website ein Performance-Audit? Kontaktieren Sie uns für eine kostenlose Analyse.