Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)

FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
San Diego Web Performance Meetup / 2014-08-06
San Diego Web Performance Meetup / 2014-08-06 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 (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
• 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 (San Diego Web Perf meetup)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)

Ähnlich wie Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup) (20)

Mehr von Philip Tellis

Mehr von Philip Tellis (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)