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>
|
</div>
|
||||||
</ScrollReveal>
|
</ScrollReveal>
|
||||||
<ScrollReveal delay={0.1}>
|
{/* Bewusst NICHT in ScrollReveal und mit priority: dieses Bild steht
|
||||||
<ContentImage
|
neben der h1 im ersten Viewport und ist auf breiten Bildschirmen
|
||||||
src={image || null}
|
das groesste Element der Seite. ScrollReveal startet bei
|
||||||
alt={t.imkereiPage.imageLabel}
|
opacity 0 und blendet erst nach der Hydration ein — zusammen mit
|
||||||
tone="honey"
|
dem sonst greifenden Lazy-Loading erschien das Bild damit
|
||||||
className="aspect-[4/5] w-full"
|
deutlich spaeter als noetig. Die Textspalte daneben behaelt ihre
|
||||||
label={t.imkereiPage.imageLabel}
|
Einblendung, die kostet nichts. */}
|
||||||
sizes="(min-width: 768px) 50vw, 100vw"
|
<ContentImage
|
||||||
/>
|
src={image || null}
|
||||||
</ScrollReveal>
|
alt={t.imkereiPage.imageLabel}
|
||||||
|
tone="honey"
|
||||||
|
className="aspect-[4/5] w-full"
|
||||||
|
label={t.imkereiPage.imageLabel}
|
||||||
|
sizes="(min-width: 768px) 50vw, 100vw"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in new issue
Block a user