Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Putting Performance
Best Practices
Together to Create
the Perfect SPA
Chris Love
@ChrisLove
Love2Dev.com
Who Am I
• ASP.NET MVP
• ASP Insider
• Internet Explorer User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript...
High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Arch...
Slide Deck & Source Code
• Slide Deck – http://slideshare.net/docluv
• Source Code – http://github.com/docluv
Let Me Take
You On A
Journey
The
jQueryUI
Dialog
The jQueryUI Dialog Markup
The jQueryUI Dialog Markup
My First Big SPA Experience
0 to 400 Views
Modular & Extensible
4 Months
Nothing To Reference
Lessons Learned
Can’t Load Everything At Once
Mobile Matters
Test Over Sprint 3G
Let’s Call it A
Single Page
Application
A SPA Is All Inclusive
Views/Pages
CSS/Styles
JavaScriptJS
A SPA Leverages
AJAX/Sockets Storage Hash Fragment
#
Mobile Browsers
Aggressively Purge Cache
Weaker Processors
Less Memory
Cellular Connections
Slower
More Expensive
Unreliable
The Web Is Obese
99 Files Requests – 2+MB
18 JavaScript Files - 318KB
6.4 CSS Files – 61KB
53 Images – 1.3MB
38 TCP Connec...
Cant Use Fast Food Frameworks
Cant Use Fast Food Frameworks
Dump jQuery & What it means
• Faster Load Times
• Master DOM APIs
• Alternatives
• Create DollarBill 
• Learn to be Modul...
Fast Food Frameworks Are Bad
Full of Fat
Loaded With Preservatives
Syntactic Sugar
MicroJS Libraries
Small
Promote Modular
Architecture
Single Focus
•Performance
•Modularity
•Small Footprint
•Scalability
•Maintainability
•Long Lifespan
ArchitectureGoals
The Modern Web Hour Glass
HTML5
JavaScript
CSS3
ASP.NET/IIS
Express/Node
DB – SQL Server/
NoSQL
Application Loading Process
The 1st Time a User Visits
They ‘Install’ the Application
•The Initial Request
•Contains Critical Path Assets
• Master Layout HTML + CSS Inline
• Initial Possible Views
• Initial V...
•Deferred Request(s)
•Contains Additional View HTML, CSS and
JavaScript
Application Loading Process
SPAPARTS
Routing
Caching
Data
Rendering
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...
Markup Management
•Keep the DOM Lean
•Leverage Browser Storage to Persist Markup
• http://bit.ly/H2qhZ2
View Engine – Cache Markup
• Parses Markup For Views &
Templates
• Stores All Markup Related
Concerns in Storage
• Retriev...
View Engine – Lazy Loading
•Reduces Initial Load
•Enables 14kb Goal
•View Engine Still Parses Markup & Caches
•Also caches...
Cutting the Mustard
• Feature Detection
• Do Not Code to Legacy
Browsers
• DO NOT USE Polyfils
• Also Helps With SEO
• Goo...
Above the Fold
• Determine Possible Initial Views
• Usually 5-10 Views
• Accessible from Initial View
Within 1 Click
• Cri...
Above the Fold
Data Management
• Cache Data in Storage
• Assign Time To Live Value to All
Data
• Eliminate Redundant HTTP
Requests
• The ...
Caching Data
• jQuery AJAX Pre-Filter
• http://bit.ly/117p7E9
• Intercept AJAX GET Requests
• Determine if Data is Cached
Caching Data
Data
Requested
Is In
Cache?
Yes
No
Return
Data
Make AJAX
Request
Cache Data
Return
Data
Responsive Images
Custom Fonts
• http://fontello.com/
• Create Custom Font from
various Icon Fonts
Common Web Perf Best Practices
• Bundle & Minify
• CSS @ Top
• Scripts @ Bottom
• Async
• Use CDN
• Optimize Images
• HTTP...
Questions
Upcoming SlideShare
Loading in …5
×

Putting Performance Best Practices Together for a SPA

3,931 views

Published on

Web performance optimization techniques and practices are well defined, but rarely utilized to create fast, modern, single page web applications. In this tutorial Chris Love will demonstrate how to apply many common web performance optimization techniques and tricks to build a fast, native-like application user experience that end users desire. In other words, see how to apply performance best practices in a real-world application scenario.

Published in: Technology

Putting Performance Best Practices Together for a SPA

  1. 1. Putting Performance Best Practices Together to Create the Perfect SPA Chris Love @ChrisLove Love2Dev.com
  2. 2. Who Am I • ASP.NET MVP • ASP Insider • Internet Explorer User Agent • Author • Speaker • Tweaker, Lover of Web, JavaScript, CSS & HTML5 • @ChrisLove • Love2Dev.com
  3. 3. 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
  4. 4. Slide Deck & Source Code • Slide Deck – http://slideshare.net/docluv • Source Code – http://github.com/docluv
  5. 5. Let Me Take You On A Journey
  6. 6. The jQueryUI Dialog
  7. 7. The jQueryUI Dialog Markup
  8. 8. The jQueryUI Dialog Markup
  9. 9. My First Big SPA Experience 0 to 400 Views Modular & Extensible 4 Months Nothing To Reference
  10. 10. Lessons Learned Can’t Load Everything At Once Mobile Matters Test Over Sprint 3G
  11. 11. Let’s Call it A Single Page Application
  12. 12. A SPA Is All Inclusive Views/Pages CSS/Styles JavaScriptJS
  13. 13. A SPA Leverages AJAX/Sockets Storage Hash Fragment #
  14. 14. Mobile Browsers Aggressively Purge Cache Weaker Processors Less Memory
  15. 15. Cellular Connections Slower More Expensive Unreliable
  16. 16. 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
  17. 17. Cant Use Fast Food Frameworks
  18. 18. Cant Use Fast Food Frameworks
  19. 19. 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
  20. 20. Fast Food Frameworks Are Bad Full of Fat Loaded With Preservatives Syntactic Sugar
  21. 21. MicroJS Libraries Small Promote Modular Architecture Single Focus
  22. 22. •Performance •Modularity •Small Footprint •Scalability •Maintainability •Long Lifespan ArchitectureGoals
  23. 23. The Modern Web Hour Glass HTML5 JavaScript CSS3 ASP.NET/IIS Express/Node DB – SQL Server/ NoSQL
  24. 24. Application Loading Process The 1st Time a User Visits They ‘Install’ the Application
  25. 25. •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
  26. 26. •Deferred Request(s) •Contains Additional View HTML, CSS and JavaScript Application Loading Process
  27. 27. SPAPARTS Routing Caching Data Rendering
  28. 28. 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
  29. 29. Markup Management •Keep the DOM Lean •Leverage Browser Storage to Persist Markup • http://bit.ly/H2qhZ2
  30. 30. 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
  31. 31. View Engine – Lazy Loading •Reduces Initial Load •Enables 14kb Goal •View Engine Still Parses Markup & Caches •Also caches and injects CSS & Script References
  32. 32. 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
  33. 33. 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
  34. 34. Above the Fold
  35. 35. 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
  36. 36. Caching Data • jQuery AJAX Pre-Filter • http://bit.ly/117p7E9 • Intercept AJAX GET Requests • Determine if Data is Cached
  37. 37. Caching Data Data Requested Is In Cache? Yes No Return Data Make AJAX Request Cache Data Return Data
  38. 38. Responsive Images
  39. 39. Custom Fonts • http://fontello.com/ • Create Custom Font from various Icon Fonts
  40. 40. Common Web Perf Best Practices • Bundle & Minify • CSS @ Top • Scripts @ Bottom • Async • Use CDN • Optimize Images • HTTP Caching • Shard Assets, but not too much
  41. 41. Questions

×