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 frontend 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.

1. • Philip Tellis
• @bluesmoon
• ptellis@soasta.com
• SOASTA
• boomerang
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
1

2. FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
Confoo 2014 / 2014-02-27
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
2

3. Get the most benefit with the least effort
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
3

4. 0
Beginning Web Performance
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
4

5. Start with a really slow site
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
5

6. 0.1
Start Measuring
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
6

7. Or use RUM for real user data (boomerang/mPulse)
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
7

8. 0.2
enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
8

9. You can pre-gzip
gzip_static in nginx
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
9

10. 0.3
ImageOptim
Confoo 2014 / 2014-02-27
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/
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
11

12. Yes, that was 10 million pies
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
12

13. 0
Congratulations
You’ve just been promoted
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
13

14. 1
What the Experts Do
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
14

15. 1.1
CDN
Serve your root domain through a CDN
Confoo 2014 / 2014-02-27
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
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
16

17. 1.2
Split JavaScript
"critical": in the HEAD,
"enhancements": loaded async
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
17

18. 1.3
Audit your CSS
Chrome WebDev tools
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
18

19. 1.4
Parallelise downloads
You can have higher bandwidth, you cannot have lower latency.
Confoo 2014 / 2014-02-27
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
Confoo 2014 / 2014-02-27
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-optimumperformance/
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
21

22. 1.6
Increase initcwnd
Confoo 2014 / 2014-02-27
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/
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
23

24. 1.7
PageSpeed
mod_pagespeed and ngx_pagespeed
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
24

25. Relax
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
25

26. 2
You’ve reached crazyland
Confoo 2014 / 2014-02-27
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
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
27

28. Study real user data
Look for potential places to parallelise, predict or
cache
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
28

29. 2.1 Pre-load
Pre-fetch assets required for the next page in a
process flow
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
29

30. 2.1b pre-render
<link rel="prerender" href="url">
https://developers.google.com/chrome/whitepapers/prerender
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
30

31. 2.2 Post-load
Fetch optional assets after onload
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
31

32. 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/
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
32

33. 2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS by
default.
Breaks many of our rules.
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
33

34. 2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
34

35. 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/
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
35

36. Can you predict round-trip-time?
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
36

37. Can you predict round-trip-time?
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
37

38. 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
FE SPoF – http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
38

39. Thank You!
Questions?
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
39

40. • Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• www.SOASTA.com
• boomerang
• LogNormal Blog
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
40

41. Image Credits
• Apple Pie
http://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PC
http://www.flickr.com/photos/43525343@N08/6417971383/
Confoo 2014 / 2014-02-27
FE Performance: Beginner to Expert to Crazy Person
41