Your SlideShare is downloading. ×
0
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

329

Published on

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

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
329
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. • 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. 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. Bandwidth San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 4
  • 5. Patience San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 5
  • 6. 0Beginning Web Performance San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 6
  • 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. 0.1 Start Measuring San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 8
  • 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. 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. 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. 0.3 ImageOptim San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 12
  • 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. Yes, that was 10 million pies San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 14
  • 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. 1What the Experts Do San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 16
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 1.6 Increase initcwnd San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 26
  • 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. 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. Relax San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 29
  • 30. 2You’ve reached crazyland San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 30
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Can you predict round-trip-time? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 42
  • 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. 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. Thank You! Questions? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 45
  • 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. 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

×