Web Performance: Schnellere Websites

Performance ist UX und SEO zugleich. Lernen Sie, wie Sie Ihre Website für optimale Ladezeiten optimieren.

Core Web Vitals

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

Weitere Informationen

• 🖼️ Bildoptimierung
• ⚡ Lazy Loading
• 🌐 CDN einsetzen
• 📊 Enjyn Analytics