BrowserSync extremely slow

Question

I would love to use BrowserSync for development. However, page loading (not only reloading after changes) is extremely slow.

I use the proxy mode. Browsing the page without BrowserSync is fast as it should be.

One reason may be the following error when I install BrowserSync:

> [email protected] install /usr/local/lib/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/bufferutil.node
SOLINK_MODULE(target) Release/bufferutil.node: Finished
CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node
SOLINK_MODULE(target) Release/validation.node: Finished

I installed node from scratch (using brew and the package installer), but couldn't get rid of the error.

Furthermore, it doesn't make a difference if BrowserSync is run using Gulp or over the command line.

Any idea?

Benediction

Answer 1

The solution is quite simple - but illogical imho. I had my local instance running under http://project.local. Changing it to http://project.dev solved the issue. I'm running OS X.

Benediction

Works. But... but... why? – Cattegat

:-) If you are running OS X as well, I guess it has something to do with DNS lookups (Bonjour is using the .local domain as well). – Benediction

Had the same issue on Linux Ubuntu 14 and changing my URL from 'local.domain.co.uk' to 'domain.dev' worked perfectly! So thank you as never would of solved it otherwise. – Vixen

This works on Ubuntu 14.10. An explanation as to why a .com slows browserSync down would be nice though. – Suspensor

Really insane! I'm on Linux Mint 17.3 and loading a page persisted failing on „Maximum execution time exceeded.“ Based on your tips I changed simply localhost:3000 to 127.0.0.1:3000 in the address bar and problem solved. Endless loading was limited to Chrome only, by the way, even with all extensions turned off. – Proximal

Freaking important for everyone on macOS – Decomposition

This is madness, same here, I changed from .local to .dev and it works perfect, I am on a Mac – Euphonic

Note that .dev in Chrome nowadays forces a redirect to https, which I don't want locally. Forces me to use .test now. – Communion

See the solution below. It's basically special lookups on that domain which require the extra hosts entry to pre-resolve. ::1 – Stamey

Answer 2

What you experience is most likely the result of Bonjour IPv6 lookups being issued for DNS lookups on .local domains. These IPv6 lookups create a timeout delay until the original IPv4 DNS lookup is issued.

The solution of @RicoLeuthold works, because .dev domains do not trigger Bonjour lookups on macOS. But it can be terrible to change all your vHosts if you already have many of them running on .local domains with projects configured to use these .local domains too.

ALTERNATIVE SOLUTION

An alternative is to add an additional IPv6 localhost entry in your hosts file (on Linux: /etc/hosts, on macOS usually: /private/etc/hosts) for each IPv4 .local entry.

Change this hosts content...

127.0.0.1   phpmyadmin.local
127.0.0.1   project1.local
127.0.0.1   project2.local

...to that hosts content...

::1 phpmyadmin.local
127.0.0.1   phpmyadmin.local
::1 project1.local
127.0.0.1   project1.local
::1 project2.local
127.0.0.1   project2.local

  
TIP: USE A REGEXP EDITOR

If you are using an editor like Atom or Sublime Text capable of regexp search/replace, here is a pattern to update your hosts file:

Search:
(127.0.0.1)(.*)$
Replace:
::1$2\n$1$2

This pattern will also add IPv6 entries to the general IPv4 localhost entry at the top of the hosts file. After doing the search/replace you should check the top of your file for a duplicate entry of...

::1  localhost

... and remove one of the duplicates.

Cahn

Oh wow! This just blew my mind. It's SOOO much faster now! I was wondering why when I came home to work it was slower than the network at my work. You just saved me! Thanks! – Duval

Boom. That's a hell of a tip. – Helio

@Cahn Thank you so much - I was seeing delays of up to 20s on every refresh, no it's almost instant! This is going to be a great time-saver for me :-) THIS should be the accepted answer! – Proportioned

Blazing fast. Works like a charm when using BrowserSync + HTTPS. – Midland

Thank you so much for the explanation! It is good to know why something is taking so long. While accepted answer may have solved it, you have demystified it for us. I've learnt a valuable lesson about possible causes of slowness w.r.t. web/dev servers! – Slapjack

Answer 3

In my case I was using windows. After analyzing network tab on firebug I noticed few images were missing. As soon as I fixed images it worked fast!

Quagmire

Answer 4

I have tried something else and did worked for me very well.

I have disabled IPv6 on my mac with the following command:

networksetup -setv6off Wi-Fi

You can switch it back on like this:

networksetup -setv6automatic Wi-Fi

I did not wanted to switch to .dev because all my sites are set up more like this:

Live site: https://www.myawesomesite.com
Local site: https://dev.myawesomesite.com

Gavelkind