Website Performance Optimierung

# Nginx Performance Tuning
worker_processes auto;
worker_connections 4096;

# Gzip Compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript
           application/json application/javascript application/xml+rss;

# Caching
proxy_cache_path /var/cache/nginx levels=1:2
                 keys_zone=my_cache:10m max_size=1g
                 inactive=60m use_temp_path=off;

<!-- Preload kritischer Ressourcen -->
<link rel="preload" as="image" href="/hero-image.webp"
      type="image/webp" fetchpriority="high">
<link rel="preload" as="font" href="/fonts/main.woff2"
      type="font/woff2" crossorigin>

<!-- Preconnect zu externen Domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://analytics.google.com">

<picture>
  <!-- AVIF für moderne Browser -->
  <source type="image/avif"
          srcset="hero-400.avif 400w,
                  hero-800.avif 800w,
                  hero-1200.avif 1200w"
          sizes="(max-width: 600px) 400px,
                 (max-width: 1200px) 800px,
                 1200px">

  <!-- WebP Fallback -->
  <source type="image/webp"
          srcset="hero-400.webp 400w,
                  hero-800.webp 800w,
                  hero-1200.webp 1200w"
          sizes="(max-width: 600px) 400px,
                 (max-width: 1200px) 800px,
                 1200px">

  <!-- JPEG Fallback -->
  <img src="hero-800.jpg"
       alt="Hero Image"
       loading="eager"
       fetchpriority="high"
       width="1200"
       height="600">
</picture>

<!-- Explizite Dimensionen -->
<img src="logo.png" alt="Logo" width="200" height="50">

<!-- Oder aspect-ratio in CSS -->
<img src="hero.jpg" alt="Hero" style="aspect-ratio: 16/9; width: 100%;">

<!-- Modern mit CSS aspect-ratio -->
.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

<!-- Skeleton Screen für Ads -->
.ad-placeholder {
  width: 100%;
  height: 250px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* font-display für besseres Fallback */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Zeigt Fallback sofort */
  font-weight: 400;
  font-style: normal;
}

/* Preload kritischer Fonts */
<link rel="preload" as="font"
      href="/fonts/custom.woff2"
      type="font/woff2"
      crossorigin>

<IfModule mod_expires.c>
  ExpiresActive On

  # Bilder - 1 Jahr
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"

  # CSS und JS - 1 Monat
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Fonts - 1 Jahr
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"

  # HTML - 1 Stunde
  ExpiresByType text/html "access plus 1 hour"
</IfModule>

// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

// Install Event - Cache Ressourcen
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

// Fetch Event - Cache-First Strategy
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // Cache hit - return cached response
        if (response) return response;

        // Fetch from network
        return fetch(event.request);
      })
  );
});