The document outlines steps for front-end performance optimization, beginning with basic techniques like caching, compression and domain sharing and progressing to more advanced strategies involving preloading, parallel downloads, and predicting response times. It was presented by Philip Tellis at WebPerfDays New York and includes references for further reading on topics like CDNs, TCP tuning, and the page visibility API.

1. FE Performance: Expert to Crazy Person
Philip Tellis / ptellis@soasta.com
WebPerfDays New York / 2014-09-18
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 1

2. Philip Tellis
@bluesmoon
ptellis@soasta.com
SOASTA
boomerang
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 2

3. 0.1 Start Measuring
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 3

4. Or use RUM for real user data (boomerang/mPulse)
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 4

5. You already compress, minify and cache
aggressively, right?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 5

6. 1.1 CDN
Serve your root domain through a CDN
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 6

7. 1.1 CDN
And make sure your CSS is on the same domain
http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 7

8. 1.1 CDN
Google Chrome will open two TCP connections to
the primary host, one for the page, and the second
just in case
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 8

9. 1.1 Google Chrome will open two TCP connections to the
primary host, one for the page, and the second just in case
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 9

10. 1.1 Don’t waste it
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 10

11. 1.2 Split JavaScript
critical: in the HEAD,
enhancements: loaded async
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 11

12. 1.3 Audit your CSS
Chrome WebDev tools
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 12

13. Also checkout uncss for a command line option
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 13

14. 1.4 Parallelise downloads/use sprites
You can have higher bandwidth, you cannot have lower latency.
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 14

15. 1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP Slow
Start, and speed up CSS
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 15

16. 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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 16

17. 1.6 Increase initcwnd
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 17

18. 1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 18

19. 1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 19

20. Relax
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 20

21. 2 You’ve reached crazyland
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 21

22. Sort in ascending order of signal latency
Electrons through copper
Light through fibre
Pulsars
Station Wagons
Smoke Signals
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 22

23. 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)
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 23

24. Study real user data
Look for potential places to parallelise, predict or
cache
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 24

25. 2.1 Pre-load
Pre-fetch assets required for the next page in a
process flow
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 25

26. 2.1b pre-render
link rel=prerender href=url
link rel=subresource href=
link rel=dns-prefetch href=
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 26

27. 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
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 27

28. 2.2 Post-load
Fetch optional assets after onload
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 28

29. 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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 29

30. 2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS by
default.
Breaks many of our rules.
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 30

31. 2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 31

32. 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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 32

33. Can you predict round-trip-time?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 33

34. Can you predict round-trip-time?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 34

35. 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
Page Visibility API –
https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 35

36. Thank You!
Questions?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 36

37. Philip Tellis
@bluesmoon
philip@bluesmoon.info
www.SOASTA.com
boomerang
LogNormal Blog
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 37

38. Image Credits
Apple Pie
http://www.flickr.com/photos/24609729@N00/3353226142/
Kittens in a PC
http://www.flickr.com/photos/43525343@N08/6417971383/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 38