At Glean, Speed is our favorite feature. Unlike some companies, we’re unencumbered by any motivation to hold people’s eyeballs as long as possible just to show them ads. We’re free to optimize for helping people and teams find what they need and get out as fast as possible, so they can get big things done.
One of the quickest ways to find things with Glean is via its New Tab Page. It’s personalized and customized by each user – the layout, background, favorite sites, and suggested documents. Even with all this dynamic content, everyone expects a new tab to open immediately, with no perceptible delay. That presented a fun challenge for our engineering team – one that required a novel solution.
Take a look at the result in this video. This technical post explains how we did it.
When a web browser loads a page, it first has to fetch all of its resources. Historically this required several seconds of waiting for the network. Service Workers have changed that entirely. So, the first thing we did was to set up Workbox, an excellent open source framework which makes it simple to create a Service Worker that loads your page entirely from cache, even when offline.
Now that loading our code and resources was fast, the next problem was that it still required a round trip to the server to fetch the preferences. To avoid this, we cached everything locally to IndexedDB using redux-persist.
This seemed to work at first, but caused all kinds of performance issues in the app, especially for machines under load. Luckily, two of the founding members of Google’s Chrome Speed Team now work at Glean so we knew the tool to debug - Chrome Tracing. It uncovered that, by default, Chrome waits to flush all IndexedDB writes to disk via an fsync. Some browsers like Firefox do not, but at least Chrome gave us a tool to avoid it – relaxed durability. So we wrote our own redux-persist backend and also contributed a fix to Workbox. Now filesystem operations no longer get pathologically backed up.
But the end result speaks for itself. As far as we can tell, this is a novel technique. If there’s interest, we’d be happy to open source a generalized Workbox plugin.
We’re hoping you know! Interested in solving fun challenges like this and pushing the web platform to its limits with us? Check out our careers page.
Fill out the details below to get the full report delivered to your inbox.
Optimizing performance and resource costs for a modern cloud-only architecture often results in interesting technical challenges. Here’s how we discovered and debugged a Golang memory leak.
We migrated our Cloud SQL instances— a central part of the Glean index building architecture— to MySQL8. Here’s how we did it.
As more teams started using Collections, we realized how important it was to help people figure out which documents inside a given Collection were most relevant. You can now create Subcollections, which allow you to organize a group of documents and links into hierarchies and nest them within a Collection. You can also use Headers to create sections within Collections.
Inline styles didn’t scale with Glean's growth, so we chose a new solution that optimized performance and developer experience. But it didn’t come without a learning curve.