• Philip Tellis
• @bluesmoon
• ptellis@soasta.com
• SOASTA
• boomerang

Confoo 2014 / 2014-02-27

FE Performance: Beginner...
FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com

Confoo 2014 / 2014-02-27

Confoo 20...
Get the most benefit with the least effort

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

3
0

Beginning Web Performance

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

4
Start with a really slow site

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

5
0.1

Start Measuring

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

6
Or use RUM for real user data (boomerang/mPulse)

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Pe...
0.2

enable gzip

http://slideshare.net/billwscott/improving-netflix-performance-experience
Confoo 2014 / 2014-02-27

FE Pe...
You can pre-gzip

gzip_static in nginx

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

9
0.3

ImageOptim

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

10
0.4

Cache

Cache-control: public, max-age=31415926

http://www.mnot.net/cache_docs/

Confoo 2014 / 2014-02-27

FE Perform...
Yes, that was 10 million pies

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

12
0

Congratulations

You’ve just been promoted

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Perso...
1

What the Experts Do

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

14
1.1

CDN

Serve your root domain through a CDN

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Pers...
1.1

CDN

And make sure your CSS is on the same domain

http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain....
1.2

Split JavaScript

"critical": in the HEAD,
"enhancements": loaded async

Confoo 2014 / 2014-02-27

FE Performance: Be...
1.3

Audit your CSS

Chrome WebDev tools
Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

18
1.4

Parallelise downloads

You can have higher bandwidth, you cannot have lower latency.
Confoo 2014 / 2014-02-27

FE Per...
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-...
1.6

Increase initcwnd

Initial Congestion Window: Number of packets to
send before waiting for an ACK

http://www.cdnplan...
1.6

Increase initcwnd

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

22
1.6b

Also...

net.ipv4.tcp_slow_start_after_idle=0

http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/

Confoo ...
1.7

PageSpeed

mod_pagespeed and ngx_pagespeed

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Per...
Relax

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

25
2

You’ve reached crazyland

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

26
Sort in ascending order of signal latency

• Electrons through copper
• Light through fibre
• Pulsars
• Station Wagons
• Sm...
Study real user data

Look for potential places to parallelise, predict or
cache

Confoo 2014 / 2014-02-27

FE Performance...
2.1 Pre-load

Pre-fetch assets required for the next page in a
process flow

Confoo 2014 / 2014-02-27

FE Performance: Begi...
2.1b pre-render

<link rel="prerender" href="url">

https://developers.google.com/chrome/whitepapers/prerender

Confoo 201...
2.2 Post-load

Fetch optional assets after onload

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy P...
2.3 Detect broken accept-encoding

Many Windows anti-viruses and firewalls disable
gzip by munging the Accept-Encoding head...
2.4 Prepare for HTTP/2.0

Multiple assets on the same connection and TLS by
default.
Breaks many of our rules.

Confoo 201...
2.5 Understand 3PoFs

Use blackhole.webpagetest.org

http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
...
2.6 Understand the IFrame Loader Technique

Take required but non-critical assets out of the
critical path

http://www.log...
Can you predict round-trip-time?

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

36
Can you predict round-trip-time?

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

37
References

•
•
•
•
•
•
•
•
•
•
•
•

WebPageTest – http://webpagetest.org
Boomerang – http://lognormal.github.io/boomerang...
Thank You!
Questions?

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

39
• Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• www.SOASTA.com
• boomerang
• LogNormal Blog

Confoo 2014 / 2014-02-...
Image Credits

• Apple Pie
http://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PC
http://www.flickr.com/pho...
Upcoming SlideShare
Loading in...5
×

Frontend Performance: Beginner to Expert to Crazy Person

4,520

Published on

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.

Published in: Technology
1 Comment
33 Likes
Statistics
Notes
  • my co-worker's sister-in-law got paid $12019 the prior week. she gets paid on the laptop and bought a $391300 house. All she did was get fortunate and put to work the steps uncovered on this web site------------------- http://moneyexpress45.blogspot.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,520
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
60
Comments
1
Likes
33
Embeds 0
No embeds

No notes for slide

Frontend Performance: Beginner to Expert to Crazy Person

  1. 1. • Philip Tellis • @bluesmoon • ptellis@soasta.com • SOASTA • boomerang Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 1
  2. 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. 3. Get the most benefit with the least effort Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 3
  4. 4. 0 Beginning Web Performance Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 4
  5. 5. Start with a really slow site Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 5
  6. 6. 0.1 Start Measuring Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 6
  7. 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. 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. 9. You can pre-gzip gzip_static in nginx Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 9
  10. 10. 0.3 ImageOptim Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 10
  11. 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. 12. Yes, that was 10 million pies Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 12
  13. 13. 0 Congratulations You’ve just been promoted Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 13
  14. 14. 1 What the Experts Do Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 14
  15. 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. 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. 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. 18. 1.3 Audit your CSS Chrome WebDev tools Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 18
  19. 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. 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. 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. 22. 1.6 Increase initcwnd Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 22
  23. 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. 24. 1.7 PageSpeed mod_pagespeed and ngx_pagespeed Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 24
  25. 25. Relax Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 25
  26. 26. 2 You’ve reached crazyland Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 26
  27. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. Can you predict round-trip-time? Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 36
  37. 37. Can you predict round-trip-time? Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 37
  38. 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. 39. Thank You! Questions? Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 39
  40. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×