In the previous post we started a thread aimed at advancing our understanding of the fundamentals and challenges of mobile performance. In this post we continue the discussion, asking: what is performance?

Users have high expectations and demands regarding their website experience; we want simplicity and ease of use (don’t make me think), we want safety and security (don’t betray me), and, most importantly, we want speed (don’t make me wait). When websites are not fast, we get grumpy; every user hates slowness. It is true that performance is only one component of the overall user experience, together with appearance, accessibility, content strategy, usability; but it is a very important one. Some even argue that web performance IS user experience; and in some sense it is, because the lack of good performance often cancels out the role of the other UX components.

Since performance is so closely related to user experience, we can’t really think about one without thinking about the other; thinking about them congruently leads to design and implementation decisions at all levels that strike the best balance between User eXperience (UX), Developer eXperience (DX), and Monetization eXperience (MX). Therefore, it is important to: (1) focus on the right performance metrics; those strongly correlated with an improved UX; and (2) design and implement for performance by making deliberate decisions at every step along the way trying to strike balanced tradeoffs between seemingly conflicting goals.

The performance of a web app, as perceived by users, is influenced by both server-side and client-side components. Steve Sounders’ performance golden rule states that 80% of the end-user response time is spent on the frontend; therefore, our focus is mostly on the frontend side of the equation.  In a nutshell, from receiving the HTML code and the associated resources to rendering the corresponding pixels on the screen, the browser goes through the following steps in order

  1. Parse HTML into DOM
  2. Download resources linked from the HTML
  3. Parse CSS into CSSOM
  4. Parse JavaScript
  5. Construct the render tree by combining the DOM with the CSSOM
  6. Layout (calculate the positions and other attributes of all visible elements)
  7. Paint

These steps are executed for every page rendered by the browser, and there are a number of things that can be optimized in order to enhance the performance as perceived by the users:

  • Requests: Optimize the number and size of requests made by the application
  • Connections: Reduce the number of connections needed to load the app; andKeep in mind that number of requests is not the same as number of connections
  • Page weight: Optimize the size of the resources required by our page: HTML, CSS, JS, Images
  • Critical Rendering Path: Prioritize the display of content that relates to the current user action
  • Geography: Reduce the distance between your users and your content by using some kind of Content Delivery Network

In a following post, we will discuss why is so hard to achieve good performance on mobile devices.