Frontend Performance: Beginner to Expert to Crazy Person

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

Confoo 2014 / 2014-02-27

FE Performance: Beginner to Expert to Crazy Person

1

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

Confoo 2014 / 2014-02-27

Confoo 2014 / 2014-02-27


2

Get the most beneﬁt with the least effort

Confoo 2014 / 2014-02-27


3

0

Beginning Web Performance

Confoo 2014 / 2014-02-27


4

Start with a really slow site

Confoo 2014 / 2014-02-27


5

0.1

Start Measuring

Confoo 2014 / 2014-02-27


6

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

Confoo 2014 / 2014-02-27


7

0.2

enable gzip

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


8

You can pre-gzip

gzip_static in nginx

Confoo 2014 / 2014-02-27


9

0.3

ImageOptim

Confoo 2014 / 2014-02-27


10

0.4

Cache

Cache-control: public, max-age=31415926

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

Confoo 2014 / 2014-02-27


11

Yes, that was 10 million pies

Confoo 2014 / 2014-02-27


12

0

Congratulations

You’ve just been promoted

Confoo 2014 / 2014-02-27


13

1

What the Experts Do

Confoo 2014 / 2014-02-27


14

1.1

CDN

Serve your root domain through a CDN

Confoo 2014 / 2014-02-27


15

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


16

1.2

Split JavaScript

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

Confoo 2014 / 2014-02-27


17

1.3

Audit your CSS

Chrome WebDev tools
Confoo 2014 / 2014-02-27


18

1.4

Parallelise downloads

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


19

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


20

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


21

1.6

Increase initcwnd

Confoo 2014 / 2014-02-27


22

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


23

1.7

PageSpeed

mod_pagespeed and ngx_pagespeed

Confoo 2014 / 2014-02-27


24

Relax

Confoo 2014 / 2014-02-27


25

2

You’ve reached crazyland

Confoo 2014 / 2014-02-27


26

Sort in ascending order of signal latency

• Electrons through copper
• Light through ﬁbre
• Pulsars
• Station Wagons
• Smoke Signals

Confoo 2014 / 2014-02-27


27

Study real user data

Look for potential places to parallelise, predict or
cache

Confoo 2014 / 2014-02-27


28

2.1 Pre-load

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

Confoo 2014 / 2014-02-27


29

2.1b pre-render

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

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

Confoo 2014 / 2014-02-27


30

2.2 Post-load

Fetch optional assets after onload

Confoo 2014 / 2014-02-27


31

2.3 Detect broken accept-encoding

Many Windows anti-viruses and ﬁrewalls disable
gzip by munging the Accept-Encoding header

http://www.lognormal.com/blog/2012/08/17/accept-encoding-stats/

Confoo 2014 / 2014-02-27


32

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


33

2.5 Understand 3PoFs

Use blackhole.webpagetest.org

http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html

Confoo 2014 / 2014-02-27


34

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


35

Can you predict round-trip-time?

Confoo 2014 / 2014-02-27


36

Can you predict round-trip-time?

Confoo 2014 / 2014-02-27


37

References

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

WebPageTest – http://webpagetest.org
Boomerang – http://lognormal.github.io/boomerang/doc/
SOASTA mPulse – http://www.soasta.com/free
Netﬂix gzip study – http://www.slideshare.net/billwscott/improving-netﬂix-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


38

Thank You!
Questions?

Confoo 2014 / 2014-02-27


39

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

Confoo 2014 / 2014-02-27


40

Image Credits

• Apple Pie
http://www.ﬂickr.com/photos/24609729@N00/3353226142/
• Kittens in a PC
http://www.ﬂickr.com/photos/43525343@N08/6417971383/

Confoo 2014 / 2014-02-27


41

Frontend Performance: Beginner to Expert to Crazy Person

More Related Content

What's hot

Similar to Frontend Performance: Beginner to Expert to Crazy Person

More from Philip Tellis

Recently uploaded

Frontend Performance: Beginner to Expert to Crazy Person