Performance Optimierung Web
Web Performance: Schnellere Websites
Performance ist UX und SEO zugleich. Lernen Sie, wie Sie Ihre Website für optimale Ladezeiten optimieren.
Core Web Vitals
| Metrik | Was es misst | Ziel |
|---|---|---|
| LCP | Largest Contentful Paint | < 2.5s |
| INP | Interaction to Next Paint | < 200ms |
| CLS | Cumulative Layout Shift | < 0.1 |
Ladezeit-Optimierung
Critical Rendering Path
HTML Download
↓
Parse HTML → DOM
↓
CSS Download → CSSOM
↓
JavaScript Download/Execute
↓
Render Tree → Layout → Paint
# Optimierungen:
1. Critical CSS inline
2. JS defer/async
3. Ressourcen priorisieren
Resource Hints
<head> <!-- DNS vorab auflösen --> <link rel="dns-prefetch" href="//api.example.com"> <!-- Verbindung vorab aufbauen --> <link rel="preconnect" href="https://fonts.googleapis.com"> <!-- Kritische Ressourcen vorladen --> <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin> <link rel="preload" href="/css/critical.css" as="style"> <!-- Nächste Seite vorladen --> <link rel="prefetch" href="/next-page.html"> <!-- Modul vorladen --> <link rel="modulepreload" href="/js/main.js"> </head>
JavaScript optimieren
<!-- Blockiert Rendering --> <script src="app.js"></script> <!-- Async: Lädt parallel, führt sofort aus --> <script async src="analytics.js"></script> <!-- Defer: Lädt parallel, führt nach HTML-Parse aus --> <script defer src="app.js"></script> <!-- Empfehlung für App-Code --> <script defer src="app.js"></script> <!-- Für unabhängige Scripts (Analytics) --> <script async src="third-party.js"></script>
Bilder optimieren
<!-- Responsive Images -->
<img
src="image-800.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description"
loading="lazy"
decoding="async"
>
<!-- Moderne Formate mit Fallback -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
<!-- Placeholder für CLS -->
<img
src="image.jpg"
width="800"
height="600"
style="aspect-ratio: 4/3"
alt="Description"
>
CSS optimieren
<!-- Critical CSS inline -->
<style>
/* Nur above-the-fold Styles */
.header { ... }
.hero { ... }
</style>
<!-- Rest async laden -->
<link rel="preload" href="styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
/* CSS: Avoid Layout Shifts */
/* Immer Dimensionen für Bilder/Videos */
img, video {
max-width: 100%;
height: auto;
}
/* Font Display */
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* Fallback sofort, dann Font */
}
Code Splitting
// Webpack/Vite: Dynamic Imports
const HeavyComponent = lazy(() => import('./HeavyComponent'));
// React mit Suspense
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyComponent />
</Suspense>
);
}
// Route-basiertes Splitting
const routes = [
{
path: '/dashboard',
component: lazy(() => import('./Dashboard'))
},
{
path: '/settings',
component: lazy(() => import('./Settings'))
}
];
Caching
# Nginx Cache Headers
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
location ~* \.html$ {
expires -1;
add_header Cache-Control "no-store, must-revalidate";
}
# Service Worker für Offline-Cache
// sw.js
const CACHE_NAME = 'v1';
const ASSETS = ['/app.js', '/styles.css', '/offline.html'];
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(ASSETS))
);
});
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request)
.then(response => response || fetch(e.request))
);
});
Messung
// Performance API
const timing = performance.timing;
const pageLoad = timing.loadEventEnd - timing.navigationStart;
// Web Vitals Library
import { getLCP, getINP, getCLS } from 'web-vitals';
getLCP(console.log);
getINP(console.log);
getCLS(console.log);
// PerformanceObserver
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP:', entry.startTime);
}
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
Tools
# Lighthouse - Chrome DevTools → Lighthouse Tab - CLI: npx lighthouse https://example.com # WebPageTest - webpagetest.org # PageSpeed Insights - pagespeed.web.dev # Bundle Analyzer npx webpack-bundle-analyzer stats.json npx vite-bundle-visualizer
💡 Tipp:
Nutzen Sie Enjyn Analytics um Core Web Vitals Ihrer echten Besucher zu tracken.