Browser Networking
The Olden Web
The Current Web
Network performance is now the dev's responsibility
3 Ways to be Awesome
3 Ways to be Awesome
1. Make fewer requests
3 Ways to be Awesome
1. Make fewer requests
2. Make smaller requests
3 Ways to be Awesome
1. Make fewer requests
2. Make smaller requests
3. Spread out requests
1. Make Fewer Requests
- Inline small resources
GET /records?ids=1&ids=3&ids=5&ids=7
{
data: [
{
id: 1,
name: 'One',
// ...
},
{
id: 3,
name: 'Three',
// ...
},
{
id: 5,
name: 'Five',
// ...
},
{
id: 7,
name: 'Seven',
// ...
},
]
}- Coalesce find requests
- ReadableStreams, Server-sent Events, & http/2
2. Make Smaller Requests
- Cache in memory
- WebSockets & http/2
Ilya Grigorik, High Performance Browser Networking
WebSocket Frame Structure
http/2 Response Structure
3. Spread Out Requests
- Defer until interaction
- Code splitting
https://github.com/mrmarkfrench/country-select-js
https://github.com/jamiebuilds/react-loadable
https://hpbn.co/
What about poor network conditions?
Mobile network speeds
512Kb of data transferred over one connection
Network Congestion
Symptoms include jittery latency and excessive packet loss
Option #1: Extreme inlining
Option #2: Extreme caching
Option #3: Extreme simplicity
https://danluu.com/web-bloat/
How do we provide the best experience for everyone?
Network Information API
let autoStream = true;
var connection = navigator.connection;
if (connection && connection.downlink < 3) {
autoStream = false;
}Currently still a draft: http://wicg.github.io/netinfo/