Your SlideShare is downloading. ×
0
FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
San Diego Web Performance Meetup / 2...
• Philip Tellis
• @bluesmoon
• ptellis@soasta.com
• SOASTA
• boomerang
San Diego Web Performance Meetup / 2014-08-06 FE Pe...
Get the most benefit with the least effort
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert...
Bandwidth
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 4
Patience
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 5
0Beginning Web Performance
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Perso...
Start with a really slow site
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Pe...
0.1 Start Measuring
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 8
Or use RUM for real user data (boomerang/mPulse)
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to...
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
San Diego Web Performance Meetup ...
You can pre-gzip
gzip_static in nginx
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to ...
0.3 ImageOptim
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 12
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
San Diego Web Performance Meetup / 2014-...
Yes, that was 10 million pies
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Pe...
0 Congratulations
You’ve just been promoted
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expe...
1What the Experts Do
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 16
1.1 CDN
Serve your root domain through a CDN
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Exp...
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"
S...
1.2 Split JavaScript
"critical": in the HEAD,
"enhancements": loaded async
San Diego Web Performance Meetup / 2014-08-06 F...
1.3 Audit your CSS
Chrome WebDev tools
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to...
Also checkout uncss for a command line option
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Ex...
1.4 Parallelise downloads/use sprites
You can have higher bandwidth, you cannot have lower latency.
San Diego Web Performa...
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP Slow
Start, and speed up CSS
San Diego Web Performance...
1.6 Increase initcwnd
Initial Congestion Window: Number of packets to
send before waiting for an ACK
http://www.cdnplanet....
1.6 Increase initcwnd
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 26
1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
San Diego W...
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Ex...
Relax
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 29
2You’ve reached crazyland
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person...
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
San Diego Web Performance Meetup / 2014-08...
2.1 Pre-load
Pre-fetch assets required for the next page in a
process flow
San Diego Web Performance Meetup / 2014-08-06 FE...
2.1b pre-render
<link rel="prerender" href="url">
<link rel="subresource" href="">
<link rel="dns-prefetch" href="">
San D...
2.1c onVisibilityChange
And while you’re at it, don’t do expensive work if the
page is hidden
San Diego Web Performance Me...
2.2 Post-load
Fetch optional assets after onload
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to...
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.
San Diego We...
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Sa...
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?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy...
Can you predict round-trip-time?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy...
References
• WebPageTest – http://webpagetest.org
• Boomerang – http://lognormal.github.io/boomerang/doc/
• SOASTA mPulse ...
Thank You!
Questions?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 45
• Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• www.SOASTA.com
• boomerang
• LogNormal Blog
San Diego Web Performan...
Image Credits
• Apple Pie
http://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PC
http://www.flickr.com/phot...
Upcoming SlideShare
Loading in...5
×

Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)

382

Published on

San Diego web performance meetup: http://www.meetup.com/Web-Performance-SanDiego/events/184559312/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
382
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)"

  1. 1. FE Performance: Beginner to Expert to Crazy Person Philip Tellis / ptellis@soasta.com San Diego Web Performance Meetup / 2014-08-06 San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 1
  2. 2. • Philip Tellis • @bluesmoon • ptellis@soasta.com • SOASTA • boomerang San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 2
  3. 3. Get the most benefit with the least effort San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 3
  4. 4. Bandwidth San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 4
  5. 5. Patience San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 5
  6. 6. 0Beginning Web Performance San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 6
  7. 7. Start with a really slow site San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 7
  8. 8. 0.1 Start Measuring San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 8
  9. 9. Or use RUM for real user data (boomerang/mPulse) San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 9
  10. 10. 0.2 enable gzip http://slideshare.net/billwscott/improving-netflix-performance-experience San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 10
  11. 11. You can pre-gzip gzip_static in nginx San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 11
  12. 12. 0.3 ImageOptim San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 12
  13. 13. 0.4 Cache Cache-control: public, max-age=31415926 http://www.mnot.net/cache_docs/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 13
  14. 14. Yes, that was 10 million pies San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 14
  15. 15. 0 Congratulations You’ve just been promoted San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 15
  16. 16. 1What the Experts Do San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 16
  17. 17. 1.1 CDN Serve your root domain through a CDN San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 17
  18. 18. 1.1 CDN And make sure your CSS is on the same domain http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 18
  19. 19. 1.1 CDN Google Chrome will open two TCP connections to the primary host, one for the page, and the second "just in case" San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 19
  20. 20. 1.2 Split JavaScript "critical": in the HEAD, "enhancements": loaded async San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 20
  21. 21. 1.3 Audit your CSS Chrome WebDev tools San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 21
  22. 22. Also checkout uncss for a command line option San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 22
  23. 23. 1.4 Parallelise downloads/use sprites You can have higher bandwidth, you cannot have lower latency. San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 23
  24. 24. 1.5 Flush Early and Often Get bytes to the client ASAP to avoid TCP Slow Start, and speed up CSS San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 24
  25. 25. 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/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 25
  26. 26. 1.6 Increase initcwnd San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 26
  27. 27. 1.6b Also... net.ipv4.tcp_slow_start_after_idle=0 http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 27
  28. 28. 1.7 PageSpeed mod_pagespeed and ngx_pagespeed San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 28
  29. 29. Relax San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 29
  30. 30. 2You’ve reached crazyland San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 30
  31. 31. Sort in ascending order of signal latency • Electrons through copper • Light through fibre • Pulsars • Station Wagons • Smoke Signals San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 31
  32. 32. 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) San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 32
  33. 33. Study real user data Look for potential places to parallelise, predict or cache San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 33
  34. 34. 2.1 Pre-load Pre-fetch assets required for the next page in a process flow San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 34
  35. 35. 2.1b pre-render <link rel="prerender" href="url"> <link rel="subresource" href=""> <link rel="dns-prefetch" href=""> San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 35
  36. 36. 2.1c onVisibilityChange And while you’re at it, don’t do expensive work if the page is hidden San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 36
  37. 37. 2.2 Post-load Fetch optional assets after onload San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 37
  38. 38. 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/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 38
  39. 39. 2.4 Prepare for HTTP/2.0 Multiple assets on the same connection and TLS by default. Breaks many of our rules. San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 39
  40. 40. 2.5 Understand 3PoFs Use blackhole.webpagetest.org http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 40
  41. 41. 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/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 41
  42. 42. Can you predict round-trip-time? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 42
  43. 43. Can you predict round-trip-time? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 43
  44. 44. 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 San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 44
  45. 45. Thank You! Questions? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 45
  46. 46. • Philip Tellis • @bluesmoon • philip@bluesmoon.info • www.SOASTA.com • boomerang • LogNormal Blog San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 46
  47. 47. Image Credits • Apple Pie http://www.flickr.com/photos/24609729@N00/3353226142/ • Kittens in a PC http://www.flickr.com/photos/43525343@N08/6417971383/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 47
  1. A particular slide catching your eye?

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

×