Everything on your app contributes to its performance which also includes JS, CSS, Images, your HTML structure or even the harmless-looking comments.
Steve Souder's former head of performance at Google and Yahoo, coined the "Performance Golden Rule" rule. He states:
80-90% of the end-user response time is spent on the frontend. Start there.
Steve also calculated the split across all 50,000 websites that are being crawled. The frontend time contributes to 87% of the total page load time.
Let's start putting some dollar value and look into some business insights to shed some light on the cost of ignoring front end optimisations. According to Google's SOASTA, The State of Online Retail Performance, U.S., April 2017 - A one-second delay in mobile load times can impact conversion rates by up to 20%.
Also, another important metric to notice is bounce rate, which in generic terms indicates the engagement of your customer with your application. Higher bounce rate is generally bad.
In short, when you are building a mobile app,
every millisecond counts and has an associated opportunity cost
Having established the importance of Front-end performance impact, your first step should be towards measuring them. As the saying goes "You can't improve things which you can't measure".
There are lots of tools available which will provide you with these metrics and are highly recommended:
Not only that, we can measure Front-end performance in each build using the CLI version of google lighthouse and it can be integrated within your CI process. You can start by installing the node package using: npm install lighthouse
The tool can further run on the real mobile devices and give as realistic feedback as possible.
In our next topic of this series, we will also share a few optimisation techniques and quick wins.
Fill in your details and our experts will be in touch.
