Performance is about retaining users

We want users to interact meaningfully with what we build.

Performance plays a major role in the success of any online venture.

Here are some case studies:

  • Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%.
  • COOK increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10% when they reduced average page load time by 850 milliseconds.

Here are a couple case studies where low performance had a negative impact on business goals:

  • The BBC found they lost an additional 10% of users for every additional second their site took to load.
  • DoubleClick by Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.
Spending a long time parsing/compiling code can heavily delay how soon a user can interact with your site. The more JavaScript you send, the longer it will take to parse & compile it before your site is interactive.

The cost of JavaScript (Addy Osmany)

Time to Interactive:

The Time to Interactive (TTI) metric measures how long it takes a page to become interactive. "Interactive" is defined as the point where:

  • The page has displayed useful content, which is measured with First Contentful Paint.
  • Event handlers are registered for most visible page elements.
  • The page responds to user interactions within 50 milliseconds.

What can we do in order to address performance issues in our front-end codebases?

Code Splitting

Webpack allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

An ideal metric:

  • 90% of JavaScript code should be actually used

opening the code coverage panel in chrome, we can check how much JavaScript is used in the page we are rendering

why we should concern about this?

Tweak the performance of a web page could lead to huge advantages for the business

Because we care of our craft, and be able to provide only the exact amount of code needed for one page to work is an awesome chance to apply our craft

Resources: