Zum Hauptinhalt springen
H
HESSENKAMP MEDIA
Performance PageSpeed Optimierung Tutorial

100/100 PageSpeed Score erreichen: Das komplette Tutorial

Jascha Hessenkamp
7 Min. Lesezeit
100/100 PageSpeed Score erreichen: Das komplette Tutorial

Ein 100/100 PageSpeed Score erfordert systematische Optimierung. Dieses Tutorial basiert auf hunderten realen Projekten und zeigt Ihnen die exakten Schritte.

Core Web Vitals verstehen

Google nutzt drei kritische Metriken als Ranking-Faktoren:

1. Largest Contentful Paint (LCP)

Ziel: < 2.5s | Misst: Wann das größte Element lädt

Typische LCP-Elemente:

  • Hero Images
  • Video Thumbnails
  • Large Text Blocks

2. First Input Delay (FID)

Ziel: < 100ms | Misst: Reaktionszeit auf erste Nutzer-Interaktion

3. Cumulative Layout Shift (CLS)

Ziel: < 0.1 | Misst: Visuelle Stabilität

Die 7 kritischen Optimierungen

1. Bildoptimierung (70% Impact)

Modern Formats nutzen:

<picture>
  <source type="image/avif" srcset="hero-320.avif 320w, hero-1280.avif 1280w" />
  <source type="image/webp" srcset="hero-320.webp 320w, hero-1280.webp 1280w" />
  <img src="hero.jpg" width="1280" height="600" loading="lazy" alt="Hero" />
</picture>

Automation mit Sharp:

const sharp = require('sharp');

async function optimize(input) {
  await sharp(input)
    .resize(1280)
    .avif({ quality: 75 })
    .toFile('output.avif');
}

Lazy Loading:

  • Above fold: loading="eager"
  • Below fold: loading="lazy"
  • LCP Image: <link rel="preload" href="/hero.avif" as="image" />

2. JavaScript minimieren

Code Splitting:

// Dynamische Imports
const HeavyComponent = lazy(() => import('./Heavy'));

// Tree Shaking
import debounce from 'lodash/debounce'; // Nicht: import _ from 'lodash'

Bundle Analyzer:

npm install @next/bundle-analyzer
ANALYZE=true npm run build

3. Critical CSS

Inline kritisches CSS:

<head>
  <style>
    /* Nur above-the-fold Styles */
    body { margin: 0; font-family: Inter; }
    .hero { min-height: 100vh; }
  </style>
  
  <!-- Rest async laden -->
  <link rel="preload" href="/styles.css" as="style" 
        onload="this.rel='stylesheet'" />
</head>

4. Font Optimization

<head>
  <!-- Preconnect -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  
  <!-- Preload -->
  <link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin />
  
  <!-- Font-Face mit swap -->
  <style>
    @font-face {
      font-family: 'Inter';
      src: url('/inter.woff2') format('woff2');
      font-display: swap; /* Kritisch! */
    }
  </style>
</head>

5. Third-Party Scripts

Delayed Loading:

let loaded = false;

['click', 'scroll'].forEach(event => {
  window.addEventListener(event, () => {
    if (!loaded) {
      const script = document.createElement('script');
      script.src = 'https://analytics.com/script.js';
      document.head.appendChild(script);
      loaded = true;
    }
  }, { once: true });
});

6. Server Response Time

Optimieren:

  • Static Site Generation nutzen
  • CDN aktivieren (Cloudflare, Vercel Edge)
  • Brotli Compression enable
  • Ziel: TTFB < 200ms

7. Layout Shift Prevention

<!-- Bilder: Immer width/height -->
<img src="/pic.jpg" width="800" height="600" alt="..." />

<!-- Aspect Ratio reservieren -->
<div style="aspect-ratio: 16/9;">
  <iframe src="..."></iframe>
</div>

Pre-Launch Checklist

Bilder

  • Alle < 100 KB
  • AVIF/WebP + Fallback
  • Lazy Loading (außer LCP)
  • LCP Image preloaded

JavaScript

  • Bundle < 200 KB
  • Code Splitting aktiv
  • Third-Party delayed

CSS

  • Critical CSS inline
  • Unused CSS removed
  • CSS < 50 KB

Fonts

  • Preloaded
  • font-display: swap
  • Variable Fonts

Server

  • CDN aktiv
  • Brotli/Gzip enabled
  • TTFB < 200ms

Debugging

Issue: “Reduce unused JavaScript”

npx source-map-explorer build/**/*.js
# Dann: Heavy Dependencies ersetzen oder lazy loaden

Issue: “Eliminate render-blocking”

<!-- Inline critical CSS, defer scripts -->
<script defer src="/app.js"></script>

Issue: “Properly size images”

<img srcset="small.jpg 320w, large.jpg 1280w" 
     sizes="(max-width: 768px) 100vw, 50vw" />

Automation

Lighthouse CI:

# .github/workflows/lighthouse.yml
name: Lighthouse
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: treosh/lighthouse-ci-action@v9
        with:
          urls: https://example.com
          budgetPath: ./budget.json

Performance Budget:

{
  "path": "/*",
  "timings": [
    { "metric": "interactive", "budget": 3000 },
    { "metric": "first-contentful-paint", "budget": 1500 }
  ],
  "resourceSizes": [
    { "resourceType": "script", "budget": 200 },
    { "resourceType": "image", "budget": 300 }
  ]
}

Real-World Example

Diese Website erreicht 100/100:

Was ich gemacht habe:

  1. Alle Bilder → AVIF/WebP (70 KB statt 800 KB)
  2. Contact Form → client:visible (nur laden wenn sichtbar)
  3. Fonts → Preload + font-display: swap
  4. Critical CSS → Inline (15 KB)
  5. Vercel Edge CDN → TTFB 120ms

Resultat:

  • LCP: 0.9s ✅
  • FID: 12ms ✅
  • CLS: 0.001 ✅
  • Score: 100/100 🎉

Fazit

Priorisierung:

  1. Bilder (70% Impact)
  2. JavaScript (20% Impact)
  3. Rest (10% Impact)

Realität: 95+ ist oft besser als 100, wenn es schneller geht. Google rankt nach Core Web Vitals, nicht nach dem Score.

Brauchen Sie Performance-Optimierung? Ich biete Audits und Optimierung an. Kontaktieren Sie mich für eine kostenlose Analyse.

Artikel teilen:

Mehr Artikel