1. Web Performance
Network Tips
Mykyta Semenistyi & Andrew Kovalenko

2. 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

3. Latency
Ilya Grigorik: High Performance Browser Networking

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

5. CDNadvantages
1. Minimal latency
2. Crash resistance
3. Headers reduced
4. Caching for public CDNs

6. CDNjsDelivr
● lots of libraries
● open-source, you may send pull-request
● can combine requests
● serves js and css
● wide network

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

8. 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>

9. 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

10. 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"

11. 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

12. 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

13. 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">

14. Navigation Timing
performance.timing

15. Resource Loading Strategies
Lazy-loading
➔ scripts
➔ images
➔ etc.
Pre-loading

16. XHR streaming
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function(){
//myRequest.readyState
}
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

17. Oboe.js

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

19. WebRTC
MediaStream RTCPeerConnection RTCDataChannel
acquisition of audio
and video streams
communication of
audio and video data
communication of
arbitrary application
data

20. WebRTC audio and video engines
Ilya Grigorik: High Performance Browser
Networking

21. WebRTC protocol stack
Ilya Grigorik: High Performance Browser
Networking

22. RTCPeerConnection API

23. WebRTC browser support scorecard
http://iswebrtcreadyyet.com/

24. WebRTC 4 All
webrtc4all is a WebRTC extension for Safari, Firefox, Opera and IE9+
Windows XP, Vista, 7 and 8 OS X Unix
Safari Yes coming soon coming soon
Firefox Yes coming soon coming soon
IE Yes coming soon coming soon
Opera Yes coming soon
coming soon