During the last few months we have systematically improved both front-end user interface, and backend server code for the Toggl main time tracking page. It was motivated by the fact that we found it increasingly hard to cope with the steady growth of users and traffic, resulting in serious slowdowns of the system and in some cases even downtime.

The majority of Toggl program code originated from the time when our user base was 10x smaller, so the system needed a major overhaul. There were also several functional shortcomings, for example entries were not refreshed automatically when changes were made elsewhere (e.g. mobile phone). Also we had no offline support of any kind on the web.

Our situation in May this year

  • It took 5-7 seconds to load a time tracking page in Toggl, quite often even up to 20 seconds and more. Most of the time was spent by the server to compile the necessary dataset of time entries, but also related data.
  • The whole backend was based on Ruby on Rails, we used Ruby 1.8 at that time.
  • User interface could not be used offline.
  • Javascript code was bloated and contained a lot of unnecessary code (for example we had multiple date parsing/formatting libraries, etc).
  • The loading and parsing of Javascript started to block our UI because of its size.
  • Backend API calls were not optimized for the purpose, we requested too much data which strained both the database and bandwidth.

New implementation

After careful consideration we decided to re-use the offline-enabled time tracking code that is also used in our mobile apps and in Toggl Desktop, only retaining the visual of the existing time tracking page. So basically we decided to replace the whole backend code of that page.

We had run some experiments with the Go programming language (http://golang.org/) before, and decided that we should re-implement some parts of our backend with this new platform. So far, it has paid off, as the development process was fast, and deployment surprisingly simple. The resulting code is a big improvement in terms of speed. We’ll continue to replace our backend code with Go.

Secondly we implemented a Redis-backed (http://redis.io/) WebSocket server in Go to enable realtime synchronization between different Toggl clients – so your time entries, projects etc. would be updated automatically if you use Toggl on multiple devices.

Thirdly we added HTML5 manifest and local storage to support offline usage of Toggl. This served also as the speed enabler. Offline was already implemented with our mobile interface m.toggl.com, so we reused a lot of that.

In frontend Javascript code, we’re moving to Backbone.js (http://backbonejs.org/). As the amount of Javascript code is increasing fast, this library enables to structure it better. For parsing, formatting and manipulating dates in Javascript, we’ve moved to Moment.js (http://momentjs.com/) It has simplified our code a lot.

Following Google Page Speed (https://developers.google.com/speed/pagespeed/) tips, we’ve started to use a Javascript loader to reduce resource blocking. At the moment, we’re using LABjs (http://labjs.com/).

Another update we made was to upgrade to Ruby 1.9. The upgrade gave the system another speed boost.

Finally we spent time measuring HTML/CSS/JS load times and optimizing the milliseconds there. Our goal was to get the load time to under 1 second, or even faster. While the tracking page now loads faster, it’s still a work in progress as we’re doing too many API requests when loading the timer. Also, we’re still using Javascript libraries that are quite bloated – for example for the sidebar report charts.

We still like Ruby on Rails a lot, and at the moment, will continue using it for serving user interface. Go will be used together with PostgreSQL and Redis for backend data crunching and efficient API calls.

Incremental launch

These changes encompassed several risks, as there were a lot of potential critical bugs associated. That’s why we decided to roll the update out incrementally. We started in early July, and slowly and cautiously added new users until we had approximately 10% using it. This amount of users gave us enough feedback on system stability and bugs. After 4 weeks it had stabilized enough to start rolling it out more aggressively. By now all users have been converted to the new version.

As mentioned before, speed is an important feature in Toggl. Robustness and speed is something you, our users, keep telling us if we ask what are the most important things you need from Toggl. We have gained some valuable lessons with the latest upgrade, and will continue implementing those also in other parts of Toggl.