BrowserSync slow on MacOS? .local domain is the problem

Posts


I usually always use the same Gulp configuration for the projects I work on. My configuration (which I will explain in detail in a couple of posts) consists in minifying CSS and JS and using BrowserSync to reload the page automatically in case of changes to PHP and JS files, as well as injecting directly the CSS I edit, without reloading the page.

Very useful, but only if the style changes occur instantly, otherwise the whole system becomes just an obstacle to productivity.

This is exactly the problem I had: already the loading of the page was extremely slow, also I had to wait 5-6 seconds (or more) to see the changes to the page. At that point, it was much faster to directly reload the page saved locally, instead of using the server created by Gulp.

Why does it have to do with the .local domain?

Normally I have always used the .local domain for my projects.

Turning online in search of a solution I come across a rather strange answer on StackOverflow, where a user said he had solved the problem by changing the domain from .local to .dev.

It didn’t make sense to me, but it does.

The reason is well described in this answer on StackOverflow. Apparently “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.”

And, in fact, the delay has disappeared using a .dev domain.

The same user who explained the reason also proposed a solution to avoid the modification of the .local domain. It is simply to modify the host file, adding a localhost IPv6, like this one:

::1 project.local
127.0.0.1 project.local

Conclusions

If you have experienced speed issues with BrowserSync and are working on a .local domain, simply try changing the type of domain or adding a IPv6 localhost to your domain in the hosts file.


Photo by Gabriel Gusmao on Unsplash