Tips and Tricks for Faster Web Apps

You can’t just build an application, throw it into the wild and expect good results, without putting an effort to make good user experience. Most importantly, modern applications should be fast and responsive to user interactions as much as they can be.

There are many aspects where your app can be slow and most of them are used in almost every app nowadays. Let’s take images for example — I can’t recall of a recent app that I used without adding an avatar. This is always connected with either querying external service like Gravatar or uploading an image, building thumbnails for the web and other generally slow processes.

Those can have huge impact on the responsiveness and user experience. Here are some lessons we learned along the way:

Do heavy lifting asynchronously

User interface should not be blocked with long-running tasks. This makes your application look like it is malfunctioning.

It is essential to provide information about the progress whenever possible. When progress can’t be shown, better use a notification (email for example) that something is happening and the result will be delivered later, but do so that your users can continue interacting with the UI. A nice example is the European GDPR regulation and its user data export requirements. Such process can be very slow depending on the amount of information that needs to be exported. It is the perfect candidate to be processed into the cloud and wired over email when ready.

Use on-demand processing

As we said earlier, image manipulation (creating thumbnails) can be a huge bottleneck, because processing time depends on the size of the images. Luckily there are cloud platforms and services that can do this on-demand (including all optimisations). Using such service and a good caching strategy makes the image processing almost instant.

Store assets on Content Delivery Networks (CDN)

Not only because generally CDNs are co-located and this makes them faster, but they also allow configuration of access, caching, load-balancing, compression and a lot more. That comes handy on the scale and saves you the configuration hassle.

Design something that works

While designing/developing your application, keep in mind that not everybody have the latest model devices and fast internet connection. Test against slow networks and test against slower devices! There are tools that can help you with this. For example, Chrome dev tools is what we, at Evermore, use in our day to day tasks.

Intuitive UI, prompt behaviour and speed are mandatory when building modern apps — be it mobile, web or desktop. Slow, inconvenient or irresponsive applications are very frustrating and most likely will kill the users’ interest.

What are the tools that you use for faster web apps?