perf(showcase): prefetch adjacent examples and shrink gallery thumbnails

- Warm the HTTP cache for examples adjacent to the active one after
  expand and on every navigation, so prev/next feels instant (images
  only, deduped, low fetch priority)
- Add GALLERY_THUMBNAIL optimization mode (width=160) for the 72px
  gallery strip instead of reusing the 450px card thumbnails
- Hint priorities: fetchpriority=high on the main media, low on
  strip thumbnails
This commit is contained in:
Will Miao
2026-09-01 22:26:50 +08:00
parent 9584fa85c9
commit ed2a17970f
5 changed files with 153 additions and 6 deletions
+17 -3
View File
@@ -11,6 +11,8 @@ export const OptimizationMode = {
SHOWCASE: 'showcase',
/** Thumbnail size for cards - uses /width=450,optimized=true */
THUMBNAIL: 'thumbnail',
/** Small thumbnails for the showcase gallery strip (72px display) - uses /width=160,optimized=true */
GALLERY_THUMBNAIL: 'gallery-thumbnail',
};
export const DEFAULT_CIVITAI_PAGE_HOST = 'civitai.com';
@@ -100,10 +102,11 @@ export function rewriteCivitaiUrl(sourceUrl, mediaType = null, mode = Optimizati
// Full quality for showcase - no width restriction
replacement = '/optimized=true';
} else {
// Thumbnail mode with width restriction
replacement = '/width=450,optimized=true';
// Thumbnail modes with width restriction
const width = mode === OptimizationMode.GALLERY_THUMBNAIL ? 160 : 450;
replacement = `/width=${width},optimized=true`;
if (mediaType && mediaType.toLowerCase() === 'video') {
replacement = '/transcode=true,width=450,optimized=true';
replacement = `/transcode=true,width=${width},optimized=true`;
}
}
@@ -161,6 +164,17 @@ export function getThumbnailUrl(url, type = 'image') {
return getOptimizedUrl(url, type, OptimizationMode.THUMBNAIL);
}
/**
* Get gallery-strip-thumbnail-optimized URL (width=160, for the 72px strip)
*
* @param {string} url - Original URL
* @param {string} type - Media type ("image" or "video")
* @returns {string} - Optimized URL for gallery strip thumbnail display
*/
export function getGalleryThumbnailUrl(url, type = 'image') {
return getOptimizedUrl(url, type, OptimizationMode.GALLERY_THUMBNAIL);
}
/**
* Check if a URL is from CivitAI
*