Schnelle Ladezeiten sind entscheidend für den E-Commerce-Erfolg. In diesem Artikel zeigen wir, wie Sie die Core Web Vitals optimieren, um bessere Google-Rankings und höhere Conversion-Raten zu erreichen.
// 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.
<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.
<!-- 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.
// 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.
-- 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.
<!-- 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.
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.
Core Web Vitals sind drei wichtige Metriken: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Sie messen Ladegeschwindigkeit, Interaktivität und visuelle Stabilität.
Für optimale Core Web Vitals sollte LCP unter 2,5 Sekunden, FID unter 100 Millisekunden und CLS unter 0,1 liegen.
WebP und AVIF bieten die beste Kompression bei hoher Qualität. Nutzen Sie das picture-Element für Fallback-Unterstützung.
Ein CDN reduziert Ladezeiten für globale Besucher erheblich. Besonders für internationale E-Commerce-Shops ist es empfehlenswert.
Nutzen Sie Google PageSpeed Insights, Lighthouse und die Search Console für regelmäßige Performance-Analysen.
Service Worker werden von allen modernen Browsern unterstützt. Implementieren Sie sie als progressive Verbesserung mit Feature-Detection.
Ein schneller, stabiler Hosting-Anbieter mit aktuellen Servertechnologien (z. B. HTTP/2, SSD, Caching) hat großen Einfluss auf Ladezeit und Zuverlässigkeit – besonders bei hohem Traffic.
Übermäßiges oder schlecht optimiertes JavaScript kann die Ladezeit und Interaktivität stark verschlechtern. Reduzieren Sie Third-Party-Skripte, nutzen Sie Lazy Loading und minifizieren Sie Ihren Code.
Lazy Loading lädt Bilder und Inhalte erst, wenn sie sichtbar werden. Das spart initial Ladezeit und verbessert Core Web Vitals wie LCP deutlich.
Vergeben Sie feste Höhen/Breiten für Bilder, Ads und iframes, um Layout-Verschiebungen zu verhindern. Auch das vorzeitige Laden von Fonts hilft, CLS zu minimieren.
Critical CSS enthält nur die Styles, die für den sichtbaren Bereich beim Laden der Seite nötig sind. Dadurch wird das Rendering beschleunigt und LCP verbessert.
Nutze den erweiterten WYSIWYG-Editor in Shopware 6. Dieser Editor ermöglicht die einfache Einbettung von Medien in die Beschreibung und viele weitere Features.
ab 7,99 €* / Monat
Plugin mietenOptimieren Sie Ihren Shop und schaffen Sie damit ein besseres Erlebnis für Ihre Kunden. Dieses Plugin minimiert die Ladezeit Ihres Shops und bietet zahlreiche Konfigurationen.
ab 27,49 €* / Monat
Plugin mietenErstellen und bearbeiten Sie Ihre eigenen Template-Erweiterungen schnell und einfach in der Administration. Anzeige vorhandener Storefront-Vorlagenpfade und -Inhalte.
ab 3,99 €* / Monat
Plugin mietenHinweis: * Alle Preise verstehen sich zzgl. Mehrwertsteuer
x