How to give your Web apps a real speed boost

If your apps take any more than a few seconds to load, you better be ready to kiss your users goodbye. When it comes to page abandonment, there’s no quicker way to lose loyalty than slow load time.

An infographic from KISSmetrics shows that 12 percent of respondents say they expect load times on mobile to not merely match those of desktops, but exceed them. For sites that don’t deliver on par with reader expectations, an e-commerce site making $100,000 per day could lose more than $2.5 million in sales – all over a one-second page delay.

How can you make sure your Web app doesn’t lose all your consumers to mobile? We spoke to several London developers to get their top tips and tools for increasing your app’s speed.

Check for unnecessary or oversized images

“For me, [Web app speed] revolves around images,” says Lewis Flude, Product Lead at PublicBeta. In the early days of the Web, to make your app look fancy, you needed images to create good looking buttons and embellishments across the site. “This is no longer the case. Whatever you do, it’s good to evaluate how your app is using images, and whether there are any quick-wins available to you.”

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

It’s also important to prioritize and refocus your team on getting the app to load quickly. Functionality may be key, but performance will keep your user base steady.

“A lot of the time, I think developers aren’t in a position where they can spend time refactoring old code, so there’s a huge pressure to get things right the first time round,” Flude says. “Other things take priority, and what you end up with is a bunch of bloated features. Developers need to fight for their right to refactor and keep a Web app’s speed in check.”

Don’t ignore Android

This seems like a common consumer problem: Apps tend to come out first on iOS with a promise of the Android iteration to follow.

“Developers have a tendency to developer for one platform first and treat the other as a second class citizen,” Flude says. “Because of this, every now and again you’ll find an app that works beautifully on one platform, but doesn’t have the resources to do the other platform justice. Put comparable engineering teams on any of these platforms, and I’d expect them to come back with comparable results.”

Ben Nortier, Engineer at Future Ad Labs, adds that as iOS owns 54 percent of browser market share; it’s no wonder why developers focus on this operating system. But the standard Android browser has a 23 percent share, with Chrome on Android holding 6 percent.

Couple that with Android’s OS powering four out of five handsets in Q3 2013, and developers would do well not to ignore it.

“In general, you can be assured of a good experience on iOS,” says Nortier. “On Android, the situation is more complicated. The standard Android browser doesn’t perform as well as Chrome for Android or other browser alternatives, but it has a lot more users.”

Don’t forget to optimize the app for users who may be using older devices or those who haven’t upgraded to the latest operating system. Doing so allows your team to gauge how well your app will perform equally well for iOS and Android users.

Consistent measurement

Without constantly checking up on your app, you might never realize how slow your app is loading. “Web apps may be slow because of a server responding slowly to requests, or it could be on the client side,” Nortier says. “[But] as a rule of thumb, you can get some really good performance improvements by reducing the number of requests your app makes to the server and the size of those requests.”

Both Flude and Nortier say there’s no set protocol for how often to increase your app’s speed, but stress that developers should constantly check that new updates or features don’t decrease performance. Flude adds that it’s more important to refactor and refine code within realistic time frames.

Multitask

Not every developer agrees that speed updates are must. Elina Hedman and Andrew Bennett, co-founders of Mobile Agency Aware and Social Enterprise SixP.me, say that jumping straight into technical solutions rather than framing app problems psychologically is the biggest mistake developers make.

“Rather than spending time and money on optimizing speed, look to how you can make your app seem quicker,” says Hedman. “Instagram is a great example of this; [the app] starts uploading a user’s image to its servers way before you think. So while you’re pondering which hashtags to use, your image is already 50 percent uploaded.”

Bennett adds that if your Web app must take its time to load properly, at least make the less painful for the users. “Loading things in the background is vital, but things like manipulating loading bars to entertain users when something is loading can also help influence feelings towards the app.”

Tools to get started

Keeping in mind the above comments, are some tools developers can use to increase your Web app’s speed.

Kraken.io

With features from API integration to image resizing, it’s no wonder why Flude recommends Kraken.io to increase app speed. Kraken’s resizing feature scales your images to the sizes that suit your audience’s primary mobile platforms. The company’s motto maintains that “every single pixel counts”- and the work reflects this ethos.

TinyPNG

A second image option for image management, TinyPNG reduces the size of your PNG files, thus requiring fewer bytes to store data. The brainchild of Dutch Web service provider Voormedia is praised across the web for allowing users to upload up to 20 images at once, then watch as TinyPNG compresses them instantly after each upload has finished. Users are guaranteed stable reduction values of at least 70 percent, and as of March of this year, images can now be 3 MB per single picture vs. 1 MB last summer.

RequireJS/UglifyJS

Working on JavaScript? Nortier recommends using RequireJS alongside JS compressor/minifier UglifyJS. Require is used to manage dependencies between modules, whereas Uglify increases app speed via decreased HTTP requests.

“A big problem with front-end Javascript is that it’s non-modularity,” Nortier explains. “You end up downloading an entire library like jQuery even if you only use parts of it.

RequireJS has the added benefit of modularizing code so you avoid downloading Javascript you don’t need.”

Chrome DevTools

Google’s range of tools offers developers access to Web apps’ internal systems. Organized by task-specific groups, DevTools let you focus your work across eight types of specific app information, including Elements and Resources.

DevTools’ JavaScript Console lets developers test web apps by logging diagnostic methods and entering commands. And to debug JavaScript, look no farther than DevTools’ options.

Did we miss any tips or tools to increase app speed? Tell us in the comments.

Listen to this post as audio, courtesy of SaveToListen.

Image credit: Sashkin/Shutterstock