frontend performance: beginner to expert to crazy person (san diego web perf meetup)

FE Performance: Beginner to Expert to CrazyPerson

Philip Tellis / [email protected]

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

http://www.meetup.com/Web-Performance-SanDiego/events/184559312/


• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang


http://twitter.com/bluesmoon

http://bluesmoon.info/

http://www.soasta.com/

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


Get the most benefit 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-netflix-performance-experience


http://www.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



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 tothe 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


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

<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 thepage is hidden



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/


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/


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


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





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



Thank You!Questions?



• Philip Tellis• @bluesmoon• [email protected]• 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/





frontend performance: beginner to expert to crazy person (san diego web perf meetup)

Technology

fe performance

crazy person philip

gzip http

domain http

pulsars light

copper light

ack http

smoke signals light