FE Performance: Beginner to Expert to Crazy Person Philip Tellis / [email protected] 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

• Philip Tellis • @bluesmoon • [email protected] • SOASTA • boomerang San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 2

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

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

0 Beginning Web Performance San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 6

Start with a really slow site San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 7

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 Expert to Crazy Person 9

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

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

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-08-06 FE Performance: Beginner to Expert to Crazy Person 13

Yes, that was 10 million pies San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 14

0 Congratulations You’ve just been promoted San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 15

1 What 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 Expert to Crazy Person 17

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

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

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

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

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

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

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

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

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 Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 27

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

Relax San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 29

2 You’ve reached crazyland San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 30

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

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

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

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

2.1b pre-render San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 35

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

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

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

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

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

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

Can you predict round-trip-time? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 42

Can you predict round-trip-time? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 43

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

Thank You! Questions? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 45

• Philip Tellis • @bluesmoon • [email protected] • www.SOASTA.com • boomerang • LogNormal Blog San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 46

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