1 of 35

Seeing The Light

Achieving Performant Web Applications

​

2 of 35

Agenda

  1. Modern JavaScript Applications

​

  • The Critical Rendering Path

​

  • Shining a Light(house)

​

  • Demo

​

  • Closing Thoughts

3 of 35

Owen Buckley

  • Founder (The Greenhouse I/O)
  • Entrepreneur (H.O.M.E.)
  • Producer (Analog Studios)

@thegreenhouseio

My goal is not build the next best thing.

My goal is to help you and your team build the next best thing.

4 of 35

{

}

5 of 35

Why?

6 of 35

Improving the User’s (network) Experience

  • “Lowering” the barrier to entry

​

  • Principle of Least Privilege

​

  • Package / Dependency Management

​

  • Conversion Rate

​

  • Cost

7 of 35

By The Numbers (as of 9/2016)

  • Average load time of a mobile sites is 19 seconds
  • 53% of mobile sites are abandoned if loading takes longer than 3 seconds
  • For those sites loading in under 5 seconds
    • 25% higher ad viewability
    • 70% longer sessions
    • 35% lower bounce rate

8 of 35

Modern JavaScript Applications

9 of 35

The JavaScript Renaissance

  • ES2015+ (i.e. modules)

​

  • Module Bundling

​

  • Entry Point (App Shell Model)

10 of 35

“Modules” (before)

11 of 35

Modules (current)

12 of 35

Module “Bundling” (before)

13 of 35

Module Bundling (current)

14 of 35

Entry Point (before)

15 of 35

Entry Point (current)

16 of 35

static analysis, ftw

17 of 35

The Critical Rendering Path

18 of 35

Key Challenges

Number of Requests

Browsers have a limit of how many simultaneous requests can be made at once.

Too many of these requests can block fetching and thus loading / execution.

Size of Bundles / Assets

With JavaScript, the larger the file size, the longer the time to parse / evaluate / execute.

CSS is render blocking too, meaning parsing will delay layout / paint phases.

Caching

We should be intelligently caching / cache busting our assets.

​

Any good caching strategy should start with a good code splitting strategy.

19 of 35

Key Measurements

  • Time to First Meaningful Paint
  • Time To Interactive
  • Graceful Network Waterfall

20 of 35

21 of 35

Shining

A Light(house)

22 of 35

What is Lighthouse?

23 of 35

24 of 35

25 of 35

Recommendations

26 of 35

Recommendations: Operations

  • Gzip (compression)

​

  • HTTP/2

​

  • CDN (w/ Content Based Caching)

​

  • Continuous Integration

27 of 35

Recommendations: Web Application

  • Code Splitting + Lazy Loading

​

  • Tree Shaking

​

  • Inlining Critical CSS

​

  • Content Based Caching (w/ CDN)

28 of 35

Recommendations: Product

  • Know Your User Analytics

​

  • Plan Out User Flows / Navigation

29 of 35

Demo

30 of 35

Closing

Thoughts

31 of 35

  • Evolution of Modern JavaScript (Applications)
  • Critical Rendering Path
  • Lighthouse
  • Recommendations

Recap

32 of 35

  • Measure and Balance
  • Team Effort
  • Afford Time For Learning
  • Make A Plan

Takeaways

33 of 35

What About...?

​

  • Progressive Web Applications (PWAs)
  • Server-Side Rendering (SSR)
  • Static Sites
  • HTTPS!!!

34 of 35

Thank you!

35 of 35

Links / References

​