Web PerformanceNetwork Tips

Mykyta Semenistyi & Andrew Kovalenko

Table of contents

1. CDN

2. Domain Sharding

3. Cache

4. Data Formats

5. Browser Enhancements (prefetch, preload, navigation timing)

6. XHR

7. WebSockets

8. WebRTC

Latency

Ilya Grigorik: High Performance Browser Networking

CDNContent Delivery Network

http://www.wpbeginner.com/beginners-guide/why-you-need-a-cdn-for-your-wordpress-blog-infographic/?display=wide

CDNadvantages

1. Minimal latency

2. Crash resistance

3. Headers reduced

4. Caching for public CDNs

CDNjsDelivr

● lots of libraries

● open-source, you may send pull-request

● can combine requests

● serves js and css

● wide network

Domain Shardingmotivation

https://developers.google.com/speed/articles/web-metrics

Domain Shardingmotivation

<div class="row"><div id="image-1" class="image"><img src="images/1.jpg"></div><div id="image-2" class="image"><img src="images/2.jpg"></div><div id="image-3" class="image"><img src="images/3.jpg"></div>

</div><div class="row">

<div id="image-4" class="image"><img src="images/4.jpg"></div><div id="image-5" class="image"><img src="images/5.jpg"></div><div id="image-6" class="image"><img src="images/6.jpg"></div>

</div>

} 2-6 conqequent requests per

domain

<div class="row"><div id="image-7" class="image"><img src="cdn.com/images/7.jpg"></div><div id="image-8" class="image"><img rsc="cdn.com/images/8.jpg"></div><div id="image-9" class="image"><img src="cdn.com/images/9.jpg"></div>

</div>

Domain Shardingsummary

● Use only 2 domains

● IP could be the same and only CNAME should be changed

● Measure everything by yourself: don’t forget about DNS resolve and TCP slow-start

● Sharding may not be quite good for mobile

Cacheheaders

cache-control expires etag (entity-tag)

pragma vary

private, max-age=0, no-cache

Thu, 01 Dec 1983 20:00:00 GMT

User-Agent

http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/

no-cache

"123456789"W/"123456789"

Data Formats

xml json custom format<page>

<title>Title</title><id>1529</id><revision><id>4382</id><timestamp>2006-09-18T22:11:53</timestamp>

</page>

{"title": "Title","id": 1529,"revision": 4382,"timestamp":

"2006-09-18T22:11:53Z"}

Title::1529::4382::2006-09-18T22:11:53Z

New in Browsers

DNS preresolve TCP preconnect

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

Ilya Grigorik http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#predictor

New in Browsers

prerefetch

Ilya Grigorik http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#predictor

<link rel="subresource" href="/myapp.js"> <link rel="prefetch" href="/big.jpeg">

prerender<link rel="prerender" href="http://site.org/index.html">

Navigation Timing

performance.timing

Resource Loading Strategies

Lazy-loading➔ scripts

➔ images

➔ etc.

Pre-loading

XHR streaming

var myRequest = new XMLHttpRequest();

myRequest.onreadystatechange = function(){//myRequest.readyState

}

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Oboe.js

WebRTC Excitement

➔ Audio➔ Video➔ Real-time communication➔ Peer-to-peer➔ Custom data transfer➔ Google, Mozilla и Opera

WebRTC

MediaStream RTCPeerConnection RTCDataChannel

acquisition of audio and video streams

communication of audio and video data

communication of arbitrary application

data

WebRTC audio and video engines

Ilya Grigorik: High Performance Browser Networking

WebRTC protocol stack

Ilya Grigorik: High Performance Browser Networking

RTCPeerConnection API

WebRTC browser support scorecard

http://iswebrtcreadyyet.com/

WebRTC 4 Allwebrtc4all is a WebRTC extension for Safari, Firefox, Opera and IE9+

Windows XP, Vista, 7 and 8 OS X UnixSafari Yes coming soon coming soon

Firefox Yes coming soon coming soon

IE Yes coming soon coming soon

Opera Yes coming soon coming soon