Recently, the fullscreen image view underwent some significant updates to improve page load time. An improvement of 0.295 seconds (25%) to be exact... which means that on average, full images will load in less than a second. Such a seemingly small update took almost an entire day - but here's why it was worth it, and how it was achieved.

Speed is everything.

A fast load time on fullscreen images was an obvious point for improvement, since displaying your images is the primary focus of the app. And since faster pages means a nicer experience for your clients... improving performance is one of the most important, and defining factors of the app.

The specifics of how it was achieved is slightly more complicated, but as it turns out - the order in which things are loaded had the greatest effect on performance. Here's how a typical load measures up...

The first 200ms

The page grabs information about your image via a super quick connection to the database - nothing fancy, just the absolute bare minimum (URLS, background colours etc). Then we grab the structural stuff (CSS) that dictate how your image is placed. The structure is a tiny, compressed CSS file that lives on a lightning-fast CDN, and presents an HTML framework that prevents the page from jumping around or flashing un-styled content. Basically, building a space to drop your image into. Read this great resource for some good tips on optimising CSS.

200–€”400ms

Next up is your actual image which is pulled from another crazy-fast CDN. The image is also accompanied by your custom styles, like background colours and positioning (another CSS file). Pulling in those additional custom styles separately (rather than with the structural stuff) not only avoids the page jumping around, but allows your browser to grab the file simultaneously since the file is located on a separate server.

Finishing up

For individual images, that's it... the page has finished loading. For those within projects, a few other items are loaded in order of when they're required since at this point, the image is shown and looks awesome - so the rush isn't quite as intense. We pull in javascript (from Google's CDN this time), annotation capabilities and retina styles - which will take another 400ms, but happen in the background without affecting the look of your image.

A lot of work has gone into those first milliseconds, but with over 1 million page loads every month... the milliseconds really make a noticeable difference - hopefully you agree.