Blog

How To Improve Web App Speed: Tips & Tricks: Part 1

Back
Web App Speed

Date
18 Nov 2022

Author
Thomas King

Your web app performance matters. It affects everything from user experience to conversion rates. Here are our tips on how to improve it!

In recent years the web landscape has shifted dramatically. Users want more interactive and fluid experiences, and they want them quickly. Patience. Speed is of utmost importance and has become a metric by which people assess the quality of web applications, along with the application’s overall performance.

Recognising The Need for Speed

People don’t need to demonstrate their desire to move through an experience at rapid-fire speed. They show it with each logged interaction.

  • Nearly 70% of consumers admit that page speed impacts their willingness to buy from an online retailer.
  • 47% of users visiting a website or web app will abandon if it’s not loaded within 3 seconds.
  • 88% of consumers are less likely to return to a site after a bad experience.
  • We remember wait times being 35% longer than reality and base our satisfaction on this remembered web application performance rather than reality.
  • 85% of mobile users expect pages to load as fast or faster than they load on the desktop.

Things That Can Affect Your Web App’s Speed

There are several factors that will affect a web application’s performance and speed.

Media Web Page Size

The average size of web pages is growing, according to sources. The average website was 1958KB in size at the end of 2014, but as of April 15, 2016, that size had increased to 2296KB. It becomes more difficult to maintain web application performance when you add more features since the user must download more data to his phone or computer. Teams working on product development and development are hampered by this.

The average size of a website has grown by 17% in just one and a half years. Given how participatory websites are growing, this makes sense. The issue? There are no signs that this tendency will reverse.

TCP (Transmission Control Protocol) Slow Start

Internet speeds are improving as TCP slow start regulates the amount of data that can be sent with each packet over the TCP / IP connection. This is done to avoid traffic congestion which will slow things down further. Maintaining the performance and speed of web applications isn’t as simple as adding more servers or increasing bandwidth.

Media

Time to first paint has dramatically increased due to the richer resources we provide to our users.


(First Paint, part of the Paint Timing API, is the time between navigation and when the browser renders the first pixels to the screen, rendering anything that is visually different from the default background colour of the body)

Site Prioritisation

Users can’t see all the information on your site when they first load it. Does this make sense? What is the use of downloading all the resources of a site when only some of them will be used?

With smart prioritization and resource suggestions, we can define our critical/indispensable resources as a high priority and assign others a lower priority.

Mobile vs Desktop

The experiences that the mobile platform can offer compared to the desktop are quite limited. Mobile doesn’t offer the same CPU, GPU, and RAM. In general, mobile devices do not have access to the network speed we are used to when using a desktop computer. However, the user’s perception of speed on mobile seems to be the exact opposite of what the platform offers. People expect faster speeds on mobile devices than on desktops. 

A website or web application’s performance is important. For an e-commerce site or other customer-facing web applications, performance problems have adverse impacts.

How To Improve Your Web App Speed

You can boost web application performance in the following ways:

1. Eliminate Unnecessary HTTP Requests

Web browsers use Hyper Text Transfer Protocol (HTTP) requests to get parts of the web page from the web server. They do this for images, style sheets, scripts, etc. HTTP requests are overwhelming and too many can create performance problems.

Review HTTP requests and remove unnecessary requests from the browser. You can remove unnecessary JavaScript files, fonts, images, and style sheets for this. You should only keep HTTP requests that load the necessary resources.

2. On-demand Loading of Assets

On-demand or lazy loading of assets (images in particular) can help greatly in achieving the better general performance of your web app. There are benefits to lazy loading for image-heavy pages.

  • Reduced number of concurrent requests to the server (which results in faster loading times for the rest of your page).
  • Reduced memory usage in the browser (fewer images, less memory).
  • Reduced load on the server.

The general idea is to load images or assets (such as videos and logos) at the moment they are being displayed for the first or the moment they are about to get displayed. Since this is deeply connected to how you build your site, lazy loading solutions usually come in the form of plugins or extensions to other libraries. For instance, react-lazy-load is a plugin to handle the lazy loading of images for React.

3. Optimise The Size of Images

Your website may load slowly if it contains a lot of graphics. You may also want the images to display well on high-density screens therefore, you may choose to use high-resolution images. This could affect page loading speed.

You must optimise the images. Choose the resolution suitable for varying devices. Next, optimise the image size.

4. Go for Server-Side Rendering

Since not every JavaScript solution offers enhanced server-side rending in single-page apps., it is better to switch to mature ones such as React.

5. Employ CDNs

CDN (Content Delivery Network) is a globally distributed network of proxy servers that works with the motive to render content to users with high availability and performance. It can significantly improve the response time to your assets from customers across the globe. Hence, you should look upon them.

We continued this article here

If the above has raised any questions please don’t hesitate to contact us!

Did you enjoy this article?

Join our mailing list

MAKE AN ENQUIRY

Let's kickstart your project