2 network tips
DESCRIPTION
TRANSCRIPT
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