Frontend Performance: Beginner to Expert to Crazy Person

FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
Midwest.io / 2014-07-14
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 1

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

Get the most beneﬁt with the least effort

Bandwidth

Patience

0Beginning Web Performance

Start with a really slow site

0.1 Start Measuring

Or use RUM for real user data (old skool)

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

0.2 enable gzip
http://slideshare.net/billwscott/improving-netﬂix-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.1 CDN
Google Chrome will open two TCP connections to
the primary host, one for the page, and the second
"just in case"

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

2You’ve reached crazyland

Sort in ascending order of signal latency
• Electrons through copper
• Light through ﬁbre
• 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 ﬁbre
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 ﬂow

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

2.2 Post-load
Fetch optional assets after onload

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/

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
• 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/
• 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

Thank You!
Questions?

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

Image Credits
• Jean-Antoine Nollet
http://en.wikipedia.org/wiki/Jean-Antoine_Nollet
• Apple Pie
http://www.ﬂickr.com/photos/24609729@N00/3353226142/
• Kittens in a PC
http://www.ﬂickr.com/photos/43525343@N08/6417971383/

Frontend Performance: Beginner to Expert to Crazy Person

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Frontend Performance: Beginner to Expert to Crazy Person

Similaire à Frontend Performance: Beginner to Expert to Crazy Person (20)

Plus de Philip Tellis

Plus de Philip Tellis (11)

Dernier

Dernier (20)

Frontend Performance: Beginner to Expert to Crazy Person