FE 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

Philip Tellis
@bluesmoon
ptellis@soasta.com
SOASTA
boomerang

0.1 Start Measuring

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

You already compress, minify and cache
aggressively, 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 to
the primary host, one for the page, and the second
just in case

1.1 Google Chrome will open two TCP connections to the
primary 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

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 Slow
Start, and speed up CSS

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/

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

2 You’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 fibre
4 Station Wagons (possibly highest bandwidth)

Study real user data
Look for potential places to parallelise, predict or
cache

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

2.1b pre-render
link rel=prerender href=url
link rel=subresource href=
link rel=dns-prefetch href=

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

2.2 Post-load
Fetch optional assets after onload

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/

2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS by
default.
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 the
critical 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

Thank You!
Questions?

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

Image Credits
Apple Pie
http://www.flickr.com/photos/24609729@N00/3353226142/
Kittens in a PC
http://www.flickr.com/photos/43525343@N08/6417971383/

FE Performance Expert to Crazy Person

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie FE Performance Expert to Crazy Person

Ähnlich wie FE Performance Expert to Crazy Person (20)

Mehr von Philip Tellis

Mehr von Philip Tellis (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

FE Performance Expert to Crazy Person