Change - Know that nothing stays the same

Your app needs a Performance budget

September 11, 2018

performance
web
javascript

I was thinking to write about a few concepts on web optimization. I'm not going to show anything new about web development (web applications, PWA, etc) and how it expands every day.

As first optimization, or development philosophy of your application, you need to follow a simple concept:

Load only what you need when you need it

A few reasons why:

Security

If you load only the code for the section/portion of the app you'll render, you wont have any security risk to expose code you dont want to expose (I hear programmers with arguments against exposing code to not "let others" understand your business models)

Logical parts

Delivering only what you'll render requires that you split your code by modules, each module will work with each part of the app and you'll have a common module with what you need to any of this parts.

This organization sends the "common module" + "module sectionA" when you go to Section A, "common module" + "module sectionB" when you go to Section B, etc.

If for any reason one user never goes to Section B, he/she wont get that code at any moment using the application.

Tools like webpack lets you detect code you dont use in your application and that code wont be part of the final code when you build it.

Preload

If you have modules for different sections for you app, that let you preload different parts to improve performance, how you loading your application, etc

preloading

Is very simple to preload{:target= "_blank"} some content:

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

Important: don't change all your scripts and stylesheets to use this technique. Preloading content needs to follow a purpose. For example: if I have a common.js module I would use for all my app, this is a good candidate for preloading, and the first module I use in the homepage of my app, another good candidate; but if I have a module about the admin section, this is not something I should load until I go to that section.

fraweworks and preloading

Angular

Angular in the lates version creates one js file for each module you define to lazy loading{:targte="_blank}, this is how you define to use a module with lazy loading:

{
  path: 'customers',
  loadChildren: 'app/customers/customers.module#CustomersModule'
},

Here{:target="_blank} is very good reading about angular and modules.

Angular and the AoT (ahead of time) compilation take cares about many of this things (one of my personal reassons to move to react, you can read a but more here).

React

Using react this can be done too:

// Create a loader
const Closeup = () => import('app/mobile/routes/CloseupPage');

// Register it to the route
route('/pin/:pinId', routes.CloseUp, { name: 'Closeup' }),

// Render a react-router-v4 with the route bundle loader
<Route exact key="matched-route" path={path} render={matchProps =>
  <PageRoute
    bundleLoader={loader}
    routeName={name}
    {...matchProps}
    {...props}
  />}
/>

// Async load the route bunlde
class PageRoute extends PureComponet {
  render() {
    const { bundleLoader, ...props} = this.props;
    return <Loader loader={bundleLoader} {...props} />;
  }
}

// Load it and render
class Loader extends PureCompoent {
  componentWillMount() {
    this.props.loader().then(module => {
      this.setState({ LoadedCompoent: module.defualt });
    })
  }
}

How to define a performance budget

All this introduction was with one idea in mind, define where we need to look to define our budget.

Any web application (desktop, mobile), has what we can call a loading time, you can trick users' perception with spinners, loading bars, etc, but if you have a performance budget with values, you can messure improvements and you can define actions to do to fix problems.

Performance

This image shows how 3 simple questions defines the best aproach to have a framework to see if you're in a good shape:

  • Is it happening?
  • Is it usuful?
  • Is it usable?

Your final goal is to reach "Time to interact" point in less than 5 seconds.

In a new post, I'll start to show you different ways to achieve this. For now, you can start to see if you're in a good or bad shape on the app you're working.


Agustin Vinao
Agustin Vinao.

Paradox: Life is a mystery. Don't waste time trying to figure it out.
Humor: Keep a sense of humor, especially about yourself. It is a strength beyond all measure.
Change: Know that nothing stays the same.