![Thomas Steiner](https://web.dev/images/authors/thomassteiner.jpg) Thomas Steiner [GitHub](https://github.com/tomayac) [LinkedIn](https://www.linkedin.com/in/thomassteinerlinkedin) [Mastodon](https://toot.cafe/@tomayac) [Bluesky](https://bsky.app/profile/tomayac.com) [Homepage](https://blog.tomayac.com/)

<br />

The Chrome team has made a number of performance-related improvements to the
implementation of IndexedDB (IDB). One such improvement has been to move the
backing store of each instance to a separate sequence (you can think of this
roughly as a separate thread). What this means is that concurrent use of IDB is
now faster, either from the same site, or from cross-site. This post gives all
the details, and explains what you need to do to take advantage of this move,
which is available from Chrome 126.

## Cross-site

If your use of IDB is cross-site, you don't need to do anything. Once this
browser-level move has happened, and the backing store of each IDB instance is
moved to a separate sequence, the performance win comes without you having to do
anything.

## Same-site

To get this performance enhancement for same-site usage, you need to segregate
your IDB usage into different instances, that is,
[storage buckets](https://developer.chrome.com/docs/web-platform/storage-buckets.md.txt). The following code sample
shows how this can work:

```javascript
const request = indexedDB.open('main', 1);
request.onsuccess = (event) => {
  /* Do stuff with the main instance. */
};

// By default, just use the regular IDB instance.
let idb = indexedDB;
// Open a separate storage bucket if the API is supported.
if ('storageBuckets' in navigator) {
  const bucket = await navigator.storageBuckets.open('logs-bucket');
  // Get access to the storage bucket's IDB instance.
  idb = bucket.indexedDB;
}
const bucketRequest = idb.open('logs', 1);
bucketRequest.onsuccess = (event) => {
  /* Do stuff with the separate instance. */
};
```

## Browser support

The performance gain mentioned in this post is a progressive enhancement that
you can make use of when the Storage Buckets API is supported in your browser
(from Chrome 122) and when the IDB instances are sharded, from Chrome 126.

## DevTools

If you inspect the IDB instances with Chrome
DevTools, you can see the used storage bucket in the section **Bucket name**,
highlighted with a red box in the following screenshot.

![Chrome DevTools inspecting the IndexedDB section. There are two logs databases, the storage bucket name](https://developer.chrome.com/static/blog/maximum-idb-performance-with-storage-buckets/maximumindexed--6emtap4mss6.png)

## Related links

- [Not all storage is created equal: introducing Storage Buckets](https://developer.chrome.com/docs/web-platform/storage-buckets.md.txt)
- [Draft specification](https://wicg.github.io/storage-buckets/)
- [Explainer](https://github.com/WICG/storage-buckets/blob/main/explainer.md)

## Acknowledgements

This post was reviewed by
[Evan Stade](https://www.linkedin.com/in/evan-stade-4585826) and
[Rachel Andrew](https://rachelandrew.co.uk/).