Your SlideShare is downloading. ×
0
Web Performance
Network Tips
Mykyta Semenistyi & Andrew Kovalenko
Table of contents
1. CDN
2. Domain Sharding
3. Cache
4. Data Formats
5. Browser Enhancements (prefetch, preload, navigatio...
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-infograph...
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...
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-...
Domain Shardingsummary
● Use only 2 domains
● IP could be the same and only CNAME should be changed
● Measure everything b...
Cacheheaders
cache-control expires etag (entity-
tag)
pragma vary
private, max-age=0,
no-cache
Thu, 01 Dec 1983 20:
00:00 ...
Data Formats
xml json custom format
<page>
<title>Title</title>
<id>1529</id>
<revision>
<id>4382</id>
<timestamp>2006-09-...
New in Browsers
DNS preresolve TCP preconnect
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
Ilya Grigorik h...
New in Browsers
prerefetch
Ilya Grigorik http://www.igvita.com/posa/high-performance-networking-in-google-chrome/#predicto...
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
}
ht...
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 vide...
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 All
webrtc4all is a WebRTC extension for Safari, Firefox, Opera and IE9+
Windows XP, Vista, 7 and 8 OS X Unix
Saf...
Upcoming SlideShare
Loading in...5
×

Web Performance Part 2 "Network tips"

423

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
423
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×