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