perf: Header-Bild der Imkerei-Seite sofort laden
Docker Image bauen und veroeffentlichen / build-and-push (push) Successful in 4m1s

Ein Audit ueber alle bildfuehrenden Seiten zeigte /imkerei als einzige
Ausnahme: dort war kein Bild priorisiert. Das Bild steht neben der h1 im
ersten Viewport und ist auf breiten Bildschirmen das groesste Element der
Seite, wurde aber doppelt zurueckgehalten — durch das voreingestellte
Lazy-Loading und durch ScrollReveal, das bei opacity 0 startet und erst
nach der Hydration einblendet.

Es rendert jetzt direkt und mit priority, also loading="eager" und
fetchPriority="high". Die Textspalte daneben behaelt ihre Einblendung, die
kostet nichts. Damit verhaelt sich die Seite wie /herkunft und
/unternehmen, die ihr Header-Bild ohnehin schon ausserhalb von ScrollReveal
rendern.

Stand des Audits danach, im Produktions-Build gemessen: /, /herkunft,
/unternehmen und /imkerei liefern je genau ein Header-Bild mit
loading="eager" und fetchPriority="high", alle uebrigen Bilder lazy, und
auf keiner Seite geht noch ein hochgeladenes Bild am Bildoptimierer vorbei.
This commit is contained in:
Nick Szaunig committed 2026-09-14 20:59:43 +02:00
1 parent 0a44fecbe1
commit 72d36f4716
1 file changed
+8 -2
+8 -2
View File
@@ -34,7 +34,13 @@ export default async function ImkereiPage() {
))} ))}
</div> </div>
</ScrollReveal> </ScrollReveal>
<ScrollReveal delay={0.1}> {/* Bewusst NICHT in ScrollReveal und mit priority: dieses Bild steht
neben der h1 im ersten Viewport und ist auf breiten Bildschirmen
das groesste Element der Seite. ScrollReveal startet bei
opacity 0 und blendet erst nach der Hydration ein — zusammen mit
dem sonst greifenden Lazy-Loading erschien das Bild damit
deutlich spaeter als noetig. Die Textspalte daneben behaelt ihre
Einblendung, die kostet nichts. */}
<ContentImage <ContentImage
src={image || null} src={image || null}
alt={t.imkereiPage.imageLabel} alt={t.imkereiPage.imageLabel}
@@ -42,8 +48,8 @@ export default async function ImkereiPage() {
className="aspect-[4/5] w-full" className="aspect-[4/5] w-full"
label={t.imkereiPage.imageLabel} label={t.imkereiPage.imageLabel}
sizes="(min-width: 768px) 50vw, 100vw" sizes="(min-width: 768px) 50vw, 100vw"
priority
/> />
</ScrollReveal>
</Container> </Container>
</div> </div>
); );