2 network tips

380 views
287 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
380
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2 network tips

  1. 1. Web Performance Network Tips Mykyta Semenistyi & Andrew Kovalenko
  2. 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. 3. Latency Ilya Grigorik: High Performance Browser Networking
  4. 4. CDNContent Delivery Network http://www.wpbeginner.com/beginners-guide/why-you-need-a-cdn-for-your-wordpress-blog-infographic/?display=wide
  5. 5. CDNadvantages 1. Minimal latency 2. Crash resistance 3. Headers reduced 4. Caching for public CDNs
  6. 6. CDNjsDelivr ● lots of libraries ● open-source, you may send pull-request ● can combine requests ● serves js and css ● wide network
  7. 7. Domain Shardingmotivation https://developers.google.com/speed/articles/web-metrics
  8. 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. 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. 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. 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. 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. 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. 14. Navigation Timing performance.timing
  15. 15. Resource Loading Strategies Lazy-loading ➔ scripts ➔ images ➔ etc. Pre-loading
  16. 16. XHR streaming var myRequest = new XMLHttpRequest(); myRequest.onreadystatechange = function(){ //myRequest.readyState } https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
  17. 17. Oboe.js
  18. 18. WebRTC Excitement ➔ Audio ➔ Video ➔ Real-time communication ➔ Peer-to-peer ➔ Custom data transfer ➔ Google, Mozilla и Opera
  19. 19. WebRTC MediaStream RTCPeerConnection RTCDataChannel acquisition of audio and video streams communication of audio and video data communication of arbitrary application data
  20. 20. WebRTC audio and video engines Ilya Grigorik: High Performance Browser Networking
  21. 21. WebRTC protocol stack Ilya Grigorik: High Performance Browser Networking
  22. 22. RTCPeerConnection API
  23. 23. WebRTC browser support scorecard http://iswebrtcreadyyet.com/
  24. 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

×