Putting Performance Best Practices Together for a SPA

41
Putting Performance Best Practices Together to Create the Perfect SPA Chris Love @ChrisLove Love2Dev.com

Transcript of Putting Performance Best Practices Together for a SPA

Page 1: Putting Performance Best Practices Together for a SPA

Putting Performance Best

Practices Together to Create the

Perfect SPA

Chris Love

@ChrisLove

Love2Dev.com

Page 2: Putting Performance Best Practices Together for a SPA

Who Am I

• ASP.NET MVP• ASP Insider• Internet Explorer User Agent• Author• Speaker• Tweaker, Lover of Web, JavaScript, CSS & HTML5• @ChrisLove• Love2Dev.com

Page 3: Putting Performance Best Practices Together for a SPA

High Performance Single Page Web Applications

• Responsive Design• Touch• Mobile First• SPA• Extensible, Scalable Architecture• Web Build and Workflow• Goes Really Fast!

• ~395 Pages• 20 Chapters• $9.99 http://amzn.to/1a55L89

BUY NOW!

Page 4: Putting Performance Best Practices Together for a SPA

Slide Deck & Source Code

• Slide Deck – http://slideshare.net/docluv• Source Code – http://github.com/docluv

Page 5: Putting Performance Best Practices Together for a SPA

Let Me Take You On A Journey

Page 6: Putting Performance Best Practices Together for a SPA

The jQueryUI Dialog

Page 7: Putting Performance Best Practices Together for a SPA

The jQueryUI Dialog Markup

Page 8: Putting Performance Best Practices Together for a SPA

The jQueryUI Dialog Markup

Page 9: Putting Performance Best Practices Together for a SPA

My First Big SPA Experience

0 to 400 Views

Modular & Extensible

4 Months

Nothing To Reference

Page 10: Putting Performance Best Practices Together for a SPA

Lessons Learned

Can’t Load Everything At Once

Mobile Matters

Test Over Sprint 3G

Page 11: Putting Performance Best Practices Together for a SPA

Let’s Call it A Single Page Application

Page 12: Putting Performance Best Practices Together for a SPA

A SPA Is All InclusiveViews/

Pages

CSS/Styles

JavaScriptJS

Page 13: Putting Performance Best Practices Together for a SPA

A SPA Leverages

AJAX/Sockets

Storage

Hash Fragment

#

Page 14: Putting Performance Best Practices Together for a SPA

Mobile Browsers

Aggressively Purge Cache

Weaker Processors

Less Memory

Page 15: Putting Performance Best Practices Together for a SPA

Cellular Connections

Slower

More Expensive

Unreliable

Page 16: Putting Performance Best Practices Together for a SPA

The Web Is Obese

99 Files Requests –

2+MB

18 JavaScript Files -

318KB

6.4 CSS Files – 61KB

53 Images – 1.3MB

38 TCP Connections

17 Domains

46% Cacheable

http://httpArchive.org

Page 17: Putting Performance Best Practices Together for a SPA

Cant Use Fast Food Frameworks

Page 18: Putting Performance Best Practices Together for a SPA

Cant Use Fast Food Frameworks

Page 19: Putting Performance Best Practices Together for a SPA

Dump jQuery & What it means

• Faster Load Times

• Master DOM APIs

• Alternatives

• Create DollarBill

• Learn to be Modular

• And Yes This Was

Painful

• But Was A Great

Experience

Page 20: Putting Performance Best Practices Together for a SPA

Fast Food Frameworks Are Bad

Full of Fat

Loaded With Preservatives

Syntactic Sugar

Page 21: Putting Performance Best Practices Together for a SPA

MicroJS Libraries

Small

Promote Modular Architecture

Single Focus

Page 22: Putting Performance Best Practices Together for a SPA

•Performance•Modularity•Small Footprint•Scalability•Maintainability•Long Lifespan

Arch

itectu

re G

oals

Page 23: Putting Performance Best Practices Together for a SPA

The Modern Web Hour Glass

HTML5JavaScriptCSS3

ASP.NET/IISExpress/Node

DB – SQL Server/ NoSQL

Page 24: Putting Performance Best Practices Together for a SPA

Application Loading Process

The 1st Time a User Visits They ‘Install’ the Application

Page 25: Putting Performance Best Practices Together for a SPA

•The Initial Request•Contains Critical Path Assets•Master Layout HTML + CSS Inline• Initial Possible Views• Initial View’s CSS• Core Application JavaScript + Initial View’s Controllers

Application Loading Process

Page 26: Putting Performance Best Practices Together for a SPA

•Deferred Request(s)•Contains Additional View HTML, CSS and JavaScript

Application Loading Process

Page 27: Putting Performance Best Practices Together for a SPA

SPA

PARTS

Routing

Caching

Data

Rendering

Page 28: Putting Performance Best Practices Together for a SPA

API

We b A p p l i c a t i o n

A J A X

S PA

C A C H E

D ATA A P P

V I E WV I E WV I E WV I E WV I E WC o n t r o l l e r

V i e w E n g i n e

Te m p l a t e E n g i n e

Page 29: Putting Performance Best Practices Together for a SPA

Markup Management

•Keep the DOM Lean•Leverage Browser Storage to Persist Markup• http://bit.ly/H2qhZ2

Page 30: Putting Performance Best Practices Together for a SPA

View Engine – Cache Markup

•Parses Markup For Views & Templates•Stores All Markup Related Concerns in Storage•Retrieves View Markup On Demand•Abstracts Templating or Binding Library

Page 31: Putting Performance Best Practices Together for a SPA

View Engine – Lazy Loading

•Reduces Initial Load•Enables 14kb Goal•View Engine Still Parses Markup & Caches•Also caches and injects CSS & Script References

Page 32: Putting Performance Best Practices Together for a SPA

Cutting the Mustard

• Feature Detection• Do Not Code to

Legacy Browsers• DO NOT USE Polyfils• Also Helps With SEO• Google’s Specification

for AJAX Applications• http://bit.ly/117sTgL

Page 33: Putting Performance Best Practices Together for a SPA

Above the Fold

• Determine Possible Initial Views• Usually 5-10 Views• Accessible from Initial

View Within 1 Click• Critical Task to Achieve 14kb

Initial Payload

Page 34: Putting Performance Best Practices Together for a SPA

Above the Fold

Page 35: Putting Performance Best Practices Together for a SPA

Data Management

• Cache Data in Storage• Assign Time To Live Value to

All Data• Eliminate Redundant HTTP

Requests• The Fastest HTTP Request is

the one you don’t make

Page 36: Putting Performance Best Practices Together for a SPA

Caching Data

• jQuery AJAX Pre-Filter• http://bit.ly/117p7E9

• Intercept AJAX GET Requests• Determine if Data is

Cached

Page 37: Putting Performance Best Practices Together for a SPA

Caching Data

Data Requested

Is In Cache?

Yes

No

Return Data

Make AJAX Request

Cache DataReturn Data

Page 38: Putting Performance Best Practices Together for a SPA

Responsive Images

Page 39: Putting Performance Best Practices Together for a SPA

Custom Fonts

• http://fontello.com/• Create Custom Font from

various Icon Fonts

Page 40: Putting Performance Best Practices Together for a SPA

Common Web Perf Best Practices

• Bundle & Minify• CSS @ Top• Scripts @ Bottom• Async• Use CDN• Optimize Images• HTTP Caching• Shard Assets, but not too much

Page 41: Putting Performance Best Practices Together for a SPA

Questions