starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #2694] [MERGED] Client side cover image caching #3775

New Issue
Closed
opened 2026-04-25 00:17:01 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:17:01 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/2694
Author: @mikiher
Created: 3/1/2024
Status: ✅ Merged
Merged: 3/2/2024
Merged by: @advplyr

Base: master ← Head: client-image-caching

📝 Commits (2)

  • b47793c Add cache control header for timestamped cover image requests
  • 4fe672f Update cover image URLs with timestamp where available

📊 Changes

3 files changed (+7 additions, -4 deletions)

View changed files

📝 client/components/modals/item/tabs/Match.vue (+2 -2)
📝 client/pages/library/_library/podcast/latest.vue (+2 -2)
📝 server/controllers/LibraryItemController.js (+3 -0)

📄 Description

This adds client-side caching for book and podacst cover images.

Caching is performed only for timestamped requests, with cachce-control header set to 'private, max-age=86400'. This means:

  • Caching is only done on the client, and not in any proxies. I chose this because currently the URL contains the authorization token, which somewhat of a security flaw, and also makes caching useful only for a specific client and user.
  • Caching TTL is one day. Later we can add 'immutable', since the timestamp is updated when the image changes on the server, so cache-busting is possible.

Most important cases in which cover images are displayed on the client already have server-originated timestamp (updatedAt). I updated a couple of places where updatedAt was available but not used.

Depending on various parameters (http vs. https, local vs. remote), this can reduce image loading latency by a factor of 2-4.

Example:
Home page before cover caching (home network, HTTP):
Screenshot 2024-02-26 131331
Home page after cover caching (home network HTTP):
Screenshot 2024-02-26 131847

You can see covers load latency goes down from ~500ms to ~200 ms.

Another example:
Home page before cover caching (home network though reverse proxy, HTTPS):
Screenshot 2024-02-26 134125
Home page after cover caching (home network though reverse proxy, HTTPS):
Screenshot 2024-02-26 134518

Here you can see covers load latency go down from ~270ms to about 70ms

The gains would probably be even more impressive if measured over remote connections.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/2694 **Author:** [@mikiher](https://github.com/mikiher) **Created:** 3/1/2024 **Status:** ✅ Merged **Merged:** 3/2/2024 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `client-image-caching` --- ### 📝 Commits (2) - [`b47793c`](https://github.com/advplyr/audiobookshelf/commit/b47793c365aaafee08db3cb4fe0b5a070029fb4f) Add cache control header for timestamped cover image requests - [`4fe672f`](https://github.com/advplyr/audiobookshelf/commit/4fe672f09d794c05d31a9375b2a686ed1c0dfe10) Update cover image URLs with timestamp where available ### 📊 Changes **3 files changed** (+7 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `client/components/modals/item/tabs/Match.vue` (+2 -2) 📝 `client/pages/library/_library/podcast/latest.vue` (+2 -2) 📝 `server/controllers/LibraryItemController.js` (+3 -0) </details> ### 📄 Description This adds client-side caching for book and podacst cover images. Caching is performed only for timestamped requests, with cachce-control header set to 'private, max-age=86400'. This means: - Caching is only done on the client, and not in any proxies. I chose this because currently the URL contains the authorization token, which somewhat of a security flaw, and also makes caching useful only for a specific client and user. - Caching TTL is one day. Later we can add 'immutable', since the timestamp is updated when the image changes on the server, so cache-busting is possible. Most important cases in which cover images are displayed on the client already have server-originated timestamp (updatedAt). I [updated a couple of places](https://github.com/advplyr/audiobookshelf/commit/4fe672f09d794c05d31a9375b2a686ed1c0dfe10) where updatedAt was available but not used. Depending on various parameters (http vs. https, local vs. remote), this can reduce image loading latency by a factor of 2-4. Example: Home page before cover caching (home network, HTTP): ![Screenshot 2024-02-26 131331](https://github.com/advplyr/audiobookshelf/assets/22557398/a62f65c2-dea1-4211-a4ea-c32ea2df6ee5) Home page after cover caching (home network HTTP): ![Screenshot 2024-02-26 131847](https://github.com/advplyr/audiobookshelf/assets/22557398/882ed37d-4ab8-41b1-a990-7d7bb4e45ccb) You can see covers load latency goes down from ~500ms to ~200 ms. Another example: Home page before cover caching (home network though reverse proxy, HTTPS): ![Screenshot 2024-02-26 134125](https://github.com/advplyr/audiobookshelf/assets/22557398/bcd41c73-8a0b-46d8-80f4-6b3253b8bb99) Home page after cover caching (home network though reverse proxy, HTTPS): ![Screenshot 2024-02-26 134518](https://github.com/advplyr/audiobookshelf/assets/22557398/2a8f65bb-80b1-44ec-9b23-a694b600f725) Here you can see covers load latency go down from ~270ms to about 70ms The gains would probably be even more impressive if measured over remote connections. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:17:01 +02:00
adam closed this issue 2026-04-25 00:17:01 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#3775
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?