Frontend Performance: De débutant à Expert à Fou Furieux

FE Performance: Beginner to Expert to Crazy
Person
Philip Tellis / ptellis@soasta.com
Paris-Web 2014 / 2014-10-17
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 1

Philip Tellis
@bluesmoon
ptellis@soasta.com
SOASTA
boomerang

Get the most benefit with the least effort

0 Beginning 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

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

1 What 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.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
(also with a grunt version)

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

Bandwidth is different around the world

As are people

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
grunt-uncss – https://github.com/addyosmani/grunt-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/

Frontend Performance: De débutant à Expert à Fou Furieux

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Frontend Performance: De débutant à Expert à Fou Furieux

Ähnlich wie Frontend Performance: De débutant à Expert à Fou Furieux (20)

Mehr von Philip Tellis

Mehr von Philip Tellis (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Frontend Performance: De débutant à Expert à Fou Furieux