Browser-sync: Very slow page (re-)load/injection on localhost:3000 TTFB of around 5s

[flurinduerst]

Issue details

When accessing localhost:3000 it takes around 5s to load the page. This means that every time I save changes to (for example) my .scss files, it takes 5s until I see the changes in the browser. Watching the network tab, I can see that there's a TTFB of around 5s. When accessing my local domain wpdev.local the page takes the assumed 0.3s to load.
The problem only occurs when accessing localhost:3000

Network Tab Screenshot: https://imgur.com/a/7LPDS

• I tested older installations of my local environment running browsersync, they still run without a problem.
• there's not much css/javascript/images to compile in this case. I also ran tests with only 5 lines of css code.

Steps to reproduce/test case

Setting up a local environment using scotchbox (vagrant/virtualbox) with the WPSeed WordPress starter theme.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.18.13 ]
• Node [ 5.3.0 ]
• Npm [ 8.2.1 ]

Affected platforms

• [ ] linux
• [ ] windows
• [x] OS X
• [ ] freebsd
• [ ] solaris
• [ ] other _(please specify which)_

Browsersync use-case

• [ ] API
• [x] Gulp
• [ ] Grunt
• [ ] CLI

gulp-output at CLI

Starting 'clean'...
Starting 'css'...
Starting 'javascript'...
Starting 'images'...
Finished 'clean' after 52 ms
Finished 'css' after 1.29 s
Finished 'javascript' after 1.28 s
gulp-imagemin: Minified 2 images (saved 24.1 kB - 1.3%)
Finished 'images' after 2.38 s
Starting 'default'...
Finished 'default' after 75 μs
Using gulpfile ~/Code/webdev/public/wp-content/themes/lbb/gulpfile.js
Starting 'browsersync'...
Finished 'browsersync' after 15 ms
Starting 'watch'...
Finished 'watch' after 23 ms
[Browsersync] Proxying: http://webdev.local
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.33.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.33.10:3001
 --------------------------------------
Starting 'css'...
[Browsersync] 1 file changed (style.min.css)
Finished 'css' after 509 ms
Starting 'css'...
[Browsersync] 1 file changed (style.min.css)
Finished 'css' after 224 ms

gulpfile.js

/*
 * GULP CONFIG
 *
 * Desciption:  Clean gulpfile for web development workflow with browsersync, compiling/optimization of sass, javascript and images from assets to dist
 * Usage:       gulp (to run the whole process), gulp watch (to watch for changes and compile if anything was modified)
 *
 * Author:      Flurin Dürst (https://flurinduerst.ch)
 *
 * Version:     1.3.1
 *
*/


/* SETTINGS
/===================================================== */
var browsersync_proxy = "webdev.local";


/* DEPENDENCIES
/===================================================== */
// general
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require("gulp-rename");
// css
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
// js
var uglify = require('gulp-uglify');
// images
var imagemin = require('gulp-imagemin');
// error handling with notify & plumber
var notify = require("gulp-notify");
var plumber = require('gulp-plumber');
// watch
var watch = require('gulp-watch');
// delete
// var del = require('del');


/* TASKS
/===================================================== */

/* BROWSERSYNC
/------------------------*/
// initialize Browser Sync
gulp.task('browsersync', function() {
  browserSync.init({
    proxy: browsersync_proxy,
    notify: false,
    open: false,
    online: true,
    host: "192.168.33.10",
    snippetOptions: {
      whitelist: ['/wp-admin/admin-ajax.php'],
      blacklist: ['/wp-admin/**']
    }
  });
});

/* CSS
/------------------------*/
// from:    assets/styles/main.css
// actions: compile, minify, prefix, rename
// to:      dist/style.min.css
gulp.task('css', function() {
  gulp.src('assets/styles/main.scss')
  .pipe(plumber({errorHandler: notify.onError("<%= error.message %>")}))
  .pipe(sass())
  .pipe(autoprefixer('last 2 version', { cascade: false }))
  .pipe(cleanCSS())
  .pipe(rename('dist/style.min.css'))
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream());
});

/* JAVASCRIPT
/------------------------*/
// from:    assets/scripts/
// actions: concatinate, minify, rename
// to:      dist/script.min.css
gulp.task('javascript', function() {
  gulp.src('assets/scripts/*.js')
  .pipe(plumber({errorHandler: notify.onError("<%= error.message %>")}))
  .pipe(concat('script.min.js'))
  .pipe(uglify())
  .pipe(rename('dist/script.min.js'))
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream());
});

/* IMAGES
/------------------------*/
// from:    assets/images/
// actions: minify
// to:      dist/images
gulp.task('images',  function() {
  gulp.src('assets/images/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.stream());
});

/* CLEAN
/------------------------*/
// empty dist folder
gulp.task('clean', require('del').bind(null, ['dist/*']));

/* WATCH
/------------------------*/
// watch for modifications in
// styles, scripts, images, php files, html files
gulp.task('watch',  ['browsersync'], function() {
  gulp.watch('assets/styles/*.scss', ['css']);
  gulp.watch('assets/scripts/*.js', ['javascript']);
  gulp.watch('assets/images/*.*', ['images']);
  gulp.watch('*.php', browserSync.reload);
  gulp.watch('*.html', browserSync.reload);
});

/* DEFAULT
/------------------------*/
// default gulp tasks executed with `gulp`
gulp.task('default', ['clean', 'css', 'javascript', 'images']);

````

### package.json

{
"name": "fd.gulp",
"description": "modules for webdev workflow",
"author": "flurinduerst",
"devDependencies": {
"browser-sync": "^2.18.13",
"del": "^3.0.0",
"gulp": "^3.8.6",
"gulp-autoprefixer": "^4.0.0",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^3.4.0",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.11"
}
}

### hostsfile

SYSTEM DEFAULT

#

127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost

VAGRANT HOSTSUPDATER

#

192.168.33.10 webdev.local # VAGRANT: 607d2454f453f628071f742fbf1a0782 $
```

[OddEssay]

I'm seeing exactly the same issue - I can work around it for css and js by skipping the proxy with the serverStatic option:

gulp.task('browser-sync', ['sass'], function() {
      browserSync.init({
       proxy: "http://myserver.local",                                                                       
       serveStatic: [{
         route: ['/_production'],
         dir: '_production'
         }],
      }); 
  });

But when I change page, there's a consistent 5 second latency on each request. Tested on two different machines.

[flurinduerst]

Found out it only affects the .local domain. Changing it (to .vm in my case, others work as well) fixed it.

[marcelo2605]

Replacing .local by .vm solved my problem too.

[axeloz]

Awesome! That did the trick although I'm not sure I understand why !!!

[zArubaru]

*.local seems to be shared with Bonjour on Macs, which leads to the experienced slowness (on OSX at least).

[AshantiCode]

Yes, also worked for me. I was working an a WordPress Theme. On Local FlyWheel I had to change the Site Domain from _Mysite.local_ to _Mysite.vm_. And also had to change in my settings.js in my theme folder to this :
exports.urlToPreview = 'http://Mysite.vm/';
Thanks a lot, reloading from 6-7 sec into very fast!