frontend performance: expert to crazy person

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

http://www.webperfdays.org/events/2014-newyork/index.html

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

http://twitter.com/bluesmoon

http://bluesmoon.info/

http://www.soasta.com/

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

0.1 Start Measuring

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

You already compress, minify and cacheaggressively, right?

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.1 CDN

Google Chrome will open two TCP connections tothe primary host, one for the page, and the second

"just in case"

1.1 Google Chrome will open two TCP connections to theprimary host, one for the page, and the second "just in case"

1.1 Don’t waste it

1.2 Split JavaScript

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

1.3 Audit your CSS

Chrome WebDev tools

Also checkout uncss for a command line option

https://github.com/giakki/uncss

1.4 Parallelise downloads/use sprites

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

Sort in ascending order of signal latency

1 Pulsars (light through vacuum)2 Smoke Signals (light through air)3 Electrons through copper / Light through fibre4 Station Wagons (possibly highest bandwidth)

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

2.1c onVisibilityChange

And while you’re at it, don’t do expensive work if thepage is hidden

https://developer.mozilla.org/en-US/docs/Web/Guide/

User_experience/Using_the_Page_Visibility_API

https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

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/

• 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

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/

https://github.com/giakki/uncss

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

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

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

https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching

http://www.chromium.org/spdy/link-headers-and-server-hint/link-rel-subresource

https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

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: expert to crazy person

york 2014

html webperfdays

primary host

ascending order

18 fe performance

predict round

tcp connections

domain

Technology

modern frontend engineering

frontend. global domination

frontend moderno

crazy ideas by crazy billionaires

learn frontend testing

signal chain frontend subsystem interface control...

learn frontend testing -...

modern frontend

testing the frontend

frontend operations

frontend performance: de débutant à expert à fou furieux

frontend spof

frontend monitoring @ grammarly

gcc frontend howto

frontend performance: beginner to expert to crazy person...

frontend noted django

moderni frontend workflow

the frontend developer landscape explained and the rise of...

frontend controllers

business objects frontend