Performance Update: Accelo is 40% Faster Today

While we've had amazing feedback on the design and functionality of Accelo since our launch last November, we've heard one consistent pain point loud and clear - the application just isn't fast enough. The toughest part about the feedback we've gotten on the performance front is that we completely agree with you all and were just as frustrated that things weren’t running as smoothly as they should. Solving these problems has proved more challenging than anticipated.

The good news is that our engineering team has been working hard on improving the performance of Accelo, and in the last 24 hours we've rolled out a major update that reduces the application page load time by over a third, and in some cases close to 40%!

The Browser Bottleneck

The main problem we experienced in our upgrade to Accelo in November related to bottlenecks in how web browsers render the JavaScript much of our application code is written in.

Most of the application code is run on the servers we manage and control, and involves querying databases and applying business logic and security rules. However, most of the work that goes into displaying an Accelo page in your browser happens in JavaScript, which has to be loaded, compiled and run by your web browser.

While the server-side application code is mostly focused on getting data to your browser via API calls and the like, the client-side JavaScript in your browser is responsible for laying out the page, showing you the stream, attachments, charts and so on.

Essentially, this means the environment where the code is run is not somewhere we have the same control and visibility over - it means that the speed with which Accelo shows you new pages is impacted if your computer is working hard or is low on memory.

While this move of "code to the client side" has some drawbacks, the benefits of doing it well are tremendous. Instead of having to always click on a link and wait for a whole new page to load, you can click on a tab (like the Stream) or change the fields that you're filtering with on a list screen, or you can even do things like log time, send emails or upload files - all without having to leave the page you're currently on. To make Accelo better for our users, we need to be doing more this way, not less.

Using (and abusing) Angular

To help make this client-side code secure and compatible across a wide range of browsers, we use a JavaScript framework from Google called Angular. In small doses it is an unqualified success, but the Accelo application we shipped in November was pushing the limits of what Angular should be doing.

The result was a super frustrating experience where:

1. You'd click on a link like View Company, which loads in a new page.

2. You'd then see the screen partly loaded, generally in under a second, but this section would just be the container for the Angular application.

3. For the next 4+ seconds (or longer depending on how fast your computer is, how many tabs you have open, what other programs you're running, etc) you'd be frustratedly looking at a part-built screen while the Angular application "bootstrapped" or got started.

4. When the bootstrapping process finally finished, the application would quickly display the key features of the page, and load in some final pieces like the activity stream without blocking your ability to change tabs, etc.

No more Mr Nice Guy

Our engineers made some incremental improvements in the months after launch to "trim the fat", but a bit over a month ago they decided they needed to stop playing “Mr Nice Guy” and get ruthless.

We assembled a crack team of developers who thoroughly instrumented the "apparent" performance of the application as our users saw it and then set about rewriting large sections of code, including eliminating technology known as "web components" in favor of a much faster approach. This also involved a number of upgrades to Angular to take advantage of improvements in performance, but also required rewriting numerous parts of the application to speed up the "startup" or bootstrap phase which was causing much of the frustration and delays our users were experiencing while a partly loaded page was trying to render.

With success being defined as not changing (breaking) the application while at the same time rewriting slabs of it to be more performant in a new version of the Angular framework, our development team dug in, spending many weekends and late nights methodically dissecting, rewriting and reassembling our complex front-end code with its many dependencies.

After beta testing their work for the last week, we pulled the switch yesterday to deploy the faster code into Accelo. While there's still room for surprises, the results so far are fantastic. With almost no issues and performance noticeably faster, our data suggests speeds up to 40% faster on some of our most commonly used screens like Company View. The super frustrating bootstrap time has been reduced by around 80%, so while there's still going to be a bunch of work for your browser to build and display a complex page, the big bottleneck has been dramatically reduced.

Not Done Yet

We've still got a lot we want to do on the performance front so we're keeping our crack performance squad assembled and focused on making even more improvements. While it is frustrating that many of our incremental wins are barely noticeable to our users, we're confident that our improvements over the coming months will help all of our customers be more successful and productive, one faster screen load at a time.