diff options
| author | Fuwn <[email protected]> | 2026-02-02 23:49:06 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-02-02 23:49:06 -0800 |
| commit | 9a9870f44913e286923831d113a55bee5c152f69 (patch) | |
| tree | 796f5ecc32d72bfdadaa99465afa1670a2843621 /src | |
| parent | perf(LandingHero): Optimise for faster LCP (diff) | |
| download | due.moe-9a9870f44913e286923831d113a55bee5c152f69.tar.xz due.moe-9a9870f44913e286923831d113a55bee5c152f69.zip | |
perf: Optimise LCP with image loading and animation fixes
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Tools/Birthdays.svelte | 10 | ||||
| -rw-r--r-- | src/lib/Tools/BirthdaysTemplate.svelte | 10 | ||||
| -rw-r--r-- | src/lib/Tools/UmaMusumeBirthdays.svelte | 10 |
3 files changed, 27 insertions, 3 deletions
diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte index 122662d4..f4a4e9c5 100644 --- a/src/lib/Tools/Birthdays.svelte +++ b/src/lib/Tools/Birthdays.svelte @@ -135,7 +135,13 @@ data-tooltip-disable={birthday.origin === undefined} > {birthday.name} - <img src={birthday.image} alt="Character (Large)" class="character-image" /> + <img + src={birthday.image} + alt="Character (Large)" + class="character-image" + loading="lazy" + decoding="async" + /> </a> </div> {/each} @@ -158,7 +164,9 @@ img { width: 100%; height: auto; + aspect-ratio: 300 / 413; object-fit: cover; + object-position: top; border-radius: 8px; margin-top: 0.5rem; box-shadow: 0 4px 30px var(--base01); diff --git a/src/lib/Tools/BirthdaysTemplate.svelte b/src/lib/Tools/BirthdaysTemplate.svelte index daf4c5af..5f476275 100644 --- a/src/lib/Tools/BirthdaysTemplate.svelte +++ b/src/lib/Tools/BirthdaysTemplate.svelte @@ -82,7 +82,13 @@ target="_blank" > {birthday.name} - <img src={birthday.pictureURL} alt="Character" class="character-image" /> + <img + src={birthday.pictureURL} + alt="Character" + class="character-image" + loading="lazy" + decoding="async" + /> </a> </div> {/each} @@ -106,7 +112,9 @@ img { width: 100%; height: auto; + aspect-ratio: 300 / 413; object-fit: cover; + object-position: top; border-radius: 8px; margin-top: 0.5rem; box-shadow: 0 4px 30px var(--base01); diff --git a/src/lib/Tools/UmaMusumeBirthdays.svelte b/src/lib/Tools/UmaMusumeBirthdays.svelte index 29b1faa6..8ee6697b 100644 --- a/src/lib/Tools/UmaMusumeBirthdays.svelte +++ b/src/lib/Tools/UmaMusumeBirthdays.svelte @@ -99,7 +99,13 @@ use:tooltip > {name} - <img src={birthday.sns_icon} alt="Character" class="character-image" /> + <img + src={birthday.sns_icon} + alt="Character" + class="character-image" + loading="lazy" + decoding="async" + /> </a> </div> {/each} @@ -125,7 +131,9 @@ img { width: 100%; height: auto; + aspect-ratio: 300 / 413; object-fit: cover; + object-position: top; border-radius: 8px; margin-top: 0.5rem; box-shadow: 0 4px 30px var(--base01); |