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

http://twitter.com/bluesmoon

http://bluesmoon.info/

http://www.soasta.com/

http://lognormal.github.com/boomerang/doc/

http://confoo.ca/en/2014/session/frontend-performance-beginner-to-expert-to-crazy-person

FE Performance: Beginner to Expert to CrazyPerson

Philip Tellis / ptellis@soasta.com

Confoo 2014 / 2014-02-27

Get the most benefit with the least effort

0Beginning Web Performance

Start with a really slow site

0.1 Start Measuring

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

0.2 enable gzip

http://slideshare.net/billwscott/improving-netflix-performance-experience

http://www.slideshare.net/billwscott/improving-netflix-performance-experience

You can pre-gzip

gzip_static in nginx

0.3 ImageOptim

0.4 Cache

Cache-control: public, max-age=31415926

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

Yes, that was 10 million pies

0 Congratulations

You’ve just been promoted

1What the Experts Do

1.1 CDN

Serve your root domain through a CDN

1.1 CDN

And make sure your CSS is on the same domain

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

1.2 Split JavaScript

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

1.3 Audit your CSS

Chrome WebDev tools

1.4 Parallelise downloads

You can have higher bandwidth, you cannot have lower latency.

1.5 Flush Early and Often

Get bytes to the client ASAP to avoid TCP SlowStart, and speed up CSS

1.6 Increase initcwnd

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

http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-

performance/

http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance/

1.6 Increase initcwnd

1.6b Also...

net.ipv4.tcp_slow_start_after_idle=0

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

1.7 PageSpeed

mod_pagespeed and ngx_pagespeed

Relax

2You’ve reached crazyland

Sort in ascending order of signal latency

• Electrons through copper• Light through fibre• Pulsars• Station Wagons• Smoke Signals

Study real user data

Look for potential places to parallelise, predict orcache

2.1 Pre-load

Pre-fetch assets required for the next page in aprocess flow

2.1b pre-render

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

2.2 Post-load

Fetch optional assets after onload

2.3 Detect broken accept-encoding

Many Windows anti-viruses and firewalls disablegzip by munging the Accept-Encoding header

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

2.4 Prepare for HTTP/2.0

Multiple assets on the same connection and TLS bydefault.

Breaks many of our rules.

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 thecritical path

http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/

Can you predict round-trip-time?

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

http://webpagetest.org

http://lognormal.github.io/boomerang/doc/

http://www.soasta.com/free

http://www.slideshare.net/billwscott/improving-netflix-performance-experience

http://wiki.nginx.org/HttpGzipStaticModule

http://imageoptim.com/

http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance/

Thank You!Questions?

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

http://twitter.com/bluesmoon

http://bluesmoon.info/

http://www.soasta.com/

http://lognormal.github.com/boomerang/doc/

http://www.lognormal.com/blog/

Image Credits

• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/

• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/

http://www.flickr.com/photos/24609729@N00/3353226142/

http://www.flickr.com/photos/43525343@N08/6417971383/

Frontend Performance: Beginner to Expert to Crazy Person

27fe performance

predict round

performance

domain

initcwnd

google

frontend

beginner

Technology

Modern frontend workflow

Frontend thunderdome

Instalación FrontEnd

Signal Chain Frontend Subsystem Interface Control...

Ukulele Crazy! · “Ukulele Crazy: Get Your Uke On,” is....

Frontend fejlesztő

Cheap frontend tricks

Noria - USENIX...Frontend!4 Stories Votes 90% reads 10%...

Frontend Development - Supercharge your frontend development...

Crazy Bulk: Go Body Building Crazy!

McLab Tutorial Part 3 – McLab Frontend Frontend...

Frontend webutvikling

Upstream Beginner LEAFLET Upstream Beginner...

Frontend Performance: Beginner to Expert to Crazy Person...

Desarrollo Frontend

Crazy About Quilting - Crazy Nine-Patch Directions