WIXLIB

BuildingFasterWebsitesWebRTCcrash course on web performanceIlya Grigorik - @igrigorikMake The Web FastGoogle

Web performance in one slide.Critical rendering ntCSSOMIn-app performance@igrigorik

Thanks. Questions?TwitterG Web@igrigorikgplus.to/igrigorikigvita.com

2Critical rendering path: resource tPaintCSSOMLatency,bandwidth3G / 4G / .3In-app performance: CPU Render@igrigorik

What's the impact of slow sites?Lower conversions and engagement, higher bounce rates.

server delays experiment"2000 ms delayreduced per userrevenue by 4.3%!" Strong negative impactsRoughly linear changes with increasing delayTime to Click changed by roughly double the delayPerformance Related Changes and their User Impact

Impact of 1-second delay.Impact of 1-second delay - Strangeloop

How speed affects bounce rateYo ho ho and a few billion pages of RUM@igrigorik

Site speed is a signal for search"We encourage you to startlooking at your site's speed— not only to improve yourranking in search engines,but also to improveeveryone's experience onthe Internet."Google Search Quality TeamUsing site speed in web search ranking@igrigorik

Speed is a feature.

So, how are we doing today?Okay, I get it, speed matters. but, are we there yet?

DelayUser reaction0 - 100 msInstant100 - 300 msSlight perceptible delay300 - 1000 msTask focus, perceptible delay1 s Mental context switch10 s I'll come back later. "1000 ms time toglass challenge"Simple user-input must be acknowledged within 100 milliseconds.To keep the user engaged, the task must complete within 1000 milliseconds.Ergo, our pages should render within 1000 milliseconds.Speed, performance and human perception@igrigorik

Our applications are complex, and growing.DesktopContent TypeMobileAvg # of requestsAvg sizeAvg # of requestsAvg sizeHTML1056 KB640 KBImages56856 KB38498 KBJavascript15221 KB10146 KBCSS536 KB327 KBTotal86 1169 KB57 711 KBHTTP ArchiveOuch!

Desktop: 3.1 sMobile: 3.5 s"It’s great to see accessfrom mobile is around30% faster compared tolast year."Is the web getting faster? - Google Analytics Blog@igrigorik

Great, network will save us?Right, right? We can just sit back and.

Average connection speed in Q4 2012: 5000 kbps State of the Internet - Akamai - 2007-2012

Fiber-to-the-home services provided 18 ms round-trip latency on average, while cable-based servicesaveraged 26 ms, and DSL-based services averaged 43 ms. This compares to 2011 figures of 17 ms forfiber, 28 ms for cable and 44 ms for DSL.Measuring Broadband America - July 2012 - FCC@igrigorik

Worldwide: 100 msUS: 50 60 msAverage RTT to Google in 2012 was.

Latency vs. Bandwidth impact on Page Load TimeSingle digit % perfimprovement after5 MbpsAverage household in is running on a 5 Mbps connection. Ergo, average consumer would not seean improvement in page loading time by upgrading their connection. (doh!)Bandwidth doesn't matter (much) - Google@igrigorik

Bandwidth doesn't matter (much)

Improving bandwidth is "easy". 60% of new capacity through upgrades in past decade unlit fiber"Just lay more fiber."Improving latency is expensive. impossible? Bounded by the speed of light - oops!We're already within a small constant factor of the maximum"Shorter cables?" 80M / msLatency is the new Performance Bottleneck@igrigorik

Mobile, oh Mobile."Users of the Sprint 4G network can expect to experience average speeds of 3 Mbps to 6 Mbpsdownload and up to 1.5 Mbps upload with an average latency of 150 ms. On the Sprint 3Gnetwork, users can expect to experience average speeds of 600 Kbps - 1.4 Mbps download and350 Kbps - 500 Kbps upload with an average latency of 400 ms."3G4GSprint150 - 400 ms150 msAT&T150 - 400 ms100 - 200 msAT&T@igrigorik

Why are mobile latencies so high?. and variable?

Design constraint #1: "Stable" performance scalability Control over network performance and resource allocation Ability to manage 10 100's of active devices within single cell Coverage of much larger area

Design constraint #2: Maximize battery life Radio is the second most expensive component (after screen) Limited amount of available power (as you are well aware)

Radio Resource Controller Phone: Hi, I want to transmit data, please? RRC: OK. Transmit in [x-y] timeslots Transmit with Z power Transmit with Q modulationRRC. (some time later) . RRC: Go into low power state.High Performance Browser Networking: Mobile NetworksAll communication and powermanagement is centralized andmanaged by the RRC.

3G / 4G Control and User plane latencies 1-X RTT's ofnegotiationsI want tosend data!2RRC13ApplicationdataThere is a one time cost for control-planenegotiationUser-plane latency is the one-way latency betweenpacket availability in the device and packet at thebase stationIdle to connected latencyUser-plane one-way latencyControl-plane latencyUser-plane latencySame process happens for incoming data, just reverse steps 1 and 2LTEHSPA 3G 100 ms 100 ms 2.5 s 5 ms 10 ms 50 ms

Inbound packet flowAT&T corenetwork latencyLTEHSPA HSPAEDGEGPRS40-50 ms50-200 ms150-400 ms600-750 ms600-750 ms

. all that to send a single TCP packet?

Why is latency the bottleneck?. what's the relationship between latency and bandwidth?

TCP Congestion Control & Avoidance. TCP is designed to probe the network to figure out the available capacityTCP does not use full bandwidth capacity from the start!TCP Slow Start is a feature, not a bug.Congestion Avoidance and Control@igrigorik

The (short) life of a web request (Worst case) DNS lookup to resolve the hostname to IP address(Worst case) New TCP connection, requiring a full roundtrip to the server(Worst case) TLS handshake with up to two extra server roundtrips! HTTP request, requiring a full roundtrip to the serverServer processing time@igrigorik

Let's fetch a 20 KB file via a low-latency link (IW4). 5 Mbps connection56 ms roundtrip time (NYC London)40 ms server processing time4 roundtrips, or 264 ms!Plus DNS and TLS roundtripsCongestion Avoidance and Control@igrigorik

Let's fetch a 20 KB file via a 3G / 4G link.3G (200 ms RTT)4G (100 ms RTT)(200-2500 ms)(50-100 ms)DNS lookup200 ms100 msTCP Connection200 ms100 ms(200-400 ms)(100-200 ms)200 ms100 ms800 - 4100 ms400 - 900 msControl planeTLS handshake (optional)HTTP requestTotal timex4 (slow start)One 20 KB HTTP request!Anticipate network latency overhead

Not so good news everybody! .HSPA will be the dominantnetwork type of the next decade!4G Americas - Statistics Latest HSPA releases arecomparable to LTE in performance 3G networks will be with us for atleast another decade LTE adoption in US and Canada isway ahead of the world-wide trends

tency is the bottleneck for web performance Lots of small transfers New TCP connections are expensive High latency overhead on mobile networks. in short: no, the network won't save us.Paint

Network optimization tips?Glad you asked. :-)

TCP, TLS, mobile / wireless and HTTP best practices. Optimize your TCP server stacksOptimize your TLS deploymentOptimizing for wireless networksOptimizing for HTTP 1.x quirksMigrating to HTTP 2.0XHR, SSE, WebSocket, WebRTC, .http://bit.ly/fluent-hpbn /shameless self promotion

ApplicationHTTP 1.x - 2.0TLSTCPhttp://bit.ly/io-radioupWired How Wi-Fi 3G/4G worksRadio RRC battery life optimization Data bursting, prefetchingWi-Fihttp://bit.ly/fluent-hpbnMobile2G, 3G, 4G Inefficiency of periodic transfers Intermittent connectivity .

Application Upgrade kernel: Linux 3.2 HTTP 1.x - 2.0 IW10 disable slow start after idle TCP window scalingTLSTCP Position servers closer to the user Reuse established TCP connectionsWired Compress transferred data .RadioWi-Fihttp://bit.ly/fluent-hpbnMobile2G, 3G, 4G

Application Upgrade TLS libraries Use session caching / session ticketsHTTP 1.x - 2.0 Early TLS termination (CDN) Optimize TLS record sizeTLSTCP Optimize certificate size Disable TLS compression Configure SNI supportWiredRadioWi-Fihttp://bit.ly/fluent-hpbn Use HTTP Strict Transport Security .Mobile2G, 3G, 4G

ApplicationHTTP 1.x hacks and best practices:HTTP 1.x - 2.0TLSTCP Concatenate files (CSS, JS) Sprite small images Shard assets across originsWired Minimize protocol overheadRadio Inline assets Compress (gzip) assetsWi-Fihttp://bit.ly/fluent-hpbnMobile2G, 3G, 4G Cache assets! .

ApplicationHTTP 1.x - 2.0HTTP 2.0 to the rescue!TLSTCP Undo HTTP 1.x hacks. :-) Unshard your assetsWired Leverage server push .RadioWi-Fihttp://bit.ly/fluent-hpbnMobile2G, 3G, 4G(more on this in a second)

XMLHttpRequest do's and don'tsApplication Server-Sent Events WebSocketHTTP 1.x - 2.0 WebRTC DataChannel - UDP in the hpbnMobile2G, 3G, 4G

undation of your performance strategy.Get it right!Paint

Let's (briefly) talk about HTTP 2.0Will it fix all things? No, but many.

. we’re not replacing all of HTTP — the methods, status codes, and mostof the headers you use today will be the same. Instead, we’re re-defininghow it gets used “on the wire” so it’s more efficient, and so that it ismore gentle to the Internet itself .- Mark Nottingham

HTTP 2.0 in a nutshell. High performance browser networking: HTTP 2.0New binary framingOne connection (session)Many parallel requests (streams)Header compressionStream prioritizationServer push@igrigorik

What's HTTP server push?Premise: server can push multiple resources in response to one request What if the client doesn't want the resource? Client can cancel stream if it doesn't want the resource Resource goes into browsers cache HTTP 2.0 server push does not have an application API (JavaScript)Newsflash: we are already using "server push" Today, we call it "inlining" (to be exact it's "forced push") Inlining works for unique resources, bloats pages otherwiseHigh performance browser networking: HTTP 2.0@igrigorik

How do I use HTTP 2.0 today? Use SPDY. Chrome, since forever. Chrome on Android iOSFirefox 13 Opera 12.10 Server mod spdy (Apache)nginxJetty, Nettynode-spdy.3rd parties TwitterWordpressFacebook AkamaiContendoF5 SPDY GatewayStrangeloop.All Google properties Search, GMail, DocsGAE SSL users.@igrigorik

HTTP 2.0 / SPDY FAQ Q: Do I need to modify my site to work with SPDY / HTTP 2.0?A: No. But you can optimize for it.Q: How do I optimize the code for my site or app?A: "Unshard", stop worrying about silly things (like spriting, etc).Q: Any server optimizations?A: Yes! CWND 10 Check your SSL certificate chain (length) TLS resume, terminate SSL connections closer to the user Disable TCP slow start on idleQ: Sounds complicated.A: mod spdy, nginx, GAE!@igrigorik

Measuring network performanceReal users, on real networks, with real devices.

Navigation Timing (W3C)Navigation Timing spec@igrigorik

Navigation Timing (W3C)@igrigorik

Available in. IE 9 Firefox 7 Chrome 6 Android 4.0 @igrigorik

Real User Measurement (RUM) with Google Analytics script gaq.push([' setAccount','UA-XXXX-X']);gaq.push([' setSiteSpeedSampleRate', 100]); // #protipgaq.push([' trackPageview']); /script Google Analytics Content Site Speed Automagically collects this data for you - defaults to 1% sampling rateMaximum sample is 10k visits/dayYou can set custom sampling rateYou have all the power of Google Analytics! Segments, conversion metrics, .setSiteSpeedSampleRate docs@igrigorik

Performancedata from realusers, on realnetworks@igrigorik

Full power of GA tosegment, filter,compare, .@igrigorik

Averages are misleading.Head into the Technicalreports to see the histogramsand distributions!@igrigorik

Case study: igvita.com page load timesContent Site Speed Page Timings PerformanceMigrated site to new host, server stack, web layout, and using staticgeneration. Result: noticeable shift in the user page load time distribution.Measuring Site Speed with Navigation Timing@igrigorik

Case study: igvita.com server response timesContent Site Speed Page Timings PerformanceBimodal response time distribution?Theory: user cache vs. database cache vs. full recomputeMeasuring Site Speed with Navigation Timing@igrigorik