Tweet
Tweet

Slide 1

Slide 1 text

• Philip Tellis • @bluesmoon • [email protected] • SOASTA • boomerang Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Get the most benefit with the least effort Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 3

Slide 4

Slide 4 text

0 Beginning Web Performance Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 4

Slide 5

Slide 5 text

Start with a really slow site Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 5

Slide 6

Slide 6 text

0.1 Start Measuring Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 6

Slide 7

Slide 7 text

Or use RUM for real user data (boomerang/mPulse) Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

0.3 ImageOptim Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

1.3 Audit your CSS Chrome WebDev tools Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

1.6 Increase initcwnd Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

1.7 PageSpeed mod_pagespeed and ngx_pagespeed Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 24

Slide 25

Slide 25 text

Relax Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

2.1b pre-render Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 31

Slide 32

Slide 32 text

2.2 Post-load Fetch optional assets after onload Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Thank You! Questions? Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 40

Slide 41

Slide 41 text

• 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

Slide 42

Slide 42 text

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