Your SlideShare is downloading. ×
0
FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
Midwest.io / 2014-07-14
Midwest.io /...
• Philip Tellis
• @bluesmoon
• ptellis@soasta.com
• SOASTA
• boomerang
Midwest.io / 2014-07-14 FE Performance: Beginner to...
Get the most benefit with the least effort
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 3
Bandwidth
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 4
Bandwidth
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 5
Patience
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 6
0Beginning Web Performance
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 7
Start with a really slow site
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 8
0.1 Start Measuring
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 9
Or use RUM for real user data (old skool)
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 10
Or use RUM for real user data (boomerang/mPulse)
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Perso...
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
Midwest.io / 2014-07-14 FE Perfor...
You can pre-gzip
gzip_static in nginx
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 13
0.3 ImageOptim
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 14
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
Midwest.io / 2014-07-14 FE Performance: ...
Yes, that was 10 million pies
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 16
0 Congratulations
You’ve just been promoted
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 17
1What the Experts Do
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 18
1.1 CDN
Serve your root domain through a CDN
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 19
1.1 CDN
And make sure your CSS is on the same domain
http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.htm...
1.1 CDN
Google Chrome will open two TCP connections to
the primary host, one for the page, and the second
"just in case"
M...
1.2 Split JavaScript
"critical": in the HEAD,
"enhancements": loaded async
Midwest.io / 2014-07-14 FE Performance: Beginne...
1.3 Audit your CSS
Chrome WebDev tools
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 23
Also checkout uncss for a command line option
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 24
1.4 Parallelise downloads/use sprites
You can have higher bandwidth, you cannot have lower latency.
Midwest.io / 2014-07-1...
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP Slow
Start, and speed up CSS
Midwest.io / 2014-07-14 F...
1.6 Increase initcwnd
Initial Congestion Window: Number of packets to
send before waiting for an ACK
http://www.cdnplanet....
1.6 Increase initcwnd
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 28
1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
Midwest.io ...
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 30
Relax
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 31
2You’ve reached crazyland
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 32
Sort in ascending order of signal latency
• Electrons through copper
• Light through fibre
• Pulsars
• Station Wagons
• Smo...
Sort in ascending order of signal latency
1 Pulsars (light through vacuum)
2 Smoke Signals (light through air)
3 Electrons...
Study real user data
Look for potential places to parallelise, predict or
cache
Midwest.io / 2014-07-14 FE Performance: Be...
2.1 Pre-load
Pre-fetch assets required for the next page in a
process flow
Midwest.io / 2014-07-14 FE Performance: Beginner...
2.1b pre-render
<link rel="prerender" href="url">
<link rel="subresource" href="">
<link rel="dns-prefetch" href="">
Midwe...
2.1c onVisibilityChange
And while you’re at it, don’t do expensive work if the
page is hidden
Midwest.io / 2014-07-14 FE P...
2.2 Post-load
Fetch optional assets after onload
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Perso...
2.3 Detect broken accept-encoding
Many Windows anti-viruses and firewalls disable
gzip by munging the Accept-Encoding heade...
2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS by
default.
Breaks many of our rules.
Midwest.io /...
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Mi...
2.6 Understand the IFrame Loader Technique
Take required but non-critical assets out of the
critical path
http://www.logno...
Can you predict round-trip-time?
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 44
Can you predict round-trip-time?
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 45
References
• WebPageTest – http://webpagetest.org
• Boomerang – http://lognormal.github.io/boomerang/doc/
• SOASTA mPulse ...
Thank You!
Questions?
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 47
• Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• www.SOASTA.com
• boomerang
• LogNormal Blog
Midwest.io / 2014-07-14...
Image Credits
• Jean-Antoine Nollet
http://en.wikipedia.org/wiki/Jean-Antoine_Nollet
• Apple Pie
http://www.flickr.com/phot...
Upcoming SlideShare
Loading in...5
×

Frontend Performance: Beginner to Expert to Crazy Person

950

Published on

http://www.midwest.io/sessions/#monday-7a

Published in: Technology

Transcript of "Frontend Performance: Beginner to Expert to Crazy Person"

  1. 1. FE Performance: Beginner to Expert to Crazy Person Philip Tellis / ptellis@soasta.com Midwest.io / 2014-07-14 Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 1
  2. 2. • Philip Tellis • @bluesmoon • ptellis@soasta.com • SOASTA • boomerang Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 2
  3. 3. Get the most benefit with the least effort Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 3
  4. 4. Bandwidth Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 4
  5. 5. Bandwidth Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 5
  6. 6. Patience Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 6
  7. 7. 0Beginning Web Performance Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 7
  8. 8. Start with a really slow site Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 8
  9. 9. 0.1 Start Measuring Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 9
  10. 10. Or use RUM for real user data (old skool) Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 10
  11. 11. Or use RUM for real user data (boomerang/mPulse) Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 11
  12. 12. 0.2 enable gzip http://slideshare.net/billwscott/improving-netflix-performance-experience Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 12
  13. 13. You can pre-gzip gzip_static in nginx Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 13
  14. 14. 0.3 ImageOptim Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 14
  15. 15. 0.4 Cache Cache-control: public, max-age=31415926 http://www.mnot.net/cache_docs/ Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 15
  16. 16. Yes, that was 10 million pies Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 16
  17. 17. 0 Congratulations You’ve just been promoted Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 17
  18. 18. 1What the Experts Do Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 18
  19. 19. 1.1 CDN Serve your root domain through a CDN Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 19
  20. 20. 1.1 CDN And make sure your CSS is on the same domain http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 20
  21. 21. 1.1 CDN Google Chrome will open two TCP connections to the primary host, one for the page, and the second "just in case" Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 21
  22. 22. 1.2 Split JavaScript "critical": in the HEAD, "enhancements": loaded async Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 22
  23. 23. 1.3 Audit your CSS Chrome WebDev tools Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 23
  24. 24. Also checkout uncss for a command line option Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 24
  25. 25. 1.4 Parallelise downloads/use sprites You can have higher bandwidth, you cannot have lower latency. Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 25
  26. 26. 1.5 Flush Early and Often Get bytes to the client ASAP to avoid TCP Slow Start, and speed up CSS Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 26
  27. 27. 1.6 Increase initcwnd Initial Congestion Window: Number of packets to send before waiting for an ACK http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum- performance/ Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 27
  28. 28. 1.6 Increase initcwnd Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 28
  29. 29. 1.6b Also... net.ipv4.tcp_slow_start_after_idle=0 http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 29
  30. 30. 1.7 PageSpeed mod_pagespeed and ngx_pagespeed Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 30
  31. 31. Relax Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 31
  32. 32. 2You’ve reached crazyland Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 32
  33. 33. Sort in ascending order of signal latency • Electrons through copper • Light through fibre • Pulsars • Station Wagons • Smoke Signals Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 33
  34. 34. Sort in ascending order of signal latency 1 Pulsars (light through vacuum) 2 Smoke Signals (light through air) 3 Electrons through copper / Light through fibre 4 Station Wagons (possibly highest bandwidth) Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 34
  35. 35. Study real user data Look for potential places to parallelise, predict or cache Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 35
  36. 36. 2.1 Pre-load Pre-fetch assets required for the next page in a process flow Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 36
  37. 37. 2.1b pre-render <link rel="prerender" href="url"> <link rel="subresource" href=""> <link rel="dns-prefetch" href=""> Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 37
  38. 38. 2.1c onVisibilityChange And while you’re at it, don’t do expensive work if the page is hidden Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 38
  39. 39. 2.2 Post-load Fetch optional assets after onload Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 39
  40. 40. 2.3 Detect broken accept-encoding Many Windows anti-viruses and firewalls disable gzip by munging the Accept-Encoding header http://www.lognormal.com/blog/2012/08/17/accept-encoding-stats/ Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 40
  41. 41. 2.4 Prepare for HTTP/2.0 Multiple assets on the same connection and TLS by default. Breaks many of our rules. Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 41
  42. 42. 2.5 Understand 3PoFs Use blackhole.webpagetest.org http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 42
  43. 43. 2.6 Understand the IFrame Loader Technique Take required but non-critical assets out of the critical path http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 43
  44. 44. Can you predict round-trip-time? Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 44
  45. 45. Can you predict round-trip-time? Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 45
  46. 46. References • WebPageTest – http://webpagetest.org • Boomerang – http://lognormal.github.io/boomerang/doc/ • SOASTA mPulse – http://www.soasta.com/free • Netflix gzip study – http://www.slideshare.net/billwscott/improving-netflix-performance-experience • Nginx gzip_static – http://wiki.nginx.org/HttpGzipStaticModule • ImageOptim – http://imageoptim.com/ • uncss – https://github.com/giakki/uncss • Caching – http://www.mnot.net/cache_docs/ • Same domain CSS – http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html • initcwnd – http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance/ • Linux TCP Tuning – http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ • Prerender – https://developers.google.com/chrome/whitepapers/prerender • DNS prefetching – https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching • Subresource – http://www.chromium.org/spdy/link-headers-and-server-hint/link-rel-subresource • FE SPoF – http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 46
  47. 47. Thank You! Questions? Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 47
  48. 48. • Philip Tellis • @bluesmoon • philip@bluesmoon.info • www.SOASTA.com • boomerang • LogNormal Blog Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 48
  49. 49. Image Credits • Jean-Antoine Nollet http://en.wikipedia.org/wiki/Jean-Antoine_Nollet • Apple Pie http://www.flickr.com/photos/24609729@N00/3353226142/ • Kittens in a PC http://www.flickr.com/photos/43525343@N08/6417971383/ Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 49
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×