Ladezeiten-Optimierung für E-Commerce: Mit Core Web Vitals zu besseren Rankings

Core Web Vitals messen

// Largest Contentful Paint (LCP) messen
new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        console.log('LCP:', entry.startTime);
    }
}).observe({entryTypes: ['largest-contentful-paint']});

// First Input Delay (FID) messen
new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        console.log('FID:', entry.processingStart - entry.startTime);
    }
}).observe({entryTypes: ['first-input']});

// Cumulative Layout Shift (CLS) messen
let clsValue = 0;
new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
            clsValue += entry.value;
        }
    }
    console.log('CLS:', clsValue);
}).observe({entryTypes: ['layout-shift']});

Wir messen die drei wichtigsten Core Web Vitals mit JavaScript.

Bilder optimieren

WebP-Format und Lazy Loading für bessere Performance

<picture>
    <source srcset="product-image.webp" type="image/webp">
    <source srcset="product-image.avif" type="image/avif">
    <img src="product-image.jpg" 
         alt="Produktbild" 
         loading="lazy"
         width="400" 
         height="300">
</picture>

Wir nutzen moderne Bildformate und Lazy Loading für Produktbilder.

img {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Placeholder für Lazy Loading */
img[loading="lazy"] {
    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; }
}

Mit CSS sorgen wir für optimale Darstellung und Loading-Animation.

CSS und JavaScript optimieren

Minifizierung und kritisches CSS für schnellere Ladezeiten

<!-- Kritisches CSS inline -->
<style>
    /* Above-the-fold Styles */
    .header, .hero, .product-grid { 
        /* Kritische Styles hier */ 
    }
</style>

<!-- Nicht-kritisches CSS asynchron laden -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Wir laden kritisches CSS inline und nicht-kritisches CSS asynchron.

// JavaScript Module für bessere Performance
import { initCart } from './modules/cart.js';
import { initSearch } from './modules/search.js';

// Lazy Loading für nicht-kritische Features
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Produktbewertungen erst bei Bedarf laden
            import('./modules/reviews.js').then(module => {
                module.initReviews(entry.target);
            });
        }
    });
});

document.querySelectorAll('.product-reviews').forEach(el => {
    observer.observe(el);
});

JavaScript-Module und Lazy Loading für nicht-kritische Features implementieren.

Caching-Strategien

Service Worker und HTTP-Caching für wiederkehrende Besucher

// Service Worker für Caching
const CACHE_NAME = 'ecommerce-v1';
const urlsToCache = [
    '/css/critical.css',
    '/js/app.js',
    '/images/logo.webp'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

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

Ein Service Worker cached wichtige Ressourcen für bessere Performance.

<?php
// HTTP-Cache-Header setzen
header('Cache-Control: public, max-age=31536000'); // 1 Jahr für statische Assets
header('ETag: "' . md5_file($filename) . '"');

// Gzip-Kompression aktivieren
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
    ob_start('ob_gzhandler');
} else {
    ob_start();
}

// Browser-Caching für verschiedene Dateitypen
$extension = pathinfo($_SERVER['REQUEST_URI'], PATHINFO_EXTENSION);
switch ($extension) {
    case 'css':
    case 'js':
        header('Cache-Control: public, max-age=31536000');
        break;
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'webp':
        header('Cache-Control: public, max-age=2592000'); // 30 Tage
        break;
}

HTTP-Cache-Header und Gzip-Kompression in PHP konfigurieren.

Database-Optimierung

Datenbankabfragen optimieren für schnellere Produktlisten

-- Index für häufige Abfragen erstellen
CREATE INDEX idx_products_category_price ON products(category_id, price);
CREATE INDEX idx_products_featured ON products(is_featured, created_at);

-- Optimierte Produktabfrage mit Pagination
SELECT p.id, p.name, p.price, p.image_url, c.name as category_name
FROM products p 
JOIN categories c ON p.category_id = c.id 
WHERE p.is_active = 1 
AND p.category_id = ? 
ORDER BY p.created_at DESC 
LIMIT 20 OFFSET ?;

Datenbankindizes und optimierte Abfragen für bessere Performance.

<?php
// Redis für Produkt-Caching
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);

function getProducts($categoryId, $page = 1) {
    global $redis;
    $cacheKey = "products:category:{$categoryId}:page:{$page}";
    
    // Aus Cache laden
    $cached = $redis->get($cacheKey);
    if ($cached) {
        return json_decode($cached, true);
    }
    
    // Aus Datenbank laden
    $products = loadProductsFromDB($categoryId, $page);
    
    // In Cache speichern (5 Minuten)
    $redis->setex($cacheKey, 300, json_encode($products));
    
    return $products;
}

Redis-Caching für Datenbankabfragen implementieren.

CDN und Preloading

Content Delivery Network und Resource Hints für globale Performance

<!-- DNS-Prefetch für externe Domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- Kritische Ressourcen preloaden -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/app.js" as="script">

<!-- Hero-Bild preloaden -->
<link rel="preload" href="/images/hero-product.webp" as="image">

<!-- Nächste Seite prefetchen -->
<link rel="prefetch" href="/product-category/electronics">

Resource Hints optimieren die Ladezeiten durch intelligentes Vorladen.

// Intersection Observer für intelligentes Prefetching
const prefetchObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const link = entry.target;
            const url = link.getAttribute('href');
            
            // Prefetch nur bei schneller Verbindung
            if (navigator.connection && 
                navigator.connection.effectiveType === '4g') {
                
                const prefetchLink = document.createElement('link');
                prefetchLink.rel = 'prefetch';
                prefetchLink.href = url;
                document.head.appendChild(prefetchLink);
            }
        }
    });
});

// Alle Produktlinks für Prefetching beobachten
document.querySelectorAll('.product-link').forEach(link => {
    prefetchObserver.observe(link);
});

Intelligentes Prefetching basierend auf Verbindungsgeschwindigkeit.

Schlusswort: Performance als Wettbewerbsvorteil nutzen

Mit diesen Optimierungen können Sie die Core Web Vitals Ihres E-Commerce-Shops deutlich verbessern. Schnelle Ladezeiten führen nicht nur zu besseren Google-Rankings, sondern auch zu höheren Conversion-Raten und zufriedeneren Kunden. Überwachen Sie die Performance regelmäßig und optimieren Sie kontinuierlich weiter.