I've written before about how speed is everything when it comes to Prevue. In fact, it's so important that last year the entire app was re-written from scratch when the old system wasn't performing as efficiently as expected.

It takes courage to start a fresh - especially when a fresh start represents a huge body of work. Fortunately the hard work paid off, and Prevue is now an incredibly fast and scalable system. If you haven't already, give it a test run. So for those who've expressed interest in how Prevue got so fast, I thought I'd share a rough checklist of things that'll help improve performance when you're building a web product — it's by no means a definitive guide, but any one of the below should significantly improve speed. Hold tight, this is going to get nerdy

A custom framework

There are lots of existing frameworks that exist to make app development easier and faster to develop — unfortunately these frameworks can come with a significant amount of bloat, which makes scaling or streamlining a system extremely hard. For Prevue, which runs on PHP, the best framework was a custom one — written to supply the app with the bare essentials, and nothing more. In comparison to a lot of opensource solutions, this custom PHP framework makes significantly less calls to the database, caches as much stuff as possible, and fetches just the bare minimum required to show your images. Everything thereafter is a simple AJAX request — which means users only load features as and when they're needed.

Amazon AWS

In addition to the main dedicated servers, Prevue utilises various Amazon web services to store and backup data and images. Their services are incredibly fast, so it made sense to use them instead of relying on just one server setup to do everything. Distributing load over several servers comes with the additional benefit of data safety — if something happens to one of the servers, there are multiple fallbacks available. Amazon is also incredibly cost effective, and built with scalability in mind.

Content distribution

Every CSS, Javascript and image file exists on a content distribution network (CDN) separate to Prevue’s own servers (they live over on the revue.it domain). The beauty of 'cloud' distribution is that all assets are cached, compiled and loaded as fast as possible, no matter where you are in the world. An additional bonus is that because files are mirrored across various global server locations - if one server is being particularly slow, it doesn't hold up the loading of other assets.

LESS is more

As for the presentation layer of the app, fewer styles as possible means smaller asset sizes - after building an efficient system, the last thing you want is for users to wait around for giant CSS files to load. To help with that, all the stylesheets on Prevue are compiled using LESS (which removes all the unnecessary bloat) and are carefully split up; so instead of one giant CSS doc, there are several small ones that only load when they're needed. More information about the loading of styles is explained here

Smart sprites

Whilst there are a few small exceptions, pretty much every image you need for the Prevue interface is contained within one master sprite, which is super-compressed and lives on the CDN (above). And to make things even snappier for new accounts, that master image sprite is pre-loaded on the Signup page — which means the interface is loaded before you even create your account. There's even an additional sprite for retina displays...

Javascript fallbacks

Having everything make AJAX requests is cool, but that only makes sense once the JavaScript has loaded… which, for some people may take fractionally longer than others (like if you’re on your phone, or on the train). So to save those few milliseconds of pain, and to reduce the appearance of latency for those occasions where the internet drops out - the entire app also works without Javascript. Every AJAX action, no matter how small, also has an HTML fallback option. So even if your browser hasn’t yet finished loading everything is needs, users can still perform all the tasks they want without the app getting in the way.

Smart use of API's

Sometimes you've got to admit that other people and products do a better job than you ever could. This is especially true when it comes to specific functionality tasks like sending emails, or payment gateways. So instead of trying to do everything, Prevue enlists the help of various API’s to ensure the app runs as smoothly as possible —€“ effectively outsourcing the parts that are better handled by the experts. Choosing and using the right API's means that the app can rely on other services to complete the more complex tasks… things like sending notifications (Postmark), storing emails (Campaign Monitor) and uploading images (Amazon SDK). The exception to this is where personal information is involved - in which case, Prevue makes sure it's safe on its own servers.

Throttling

Finally (and arguably most importantly), every page and process in the app was slowed down by 1 second to simulate a slow connections during development of the app. As a developer spending all day building a feature, this gets pretty frustrating. But eventually with this throttling method, you start to get used to your limitations, and begin to engineer clever ways to imitate success; ultimately regarding speed as a precious comodity. The bonus here is that once the app is pushed to production, and the speed limit was dropped, the app was faster than ever before (literally). The benefit to the user is that accounts containing 1000+ images have the same speedy experience as new accounts.

There are various other ways that have contributed towards a faster app - things like database formatting and object oriented development — but the above is what has made the most significant impact on speed for Prevue. It’s been a bit of a painful experience, and a giant learning curve - but all of the above has meant that Prevue now loads faster than ever… which is totally worth it.