Startseite und Seitengeschwindigkeit

Food-Fotos sind groß. Ein einzelnes Bild aus der Kamera hat schnell 4 bis 8 MB. Wenn du auf deiner Startseite sechs Rezeptbilder, ein Hero-Bild und ein Profilfoto einbindest, können da locker 30 MB zusammenkommen. Kein Besucher wartet so lange.

Die Startseite ist die Seite, die Google am häufigsten crawlt und deren Ladezeit direkt in die Core Web Vitals einfließt. Wenn sie langsam ist, betrifft das deinen gesamten Blog.

Bilder richtig vorbereiten ist der größte Hebel. Bevor du ein Bild auf die Startseite setzt, sollte es:

• Auf die tatsächlich angezeigte Breite skaliert sein (ein Thumbnail muss kein 2000px-Bild laden)
• Im WebP-Format vorliegen, wenn dein Theme oder Plugin das unterstützt
• Komprimiert sein, ohne dass die Qualität sichtbar leidet

Dann gibt es noch das Konzept des Lazy Loading. Bilder, die weiter unten auf der Seite stehen, müssen nicht sofort geladen werden. Der Browser lädt sie erst, wenn der Besucher in ihre Nähe scrollt. WordPress bringt das seit Version 5.5 von Haus aus mit.

Aber: Das Hero-Bild ganz oben darf nicht lazy geladen werden. Es ist das Erste, was Besucher sehen, und wenn es erst nach einer halben Sekunde einblendet, wirkt die Seite kaputt. Im HTML setzt du dafür loading="eager" oder lässt das loading-Attribut einfach weg.

Slider und Karussells sehen hübsch aus, kosten aber Ladezeit. Jeder Slide ist ein zusätzliches Bild, und das Slider-Script selbst bringt auch noch JavaScript mit. Bei einer Kundin haben wir einen Slider mit fünf Bildern durch ein einzelnes starkes Hero-Bild ersetzt. Die Ladezeit der Startseite ging von 4,2 auf 1,8 Sekunden runter.

Wenn du unsicher bist, wie schnell deine Startseite lädt: Google PageSpeed Insights zeigt dir das kostenlos. Alles über 2,5 Sekunden für den Largest Contentful Paint ist ein Warnsignal.