BLOG POST ·
2
min read ·
13.11.2020

Front-End Performance Optimisations - The missing link in your performance strategy

QA Practice Lead

Rupesh Dubey

Rupesh is passionate about delivering projects with quality and working with organisations to uplift their Quality practices. He has an expertise in test automation, performance testing and lean consulting.

Whenever a customer or any stakeholder complains about your app's slowness, what's your instinctive thought process? For most of us, we immediately think about server-side issues. We think about the load on the servers, we start analyzing the load balancing stats, drilling into APIs response and further looking into the database queries. What we often ignore is the crucial Front-End performance stats.

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.

Adapted from stevesouders.com


The business impact

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

Adapted from SOASTA, The State of Online Retail Performance, U.S., April 2017.

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. 

Adapted from SOASTA, The State of Online Retail Performance, U.S., April 2017.


In short, when you are building a mobile app,

every millisecond counts and has an associated opportunity cost


How to measure

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:

  • Google's Lighthouse which is now available on your chrome's Dev tools or 
  • WebPageTest 

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. 

Related CONTENT

Got a problem that needs solving?

Fill in your details and our experts will be in touch.

Tick (success) icon
Thanks for your message,
we will be in touch soon!
Oops! Something went wrong. Please try again later.