perf: optimize slider image persistence in DOM and add 1-year immutable cache-control for static uploads

backend/src/main.ts

@@ -28,12 +28,22 @@ async function bootstrap() {
   // Trust reverse proxy (Nginx / Docker ingress) to resolve real client IP from X-Forwarded-For
   app.set('trust proxy', true);
 
-  // Serve static uploads folder under both /uploads/ and /api/uploads/
+  // Serve static uploads folder with 1-year aggressive browser caching (immutable)
+  const staticUploadOptions = {
+    maxAge: 31536000000, // 1 year in ms
+    immutable: true,
+    setHeaders: (res: any) => {
+      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+    },
+  };
+
   app.useStaticAssets(join(process.cwd(), 'uploads'), {
     prefix: '/uploads/',
+    ...staticUploadOptions,
   });
   app.useStaticAssets(join(process.cwd(), 'uploads'), {
     prefix: '/api/uploads/',
+    ...staticUploadOptions,
   });
 
   app.use(

frontend/application/components/Hero.tsx

@@ -192,22 +192,34 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
               onTouchMove={onTouchMove}
               onTouchEnd={onTouchEnd}
             >
-              <AnimatePresence mode="wait">
-                {activeImageUrl && (
+              {/* Preloaded and persistent slider image stack */}
+              {heroBanners.length > 0 ? (
+                heroBanners.map((banner, idx) => (
                   <motion.img
-                    key={activeImageUrl}
-                    src={activeImageUrl}
-                    alt={activeBanner?.title || "Canina Pharma Germany"}
-                    initial={{ opacity: 0, scale: 1.05 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.98 }}
-                    transition={{ duration: 0.5 }}
-                    className="w-full h-full object-cover"
+                    key={banner.imageUrl || idx}
+                    src={banner.imageUrl}
+                    alt={banner.title || "Canina Pharma Germany"}
+                    initial={false}
+                    animate={{
+                      opacity: currentSlide === idx ? 1 : 0,
+                      scale: currentSlide === idx ? 1 : 1.04,
+                      zIndex: currentSlide === idx ? 10 : 0,
+                    }}
+                    transition={{ duration: 0.6, ease: "easeInOut" }}
+                    className="absolute inset-0 w-full h-full object-cover"
                     loading="eager"
-                    referrerPolicy="no-referrer"
+                    decoding="async"
+                    fetchPriority={idx === 0 ? "high" : "auto"}
                   />
-                )}
-              </AnimatePresence>
+                ))
+              ) : activeImageUrl ? (
+                <img
+                  src={activeImageUrl}
+                  alt={activeBanner?.title || "Canina Pharma Germany"}
+                  className="absolute inset-0 w-full h-full object-cover"
+                  loading="eager"
+                />
+              ) : null}
 
               {/* Gradient overlay and slide caption */}
               <div className="absolute bottom-0 left-0 right-0 p-6 sm:p-8 bg-gradient-to-t from-black/85 via-black/40 to-transparent text-white text-right">