perf: Header-Bild der Imkerei-Seite sofort laden
Docker Image bauen und veroeffentlichen / build-and-push (push) Successful in 4m1s
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:
1 parent
0a44fecbe1
commit
72d36f4716
1 file changed
+16
-10
+16
-10
@@ -34,16 +34,22 @@ export default async function ImkereiPage() {
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<ContentImage
|
||||
src={image || null}
|
||||
alt={t.imkereiPage.imageLabel}
|
||||
tone="honey"
|
||||
className="aspect-[4/5] w-full"
|
||||
label={t.imkereiPage.imageLabel}
|
||||
sizes="(min-width: 768px) 50vw, 100vw"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
{/* 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
|
||||
src={image || null}
|
||||
alt={t.imkereiPage.imageLabel}
|
||||
tone="honey"
|
||||
className="aspect-[4/5] w-full"
|
||||
label={t.imkereiPage.imageLabel}
|
||||
sizes="(min-width: 768px) 50vw, 100vw"
|
||||
priority
|
||||
/>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user