From aa07ebc3b020a02557494d74ac87be21cfbc57e3 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 26 Feb 2026 19:49:10 +0100
Subject: [PATCH] recipes: preload hero images with high priority

Add fetchpriority="high" and <link rel="preload"> hints to hero images
on both the recipe listing and detail pages. Also prefetch the full-size
hero image on card hover via new Image() to warm the cache before navigation.
---
 src/lib/components/recipes/Card.svelte                 | 6 +++++-
 src/lib/components/recipes/TitleImgParallax.svelte     | 2 +-
 src/routes/[recipeLang=recipeLang]/+page.svelte        | 4 ++++
 src/routes/[recipeLang=recipeLang]/[name]/+page.svelte | 1 +
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/recipes/Card.svelte b/src/lib/components/recipes/Card.svelte
index dc3bc40..20a6aad 100644
--- a/src/lib/components/recipes/Card.svelte
+++ b/src/lib/components/recipes/Card.svelte
@@ -38,6 +38,10 @@ const img_alt = $derived(
 );
 
 const img_color = $derived(recipe.images?.[0]?.color || '');
+
+function preloadHeroImage() {
+	new Image().src = `https://bocken.org/static/rezepte/full/${img_name}`;
+}
 </script>
 <style>
 .card-main-link {
@@ -226,7 +230,7 @@ const img_color = $derived(recipe.images?.[0]?.color || '');
 </style>
 
 <div class="card" class:search_me={search} class:margin_right={do_margin_right} data-tags="[{recipe.tags}]">
-	<a href="{routePrefix}/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}">
+	<a href="{routePrefix}/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}" onpointerenter={preloadHeroImage}>
 		<span class="visually-hidden">View recipe: {recipe.name}</span>
 	</a>
 	<div class="card-image" style:background-color={img_color}>
diff --git a/src/lib/components/recipes/TitleImgParallax.svelte b/src/lib/components/recipes/TitleImgParallax.svelte
index 1d5816b..594ba33 100644
--- a/src/lib/components/recipes/TitleImgParallax.svelte
+++ b/src/lib/components/recipes/TitleImgParallax.svelte
@@ -145,7 +145,7 @@ dialog button{
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
     	<div class:zoom-in={!isredirected} onclick={show_dialog_img}>
 		<div class="image-wrap" style:background-color={color}>
-			<img class="image" {src} {alt} style:view-transition-name={transitionName || null}/>
+			<img class="image" {src} {alt} style:view-transition-name={transitionName || null} fetchpriority="high"/>
 		</div>
 		<noscript>
 			<div class="image-wrap" style:background-color={color}>
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index dce8963..91caae6 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -338,6 +338,9 @@
 <svelte:head>
 	<title>{labels.metaTitle}</title>
 	<meta name="description" content="{labels.metaDescription}" />
+	{#if heroRecipe}
+		<link rel="preload" as="image" href="https://bocken.org/static/rezepte/full/{heroImg}" fetchpriority="high" />
+	{/if}
 	<meta property="og:image" content="https://bocken.org/static/rezepte/thumb/ragu_aus_rindsrippen.webp" />
 	<meta property="og:image:secure_url" content="https://bocken.org/static/rezepte/thumb/ragu_aus_rindsrippen.webp" />
 	<meta property="og:image:type" content="image/webp" />
@@ -352,6 +355,7 @@
 				src="https://bocken.org/static/rezepte/full/{heroImg}"
 				alt=""
 				loading="eager"
+				fetchpriority="high"
 				data-recipe={heroRecipe.short_name}
 			/>
 			<div class="hero-overlay"></div>
diff --git a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
index ecbc246..22e43dd 100644
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -300,6 +300,7 @@ h2{
 <svelte:head>
 	<title>{data.strippedName} - {labels.title}</title>
 	<meta name="description" content="{data.strippedDescription}" />
+	<link rel="preload" as="image" href={hero_img_src} fetchpriority="high" />
 	<meta property="og:image" content="https://bocken.org/static/rezepte/thumb/{img_filename}" />
 	<meta property="og:image:secure_url" content="https://bocken.org/static/rezepte/thumb/{img_filename}" />
 	<meta property="og:image:type" content="image/webp" />