There’s no such thing as fast enough. You can always make your website faster. This talk will show you how. The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get tired 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. FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
IPC 2014 / 2014-10-28
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 1

2. Philip Tellis
@bluesmoon
ptellis@soasta.com
SOASTA
boomerang
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 2

3. Get the most benefit with the least effort
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 3

4. 0 Beginning Web Performance
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 4

5. Start with a really slow site
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 5

6. 0.1 Start Measuring
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 6

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

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

9. You can pre-gzip
gzip_static in nginx
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 9

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

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

13. 0 Congratulations
You’ve just been promoted
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 13

14. 1 What the Experts Do
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 14

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

17. 1.1 CDN
Google Chrome will open two TCP connections to
the primary host, one for the page, and the second
just in case
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 17

18. 1.1 Google Chrome will open two TCP connections to the
primary host, one for the page, and the second just in case
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 18

19. 1.1 Don’t waste it
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 19

20. 1.2 Split JavaScript
critical: in the HEAD,
enhancements: loaded async
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 20

21. 1.3 Audit your CSS
Chrome WebDev tools
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 21

22. Also checkout uncss for a command line option
(also with a grunt version)
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 22

23. 1.4 Parallelise downloads/use sprites
You can have higher bandwidth, you cannot have lower latency.
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 23

24. 1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP Slow
Start, and speed up CSS
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 24

25. 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/
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 25

26. 1.6 Increase initcwnd
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 26

27. 1.6 Increase initcwnd
@mobtec on Twitter
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 27

28. 1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 28

29. 1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 29

30. Relax
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 30

31. 2 You’ve reached crazyland
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 31

32. Sort in ascending order of signal latency
Electrons through copper
Light through fibre
Pulsars
Station Wagons
Smoke Signals
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 32

33. 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)
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 33

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

35. Bandwidth is different around the world
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 35

36. As are people
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 36

37. 2.1 Pre-load
Pre-fetch assets required for the next page in a
process flow
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 37

38. 2.1b pre-render
link rel=prerender href=url
link rel=subresource href=
link rel=dns-prefetch href=
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 38

39. 2.1c onVisibilityChange
And while you’re at it, don’t do expensive work if the
page is hidden
https://developer.mozilla.org/en-US/docs/Web/Guide/
User_experience/Using_the_Page_Visibility_API
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 39

40. 2.2 Post-load
Fetch optional assets after onload
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 40

41. 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/
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 41

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

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

44. 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/
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 44

45. Can you predict round-trip-time?
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 45

46. Can you predict round-trip-time?
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 46

47. 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
grunt-uncss – https://github.com/addyosmani/grunt-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
Page Visibility API –
https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 47

48. Thank You!
Questions?
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 48

49. Philip Tellis
@bluesmoon
philip@bluesmoon.info
www.SOASTA.com
boomerang
LogNormal Blog
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 49

50. Image Credits
Apple Pie
http://www.flickr.com/photos/24609729@N00/3353226142/
Kittens in a PC
http://www.flickr.com/photos/43525343@N08/6417971383/
IPC 2014 / 2014-10-28 FE Performance: Beginner to Expert to Crazy Person 50