From 0d041c6b61fddb96fe3c65764bf54298cdadbeba Mon Sep 17 00:00:00 2001 From: Fuwn 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 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/Error/AnimeRateLimited.svelte | 2 +- .../Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte | 2 ++ src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte | 8 ++++++++ src/lib/Events/Event.svelte | 4 ++-- src/lib/Events/Group.svelte | 4 ++-- src/lib/Hololive/Stream.svelte | 2 +- src/lib/Layout/Dropdown.svelte | 1 - src/lib/Tools/Wrapped/Media.svelte | 4 ++++ src/lib/Tools/Wrapped/MediaExtras.svelte | 4 ++++ src/lib/Tools/Wrapped/Top/Activity.svelte | 2 +- 10 files changed, 25 insertions(+), 8 deletions(-) (limited to 'src/lib') diff --git a/src/lib/Error/AnimeRateLimited.svelte b/src/lib/Error/AnimeRateLimited.svelte index b3eb1ccb..70509a0c 100644 --- a/src/lib/Error/AnimeRateLimited.svelte +++ b/src/lib/Error/AnimeRateLimited.svelte @@ -13,7 +13,7 @@ import Popup from "$lib/Layout/Popup.svelte"; - + {/await} {/await} diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte index 8faf0ba3..f606f366 100644 --- a/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte +++ b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte @@ -21,6 +21,8 @@ const handleClick = (index: number) => { Option {i + 1} { id="egg-visual-{targetID}-{id}" src="https://images.vexels.com/media/users/3/162149/isolated/preview/7f9f0546b21308e4851956e9c15313c9-egg-easter-painted-easter-egg-easter-egg-spot-pattern-stripe-flat.png" alt="Easter Egg" + loading="lazy" + decoding="async" class="egg" /> @@ -133,6 +135,8 @@ const onLeavePopup = () => { Banner @@ -156,6 +160,8 @@ const onLeavePopup = () => { Badge 1 @@ -169,6 +175,8 @@ const onLeavePopup = () => { Badge 2 diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte index f8d0efbc..a1d6cf42 100644 --- a/src/lib/Events/Event.svelte +++ b/src/lib/Events/Event.svelte @@ -12,14 +12,14 @@ let { event, avatar = false }: { event: Event; avatar?: boolean } = $props(); style={`background-image: ${event.banner ? `url(${event.banner})` : 'none'}; padding: 0;`} > {#if event} - + {/if}
{#if avatar} {/if} diff --git a/src/lib/Events/Group.svelte b/src/lib/Events/Group.svelte index 02cd53ac..9b0ddba5 100644 --- a/src/lib/Events/Group.svelte +++ b/src/lib/Events/Group.svelte @@ -11,13 +11,13 @@ let { group }: { group: Group } = $props(); style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`} > {#if group} - + {/if}
diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte index 7ad681fd..d8122f50 100644 --- a/src/lib/Hololive/Stream.svelte +++ b/src/lib/Hololive/Stream.svelte @@ -39,7 +39,7 @@ export let icon: string; | {#if icon} - Avatar + Avatar {/if} diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte index 4e2f8617..105b29f3 100644 --- a/src/lib/Layout/Dropdown.svelte +++ b/src/lib/Layout/Dropdown.svelte @@ -206,7 +206,6 @@ const handleItemKey = async (e: KeyboardEvent, index: number) => { .dropdown-content a:hover { border-radius: 8px; - backdrop-filter: blur(160px); background-color: var(--base01); } 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} /> @@ -67,6 +69,8 @@ export let mangaMostTitle: string; )} alt="Highest Rated Manga Cover" class="cover-image" + loading="lazy" + decoding="async" onload={updateWidth} /> 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} /> @@ -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} /> 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();
- User Avatar + User Avatar
-- cgit v1.2.3