Web Performance Part 2 "Network tips"


Published on

The presentation is devoted to network and tips of improving Web Performance. Further presentations will dwell on more practical aspects of web applications performance improvement. All 4 presentations will help you reduce latency, enrich optimization of javascript code, discover tricky parts when working with API browser, see best practices of networking and learn lots of other important and interesting things. Enjoy! =)

Published in: Software
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Performance Part 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