How to fix slow BrowserSync

Categories: General

I have been using Webpack with my WordPress development now fo a few years and implemented it using Laravel Mix. You can read more about that here. But more recently I have started using BrowserSync, mostly because I was working on a front end heavy site and was doing a lot more incremental changes to the SCSS.

But off the start, I noticed that the reload speeds were terrible. Far slower than manually refreshing the browser.

Previously I would have used a .dev domain name, but Google was nice enough to force HTTPS on those gTLD’s so I wad forced like many to pick a new local gTLD or generic top-level domain. Some common choices were .site or .test but I went with .local never really thinking much of the implications.

When looking into why my page reloaded so slowly ( even without using Browsersync it was very slow ) I noticed that I was using IP6, which I think was a fix for previous versions of macOS and local domains. macOS for whatever reason has some very poor DNS resolution for a .local, oddly enough any alternative choice was fast like .wp or .site.

Anyways, After a quick sanity check, I ran the following curl command time curl -I http://site.local/ > /dev/null Which resulted in 6 seconds.

After adding as well, and before the IP6 entry the time was drastically reduced to 0.7 seconds!       site.local
::1             site.local

The best thing about this fix is that there is no need to adjust your webpack config 🙂

Adam Patterson

Adam Patterson

User Interface Designer & Developer with a background in UX. I have spent 5 years as a professionally certified bicycle mechanic and ride year-round.

I am a husband and father of two, I enjoy photography, music, movies, coffee, and good food.

You can find me on Twitter, Instagram, and YouTube!