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:
Claudio
2026-05-12 00:30:43 +02:00
parent 68bbe6f024
commit 347f58b4f3
6 changed files with 112 additions and 21 deletions

View File

@@ -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