diff options
| author | Fuwn <[email protected]> | 2026-02-02 23:35:15 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-02-02 23:35:15 -0800 |
| commit | 1872b26efe3383d95000df0b956f92e7c3043538 (patch) | |
| tree | 4f920a1a4d8d628c4612d4181cad92cdf7e582d7 /src/lib/List | |
| parent | fix: Resolve all ESLint errors and warnings (diff) | |
| download | due.moe-1872b26efe3383d95000df0b956f92e7c3043538.tar.xz due.moe-1872b26efe3383d95000df0b956f92e7c3043538.zip | |
perf(images): Optimise cover images for LCP and CLS
Diffstat (limited to 'src/lib/List')
| -rw-r--r-- | src/lib/List/CleanGrid.svelte | 7 | ||||
| -rw-r--r-- | src/lib/List/covers.css | 7 |
2 files changed, 12 insertions, 2 deletions
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte index ed4a9733..1e6f5a12 100644 --- a/src/lib/List/CleanGrid.svelte +++ b/src/lib/List/CleanGrid.svelte @@ -25,8 +25,9 @@ class="covers" style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`} > - {#each processedMedia as title} + {#each processedMedia as title, index} {@const progress = (title.mediaListEntry || { progress: 0 }).progress} + {@const isAboveFold = index < 6} {#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : progress != title.episodes} <div class="cover-card" id={`${type}-${title.id}-${uniqueID}`}> @@ -59,6 +60,10 @@ classList={`cover${ title.isAdult && $settings.displayBlurAdultContent ? ' adult' : '' }`} + loading={isAboveFold ? 'eager' : 'lazy'} + fetchpriority={isAboveFold ? 'high' : undefined} + width={$settings.displayDataSaver ? 230 : 460} + height={$settings.displayDataSaver ? 325 : 650} /> </span> </a> diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css index c83b984e..0993a5c8 100644 --- a/src/lib/List/covers.css +++ b/src/lib/List/covers.css @@ -9,6 +9,10 @@ background-size: cover; background-position: center; border-radius: 8px; + aspect-ratio: 46 / 65; + width: 100%; + height: auto; + object-fit: cover; } .cover-title { @@ -58,11 +62,12 @@ } .cover-container { - /* overflow: hidden; */ display: flex; justify-content: center; align-items: center; border-radius: 8px; + aspect-ratio: 46 / 65; + overflow: hidden; } button { |