All Case Studies Design Development Interviews Our Way Project Management

8 Reasons Why Your Web App is Slow

Speed is one of the most important things when it comes to conversion, retention and user experience in mobile apps. According to a report by Aberdeen Group, a 1-second delay in page load time equals 11 percent fewer page views, a 16-percent decrease in customer satisfaction, and a 7-percent loss in conversion rate. Moreover, according to Gomez.com, an increase in page response time from 2 to 10 seconds increased page abandonment rates by 38 percent. The stats are ruthless. Because of the long loading times, you can start losing your money. Whether it concerns you, or you want to raise this issue with your developer team or consulting partners, this article will help you spot the problems related to web app speed.

1. You Don’t Use CDN

CDN stands for Content Delivery Network and is a mesh of servers that replicate all your assets (images, styles, PDFs and everything else) in multiple locations across the world. Thus, when a user enters your website, CDN looks for the nearest server and projects the assets from this server instead of your origin server.

2. Your CSS Stylesheets Are Bloated and Not Mobile-first

The amount of CSS that a browser needs to parse has an impact on the page rendering speed. Bloated CSS files mean that you repeat a lot of CSS rules that recur across groups of elements. Lightweight CSS stylesheets decrease the amount of code that the rendering engine has to parse.

Currently, everyone is talking about responsive web design (RWD). In most cases, it is one of the most important things to implement. Using media queries is very popular among developers. However, not everyone knows that you can improve the speed of an application, especially on older devices, if you not only make your designs mobile-first but also code the CSS in a mobile-first manner.

Browsers skip and don’t have to parse and analyze all the code that is wrapped in media queries that are not matched. For mobile devices, we can focus on leaving mobile-first CSS without media queries (always parsed!), whereas all the code for desktops can be placed in media queries (always parsed on desktops, totally skipped on mobile).

3. You Don’t Use Server-side Rendering for Single Page Apps

Not using server-side rendering can lead to two negative consequences. Firstly, it significantly affects your SEO. The page is rendered after the JavaScript initialization, which means that for a moment your site is empty for Google. Officially, Google is able to handle your JavaScripts. However, many SEO agencies say that it still impacts your SEO results.

Additionally, no server-side rendering means that your users can’t see the page from the very beginning because the JavaScript engine takes some time to render on the client’s side. It might be a few hundred milliseconds or more than a second in a worst case scenario.

4. You Don't optimise Your Images

If you haven’t optimized your images yet, chances are they are too big. Try to use such tools as Kraken.io to remove all the metadata and compress images properly. It might save up megabytes of data, which is crucial for mobile users! You should also avoid images in the base64 format as they are hard to gzip, and they will block the rendering of your page. Last but not least, you don’t have to use PNGs everywhere – they are heavy and in most cases can easily be replaced by the lightweight JPEG format.

5. You Don’t Use SVGs

SVGs are much lighter than rasterized images because they are vectors, which also means that they will look good in all resolutions. You can use SVGs for logos, icons, graphics, or drawings.

6. You Block Assets

Assets, such as JavaScripts or CSS, can be downloaded asynchronously or synchronously. The latter, which is the default, blocks the rendering until the download finishes. Depending on a use case, it’s often much better to allow asynchronous download and show the page as soon as possible. The trade-off will be that for a short moment your page will look a bit ugly due to missing CSS assets. However, asynchronous will reduce loading times for slow mobile-connections. Google claims that it is always better to make assets asynchronous.

7. Assets Are Unoptimised or Unzipped

One of the most common solutions to improve web app speed is to gzip your CSS and JavaScript assets. All modern browsers support gzipped assets and it can decrease your download times a lot – don’t forget about this easy win!

8. You Don’t Use Caching

Browsers can cache a lot of resources: starting from images, CSS, and JavaScript to full API requests. If you want to take advantage of the fact that the user has already visited your web app in the past, remember to properly configure the caching options in all your assets. It seems trivial but can substantially improve the loading speeds.

Wrap-up

If you want to check if your web app is slow, you can easily do it here. It’s one of Google’s most frequently used tools. You should always aim at scoring at least 90 out of 100 points to provide optimal user experience. Remember to test the speed continuously or at least periodically. It’s easy to make your website sluggish, and even seemingly insignificant changes can inflate loading times significantly.

New Call-to-action
 
READ ALSO FROM Frontend
Read also
Need a successful project?
Estimate project or contact us