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.

Performance: Beyond Your Portfolio

332 views

Published on

Presented at Web Unleashed 2016
by Luke Dewitt, REDspace

FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc

Overview
Nowadays, user expectations of web applications are higher than ever. Unfortunately for developers, with the web changing at an exponential pace, our jobs are becoming more difficult. To keep up with competition and these user expectations, websites and apps need to take into consideration not only the powerful tools we have access to, but also the limitations we face with the modern web.

In this talk, we’ll take a look at how we can ensure our users get the best experience possible when they visit your work on the web. We’ll explore some simple techniques that you can add to your site in little to no time with simple optimization techniques and examine how the new HTTP2 protocol and how it is revolutionizing web delivery.

Objective

To empower developers to push performance in modern web applications.

Target Audience

Anyone who puts bread on their plate by building anything user facing on the web.

Assumed Audience Knowledge

Should have a basic understanding of web fundamentals (HTML, CSS, JavaScript).

Things Audience Members Will Learn

Why optimizing performance matters
The RAIL performance model
Effective ways to speed up an existing website
What is HTTP2 and how to take advantage of it

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Performance: Beyond Your Portfolio

  1. 1. Performance:Beyond YourPortfolio FITC WEB UNLEASHED - OCTOBER 4TH, 2016
  2. 2. Welcome.
  3. 3. * jokes may not be as funny
  4. 4. Welcome.
  5. 5. *
  6. 6. Luke DeWitt WEB TEAM LEAD / DAD / ALL AROUND GOOD GUY … who are you?
  7. 7. RAIL
  8. 8. RESPONSE
  9. 9. ANIMATION
  10. 10. IDLE
  11. 11. LOAD
  12. 12. Response Animation Idle Load
  13. 13. It’s all about the user…
  14. 14. Response Times 0.1second “Instantaneous Reaction” 1second “Uninterrupted Flow of Thought” 10seconds “User’s Attention”
  15. 15. Show of hands…
  16. 16. SQUIRREL!!!
  17. 17. Response Animation Idle Load
  18. 18. Response 100ms = Lag Immediate, with substance User Perceived Performance
  19. 19. Animation
  20. 20. 60 FPS
  21. 21. 60 FPS 16ms to react
  22. 22. Idle Simple tasks Aim for < 50ms
  23. 23. Load
  24. 24. SQUIRREL!!!
  25. 25. Load Load in < 1s Focus on critical path rendering User perceived performance
  26. 26. Critical Path Rendering 0.0s 0.3s 0.8s 1.2s 1.5s
  27. 27. Critical Path CSS
  28. 28. Eliminate Render Blocking JavaScript
  29. 29. Render Blocking LOADED IN <head> LOADED BEFORE </body>
  30. 30. Image Optimizations
  31. 31. Image Compression TinyPNG https://tinypng.com
  32. 32. 1.7MB 305.9kb Image Compression -82%
  33. 33. Responsive Images
  34. 34. Lazy Loading Images
  35. 35. File Compression Gzip
  36. 36. File Delivery
  37. 37. HTTP/2
  38. 38. HTTP/2 == SPDY?
  39. 39. • Concatenate files • Inline Assets • Combine Images • Domain Sharding
  40. 40. Components of an HTTP Request – Chapter 10. Primer on Web Performance
  41. 41. What’s cool in HTTP/2
  42. 42. Binary Protocol
  43. 43. Multiplexing
  44. 44. HTTP/2 for a Faster Web
  45. 45. HTTP/2 for a Faster Web
  46. 46. CloudFlare - What is HTTP/2?
  47. 47. DEMO
  48. 48. Header Compression
  49. 49. *HTTP/2 requires TLS
  50. 50. Getting Ready
  51. 51. Getting Ready
  52. 52. Browser Support
  53. 53. Node.js PHP Go Scala Microsoft ISS CloudFlare CloudFront Akamai nginx Apache
  54. 54. HTTP/2 is here!
  55. 55. Questions? redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspaceLUKE DEWITT @whatadewitt
  56. 56. Questions? redspace.com / T (902) 444.3490 FACEBOOK REDspace TWITTER @theREDspace LINKEDIN The REDspaceLUKE DEWITT @whatadewitt
  57. 57. THANKYOU! Oh, by the way, we’re hiring! http://redspace.recruiterbox.com

×