How do I Throttle BrowserSync's speed?

Question

How can I configure BrowserSync (from its API) to serve up content at a slower rate?

Ideally I'd like to be able to serve only certain files at the throttled rate, so when developing, localhost/index.html loads fast and localhost/dummyData.json loads slowly, so I can effectively demo loading states while developing web apps that decouple data and presentation.

score 4 · Accepted Answer · answered Oct 18 '16 at 18:17

4

start browser-sync: browser-sync start --server --files "src/*.*"
open the browser-sync UI (e.g. http://localhost:3001/) and go to "Network Throttle"
select "Speed", then "Create Server"
Use the new server instance which is now running at the defined speed

HINT:

You can run multiple throttled server instances an the same time - eg. to simulate CDN behavior (where the fastest wins)

You can also simulate latency! Have a look at the bs-latency Plugin ...

answered Oct 18 '16 at 18:17

Jan Viehweger

522
5
19

2

if someone knows how to create throttled browser-sync instances programmatically, please let me know. – Jan Viehweger Oct 18 '16 at 18:19
I haven’t tried it myself yet so I won’t answer, but it looks like you could copy the code in https://github.com/BrowserSync/browser-sync/tree/master/packages/browser-sync-ui/lib/plugins/network-throttle to try programmatic throttling – Tigt Oct 28 '19 at 18:28

score -1 · Answer 2 · answered Dec 14 '17 at 20:06

-1

From documentation

reloadThrottle

Emit only the first event during sequential time windows of a specified duration.

Example

browserSync.init({
        reloadThrottle: 300,
        server: {
            baseDir: 'dev/'
        }
    });

answered Dec 14 '17 at 20:06

atilkan

4,527
1
30
35

How do I Throttle BrowserSync's speed?

2 Answers2