$30 off During Our Annual Pro Sale. View Details »

Frontend Performance: Beginner to Expert to Cra...

Frontend Performance: Beginner to Expert to Crazy Person

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

Philip Tellis

April 22, 2014
Tweet

More Decks by Philip Tellis

Other Decks in Technology

Transcript

  1. • Philip Tellis • @bluesmoon • [email protected] • 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

    / [email protected] 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. 0 Beginning 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. Or use RUM for real user data (boomerang/mPulse) Boston WebPerf

    Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 7
  7. You can pre-gzip gzip_static in nginx Boston WebPerf Meetup /

    2014-04-22 FE Performance: Beginner to Expert to Crazy Person 9
  8. Yes, that was 10 million pies Boston WebPerf Meetup /

    2014-04-22 FE Performance: Beginner to Expert to Crazy Person 12
  9. 0 Congratulations You’ve just been promoted Boston WebPerf Meetup /

    2014-04-22 FE Performance: Beginner to Expert to Crazy Person 13
  10. 1 What the Experts Do Boston WebPerf Meetup / 2014-04-22

    FE Performance: Beginner to Expert to Crazy Person 14
  11. 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
  12. 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
  13. 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
  14. 1.3 Audit your CSS Chrome WebDev tools Boston WebPerf Meetup

    / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 18
  15. 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
  16. 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
  17. 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
  18. 1.7 PageSpeed mod_pagespeed and ngx_pagespeed Boston WebPerf Meetup / 2014-04-22

    FE Performance: Beginner to Expert to Crazy Person 24
  19. 2 You’ve reached crazyland Boston WebPerf Meetup / 2014-04-22 FE

    Performance: Beginner to Expert to Crazy Person 26
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 2.2 Post-load Fetch optional assets after onload Boston WebPerf Meetup

    / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 32
  26. 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
  27. 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
  28. 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
  29. Can you predict round-trip-time? Boston WebPerf Meetup / 2014-04-22 FE

    Performance: Beginner to Expert to Crazy Person 37
  30. Can you predict round-trip-time? Boston WebPerf Meetup / 2014-04-22 FE

    Performance: Beginner to Expert to Crazy Person 38
  31. 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
  32. • Philip Tellis • @bluesmoon • [email protected] • www.SOASTA.com •

    boomerang • LogNormal Blog Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 41
  33. 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