perf(thumbs): pool NC client, smaller grid thumbs, eager owner load
Five stacked optimisations for the thumbnail hot path so the timeline grid lands in fewer round trips and fewer bytes. 1. PhotoThumbnail: switch from 'medium' (640px) to 'small' (240px) for grid cells. 240px oversamples 150-200px logical cells on 2x retina and drops payload 5-8x. Lightbox and preview filmstrip keep 'large' and 'medium' respectively. 2. nextcloud_dav: pool the httpx client. A module-level AsyncClient with HTTP/2 + keepalive (max_connections=64, keepalive_expiry=120s) replaces the per-request constructor that paid a fresh TCP+TLS handshake on every preview fetch. Auth is per-user so it stays at the call site via auth=BasicAuth(...). Lifespan-managed: init in main.py's lifespan startup, aclose on shutdown. requirements.txt gains the http2 extra to pull in h2 (not currently installed). Same change applies to fetch_memories_info_async since it hits the same host. 3. PhotoThumbnail img: add decoding="async" so JPEG/WebP decode moves off the main thread, plus fetchPriority="low" so grid backfill doesn't fight UI fetches. 4. Eager-load Photo.user via joinedload from the thumb handler. _get_photo_with_share_fallback gains an options parameter so other callers stay zero-overhead; only the thumb handler asks for the owner join. Eliminates the second SELECT users per request. 5. Disk-fallback path picks up Cache-Control: private, max-age=86400 in both the FileResponse and X-Accel branches so re-renders match the NC primary path's caching behaviour. Net: a warm grid page should drop from ~200-400 ms median per thumb to well under 100 ms; payload drops ~5-8x; backend sustains higher concurrency with fewer sockets to Nextcloud and one fewer Postgres round-trip per request.
This commit is contained in:
@@ -113,7 +113,10 @@ function PhotoThumbnailImpl({
|
||||
|
||||
// Cache-bust on retry so the browser actually re-requests instead of
|
||||
// serving the cached 404.
|
||||
const baseUrl = photosApi.getThumbnailUrl(photo.id, 'medium')
|
||||
// 'small' (240px) is plenty for grid cells even on 2x retina; the
|
||||
// previous 'medium' (640px) was 7x more pixels for no visible win.
|
||||
// Preview/lightbox uses 'large' via getPreviewImageSrc.
|
||||
const baseUrl = photosApi.getThumbnailUrl(photo.id, 'small')
|
||||
const sep = baseUrl.includes('?') ? '&' : '?'
|
||||
const thumbnailUrl = retryCount > 0 ? `${baseUrl}${sep}retry=${retryCount}` : baseUrl
|
||||
|
||||
@@ -286,6 +289,13 @@ function PhotoThumbnailImpl({
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
loading="lazy"
|
||||
// Off the main thread: scrolling stays smooth even when
|
||||
// dozens of cells decode simultaneously.
|
||||
decoding="async"
|
||||
// Grid thumbs are background content vs whatever the
|
||||
// browser is fetching for the active route — let it
|
||||
// prioritise UI over filling the timeline.
|
||||
fetchPriority="low"
|
||||
/>
|
||||
{/* Loading indicator. The outer wrapper already pulses via
|
||||
* `bg-surface animate-pulse` while !imageLoaded, which is the
|
||||
|
||||
Reference in New Issue
Block a user