Frontend Performance: Beginner to Expert to Crazy Person

  • 685 views
Uploaded on

Boston Web Performance Meetup, April 22, 2014 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
685
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
11
Comments
0
Likes
4

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. • Philip Tellis • @bluesmoon • ptellis@soasta.com • SOASTA • boomerang Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 1
  • 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. Get the most benefit with the least effort Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 3
  • 4. 0Beginning Web Performance Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 4
  • 5. Start with a really slow site Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 5
  • 6. 0.1 Start Measuring Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 6
  • 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. 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. You can pre-gzip gzip_static in nginx Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 9
  • 10. 0.3 ImageOptim Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 10
  • 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. Yes, that was 10 million pies Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 12
  • 13. 0 Congratulations You’ve just been promoted Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 13
  • 14. 1What the Experts Do Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 14
  • 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. 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. 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. 1.3 Audit your CSS Chrome WebDev tools Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 18
  • 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. 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. 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. 1.6 Increase initcwnd Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 22
  • 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. 1.7 PageSpeed mod_pagespeed and ngx_pagespeed Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 24
  • 25. Relax Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 25
  • 26. 2You’ve reached crazyland Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 26
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Can you predict round-trip-time? Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 37
  • 38. Can you predict round-trip-time? Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 38
  • 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. Thank You! Questions? Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 40
  • 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. 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