Your SlideShare is downloading. ×
0
• Philip Tellis
• @bluesmoon
• ptellis@soasta.com
• SOASTA
• boomerang
Boston WebPerf Meetup / 2014-04-22 FE Performance: ...
FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
Boston WebPerf Meetup / 2014-04-22
B...
Get the most benefit with the least effort
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy P...
0Beginning Web Performance
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 4
Start with a really slow site
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 5
0.1 Start Measuring
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 6
Or use RUM for real user data (boomerang/mPulse)
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to ...
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
Boston WebPerf Meetup / 2014-04-2...
You can pre-gzip
gzip_static in nginx
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Perso...
0.3 ImageOptim
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 10
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
Boston WebPerf Meetup / 2014-04-22 FE Pe...
Yes, that was 10 million pies
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 12
0 Congratulations
You’ve just been promoted
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy...
1What the Experts Do
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 14
1.1 CDN
Serve your root domain through a CDN
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Craz...
1.1 CDN
And make sure your CSS is on the same domain
http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.htm...
1.2 Split JavaScript
"critical": in the HEAD,
"enhancements": loaded async
Boston WebPerf Meetup / 2014-04-22 FE Performan...
1.3 Audit your CSS
Chrome WebDev tools
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Pers...
1.4 Parallelise downloads
You can have higher bandwidth, you cannot have lower latency.
Boston WebPerf Meetup / 2014-04-22...
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP Slow
Start, and speed up CSS
Boston WebPerf Meetup / 2...
1.6 Increase initcwnd
Initial Congestion Window: Number of packets to
send before waiting for an ACK
http://www.cdnplanet....
1.6 Increase initcwnd
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 22
1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
Boston WebP...
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Cra...
Relax
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 25
2You’ve reached crazyland
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 26
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
Boston WebPerf Meetup / 2014-04-22 FE Perf...
2.1 Pre-load
Pre-fetch assets required for the next page in a
process flow
Boston WebPerf Meetup / 2014-04-22 FE Performanc...
2.1b pre-render
<link rel="prerender" href="url">
<link rel="subresource" href="">
<link rel="dns-prefetch" href="">
Bosto...
2.2 Post-load
Fetch optional assets after onload
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert 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.
Boston WebPe...
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Bo...
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?
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 37
Can you predict round-trip-time?
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 38
References
• WebPageTest – http://webpagetest.org
• Boomerang – http://lognormal.github.io/boomerang/doc/
• SOASTA mPulse ...
Thank You!
Questions?
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 40
• Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• www.SOASTA.com
• boomerang
• LogNormal Blog
Boston WebPerf Meetup /...
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

825

Published on

Boston Web Performance Meetup, April 22, 2014

The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get fed up and leave. In this talk we'll start with the basics and get progressively insane. We'll go over several front-end performance best practices, a few anti-patterns, the reasoning behind the rules, and how they've changed over the years. We'll also look at some great tools to help you.

Schedule: 6:30, pizza
7:15: talk

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
825
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

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

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

×