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!
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
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
10. You Don’t Use Caching
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.
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.