components/overview/OverviewCard.jsx

@@ -17,6 +17,9 @@ export default function OverviewCard({
 	href = null,
 	disabledHint = null,
 	containerClassName = "",
+	imageLoading = "lazy",
+	imageFetchPriority = "auto",
+	imageDecoding = "async",
 }) {
 	const isDisabled = !href;
 
@@ -36,7 +39,9 @@ export default function OverviewCard({
 					src={imageSrc}
 					alt={`${title} Karte`}
 					className="h-full w-full object-cover"
-					loading="lazy"
+					loading={imageLoading}
+					fetchPriority={imageFetchPriority}
+					decoding={imageDecoding}
 				/>
 			</div>
 

components/overview/OverviewHomePage.jsx

@@ -41,7 +41,7 @@ export default function OverviewHomePage() {
 
 				<div className="flex flex-1 items-center justify-center pt-20 pb-10">
 					<div className={cardsRowClassName}>
-						{cards.map((card) => (
+						{cards.map((card, index) => (
 							<OverviewCard
 								key={card.key}
 								title={card.title}
@@ -50,6 +50,9 @@ export default function OverviewHomePage() {
 								href={card.href}
 								disabledHint={card.disabledHint}
 								containerClassName={cardItemClassName}
+								imageLoading="eager"
+								imageFetchPriority={index < 2 ? "high" : "auto"}
+								imageDecoding="async"
 							/>
 						))}
 					</div>

lib/frontend/overview/cardsConfig.js

@@ -9,7 +9,7 @@ export function buildOverviewCards({
 			key: "explorer",
 			title: "Explorer",
 			description: "Lieferscheine nach Datum durchsuchen (Jahr -> Monat -> Tag).",
-			imageSrc: "/overview-cards/explorer.png",
+			imageSrc: "/overview-cards/v2/explorer.webp",
 			href: explorerHref || null,
 			disabledHint: disabledHint || null,
 		},
@@ -17,7 +17,7 @@ export function buildOverviewCards({
 			key: "search",
 			title: "Suche",
 			description: "Schnell finden mit Volltext, Zeitraum und Filtern.",
-			imageSrc: "/overview-cards/search.png",
+			imageSrc: "/overview-cards/v2/search.webp",
 			href: searchHref || null,
 			disabledHint: disabledHint || null,
 		},
@@ -25,7 +25,7 @@ export function buildOverviewCards({
 			key: "profile",
 			title: "Profil",
 			description: "Passwort ändern und Support kontaktieren.",
-			imageSrc: "/overview-cards/profile.png",
+			imageSrc: "/overview-cards/v2/profile.webp",
 			href: "/profile",
 			disabledHint: null,
 		},
@@ -36,7 +36,7 @@ export function buildOverviewCards({
 			key: "users",
 			title: "Benutzerverwaltung",
 			description: "Benutzer anlegen, bearbeiten und verwalten.",
-			imageSrc: "/overview-cards/users.png",
+			imageSrc: "/overview-cards/v2/users.webp",
 			href: "/admin/users",
 			disabledHint: null,
 		});

next.config.mjs

@@ -1,6 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  /* config options here */
+	async headers() {
+		return [
+			{
+				source: "/overview-cards/v2/:path*",
+				headers: [
+					{
+						key: "Cache-Control",
+						value: "public, max-age=31536000, immutable",
+					},
+				],
+			},
+		];
+	},
 };
 
 export default nextConfig;