All Case Studies Design Development Interviews Machine Learning Project Management

11 Reasons Why Your Web App is Slow. Check How a Good Web Development Company can Help You to Fix it (Update)

Speed is one of the most important things when it comes to conversion, retention and user experience in mobile apps.  According to a Google study, users regard a satisfactory load time as two seconds or less, and 53% of them will leave a mobile site if it takes more than 3 seconds to load. The stats are ruthless. Page speed is one of the ranking factors for Google mobile searches. Since more than half of overall web traffic comes from mobile, 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 web development company or consulting partners, this article will help you spot the problems related to web app speed.

1. Why an app is slow? 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. In this way, the time needed to load the resources decreases and, as a result, a  web app runs faster.

2. 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 Squoosh or TinyPng 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.

3. You Don’t Use SVGs

SVG stands for Scalable Vector Graphics, which are designed as a open Web standard. Compared to rasterized images like JPEG, PNG, TIFF formats, SVGs are much lighter, explicitly made for Web, and will look good in all resolutions because they are scalable. You can use SVGs for logos, icons, graphics, drawings and even animations. SVG files can still contain some unneeded data like editor metadata, comments, hidden elements, and other redundant information. For SVG optimisation use SVGO from the command line or SVGMO as a web app.

4. 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.

Responsive, mobile-first design is one of the most crucial elements to implement not only because of the importance of mobile optimisation, but also due to the fact that CSS code written in a mobile-first manner can improve the speed of an application, especially on older devices. 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).

5. Assets Are Unoptimised or Unzipped

One of the most common solutions to improve web app speed is to minify text-based files. Minification removes redundant data without affecting its actual meaning. It’s best to apply minification as a part of the application build cycle.

Enable GZIP compression on the server side to further compress minified files before transferring them to the browser. The browser receives gzipped files and unzips them before rendering content to the screen. All modern browsers support gzipped assets and it can decrease your download times a lot – don’t forget about this easy win!

For even better results, you can check out the Brotli or Zopfli compression algorithms.

6. You send unnecessary resources

Before any content can be visible, the browser needs to parse and apply CSS files to a page. This means that such resources are render-blocking. If you use one of  the popular CSS frameworks to build your user interface, make sure to import only the necessary files. Think about which sections you need and import only the files related to them. In case of a simple design, it is better to avoid using third-party libraries and build a layout with Flexbox or Grid.

7. 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.

8. You Use Unoptimised Web Fonts

Before making a request for fonts, the browser constructs a render tree to know what exact types of fonts are needed. So, by default, font requests are made after the browser gets and parses more critical resources. However, text rendering is delayed without font information.

To optimise web fonts, first consider minimising the number of used font types, then make sure that you import only variants that are actually needed. Secondly, there is no universal font file format for all browsers. You need to provide the appropriate formats: WOFF2, WOFF, TTF and EOT, the last two are not compressed by default, so make sure to apply GZIP compression to them.

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

Server-side rendering allows you to render the first page of your app and then serve it to the browser as a static page. 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. 

10. 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.

11. You Don’t Lazy Load Your Resources

Lazy loading is a method of loading non-critical resources when they are needed, as opposed to getting all of the resources at the beginning. It is frequently used for images and videos that are originally off-screen and are loaded as soon as they become present in the viewport. Because media resources are often heavy, this approach can significantly decrease the initial loading time. For a good user experience you can initially load lightweight placeholders for images and videos and replace them with the actual content when the user scrolls them into view.

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.

Lighthouse, which is a part of the tool recommended above, is also available as a Chrome extension, from the command line, and as a Node module. Lighthouse is easy to use and provides you with advice on speed optimisation.

More advanced tools provide you with detailed reports and recommendations on how to increase loading speed and web app performance: Think With Google, Pingdom, WebPageTest. 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.

UX review
READ ALSO FROM Frontend
Read also
Need a successful project?
Estimate project or contact us