Produktkarten im Viewport
Produktkarten entscheiden über den ersten Eindruck.
Das Thema dieser Seite: Auf Kategorieseiten müssen Produktkarten sofort im Viewport sichtbar sein.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check bewertet, ob Produktkarten im ersten Viewport erscheinen oder erst nachgeladen werden.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| Karten sichtbar | Direkter Einstieg | OK |
| Karten verspätet | Warten notwendig | Warnung |
| Keine Karten sichtbar | Above-the-fold leer | Kritisch |
Kontext & Problemraum
Wenn Produktkarten zu spät erscheinen, wirken Kategorieseiten leer und Nutzer springen schneller ab.
| Situation | Symptom | Risiko |
|---|---|---|
| Rendering blockiert | Skeleton zu lange | Absprünge |
| Images lazy im Viewport | Karten bleiben leer | Nutzer verlieren Vertrauen |
| JS lädt zu spät | Grid erscheint verzögert | Conversion sinkt |
Entscheidungslogik
| Wenn | Dann | Empfehlung |
|---|---|---|
| Karten zu spät | Above-the-fold leer | Critical CSS priorisieren |
| Nur mobile betroffen | Netzwerk/CPU limitiert | Mobile optimieren |
| Karten sofort | Signal ok | Beibehalten |
Erklärende Details
Above-the-fold Content sollte ohne JS-Blocking erscheinen. Produktbilder im Viewport dürfen nicht lazy geladen werden.
<img loading="eager" src="/product.jpg" />| Detail | Warum relevant | Hinweis |
|---|---|---|
| Eager Loading | Karten sofort sichtbar | Nur für Viewport |
| Grid HTML | Render ohne JS | SSR oder Static |
| Bildgrößen | Schnelles Laden | Komprimieren |
Risiken, Grenzen & Einschränkungen
| Grenze | Woran erkennbar | Was tun |
|---|---|---|
| Personalisierung | Inhalt variiert | Wichtigste Variante prüfen |
| Infinite Scroll | Above-the-fold leer | Initiale Karten fixieren |
| A/B Tests | Layout wechselt | Tests dokumentieren |
Render-blockierendes JS
Blocking verzögert den Grid-Start.
Große Bilder
Bildgewicht beeinflusst den Viewport.
Gesamtladezeit
Gesamtzeit der Seite.