From 0d041c6b61fddb96fe3c65764bf54298cdadbeba Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
Date: Fri, 15 May 2026 10:27:00 +0000
Subject: perf(images): lazy-load and async-decode off-screen imagery

Add loading=lazy and decoding=async to the 16 <img> elements that
weren't already deferring across Tools/Wrapped, Events, EasterEvent,
Hololive, and the rate-limited fallback. Also drop the
backdrop-filter: blur(160px) the dropdown items were paying on every
hover; the background-color change already gives sufficient feedback,
and the parent card's own blur stays.
---
 src/lib/Tools/Wrapped/Media.svelte        | 4 ++++
 src/lib/Tools/Wrapped/MediaExtras.svelte  | 4 ++++
 src/lib/Tools/Wrapped/Top/Activity.svelte | 2 +-
 3 files changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/lib/Tools/Wrapped')

diff --git a/src/lib/Tools/Wrapped/Media.svelte b/src/lib/Tools/Wrapped/Media.svelte
index f7dd3007..674f5f90 100644
--- a/src/lib/Tools/Wrapped/Media.svelte
+++ b/src/lib/Tools/Wrapped/Media.svelte
@@ -28,6 +28,8 @@ export let mangaMostTitle: string;
             )}
             alt="Highest Rated Anime Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
@@ -67,6 +69,8 @@ export let mangaMostTitle: string;
             )}
             alt="Highest Rated Manga Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
diff --git a/src/lib/Tools/Wrapped/MediaExtras.svelte b/src/lib/Tools/Wrapped/MediaExtras.svelte
index 6eefcbe9..9097fa90 100644
--- a/src/lib/Tools/Wrapped/MediaExtras.svelte
+++ b/src/lib/Tools/Wrapped/MediaExtras.svelte
@@ -22,6 +22,8 @@ export let genreTagTitle: string;
             src={proxy(topMedia.topGenreMedia.coverImage.extraLarge)}
             alt="Highest Rated Genre Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
@@ -53,6 +55,8 @@ export let genreTagTitle: string;
             src={proxy(topMedia.topTagMedia.coverImage.extraLarge)}
             alt="Highest Rated Tag Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
diff --git a/src/lib/Tools/Wrapped/Top/Activity.svelte b/src/lib/Tools/Wrapped/Top/Activity.svelte
index ce0b1b00..15b646e0 100644
--- a/src/lib/Tools/Wrapped/Top/Activity.svelte
+++ b/src/lib/Tools/Wrapped/Top/Activity.svelte
@@ -15,7 +15,7 @@ const currentYear = new Date(Date.now()).getFullYear();
 
 <div class="grid-item image-grid avatar-grid category top-category">
   <a href={`https://anilist.co/user/${$identity.name}`} target="_blank">
-    <img src={proxy(wrapped.avatar.large)} alt="User Avatar" onload={updateWidth} />
+    <img src={proxy(wrapped.avatar.large)} alt="User Avatar" loading="lazy" decoding="async" onload={updateWidth} />
   </a>
   <div>
     <div>
-- 
cgit v1.2.3