Browser-sync: Initial load and CSS Injections are extremely slow with Local/Pressmatic

[pyronaur]

I'm using browserSync with Local by Flywheel - and it's just killing the loading time.

My config (gulp in CoffeeScript):

    sync.init "build/directory/path/*.css",
        proxy:
            target: devsite.dev
        open: false
        port: 3002

It has something to do with the IP probably, because Local is creating it's own IP, and to use BS I have to connect to localhost:3002, not devsite.dev - but I can't figure out a way to make it work at the moment.

I just upgraded to [email protected] - still same issue

Edit:

Tried a radical attempt to fix this - still doesn't work.

Config:

gulp.task "browser-sync", ->
    sync.init "#{Config.build}/*.css",
        proxy:
            target: Config.url
        open: false
        port: 3002
        logConnections: true
        logLevel: 'debug'
        online: false
        https: false

BrowserSync Debug:

[10:35:04] Starting 'browser-sync'...
[BS] [debug] -> Starting Step: Finding an empty port
[10:35:04] Finished 'browser-sync' after 24 ms
[10:35:04] Starting 'sync'...
[BS] [debug] Found a free port: 3002
[BS] [debug] Setting Option: port - 3002
[BS] [debug] +  Step Complete: Finding an empty port
[BS] [debug] -> Starting Step: Getting an extra port for Proxy
[BS] [debug] +  Step Complete: Getting an extra port for Proxy
[BS] [debug] -> Starting Step: Checking online status
[BS] [debug] +  Step Complete: Checking online status
[BS] [debug] -> Starting Step: Resolve user plugins from options
[BS] [debug] +  Step Complete: Resolve user plugins from options
[BS] [debug] -> Starting Step: Set Urls and other options that rely on port/online status
[BS] [debug] Setting multiple Options
[BS] [debug] +  Step Complete: Set Urls and other options that rely on port/online status
[BS] [debug] -> Starting Step: Setting Internal Events
[BS] [debug] +  Step Complete: Setting Internal Events
[BS] [debug] -> Starting Step: Setting file watchers
[BS] [debug] +  Step Complete: Setting file watchers
[BS] [debug] -> Starting Step: Merging middlewares from core + plugins
[BS] [debug] Setting Option: middleware - List []
[BS] [debug] +  Step Complete: Merging middlewares from core + plugins
[BS] [debug] -> Starting Step: Starting the Server
[BS] [debug] Proxy running, proxing: http://melon.dev:80
[BS] [debug] Running mode: PROXY
[BS] [debug] +  Step Complete: Starting the Server
[BS] [debug] -> Starting Step: Starting the HTTPS Tunnel
[BS] [debug] +  Step Complete: Starting the HTTPS Tunnel
[BS] [debug] -> Starting Step: Starting the web-socket server
[BS] [debug] Setting Option: clientEvents - List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
[BS] [debug] +  Step Complete: Starting the web-socket server
[BS] [debug] -> Starting Step: Starting the UI
[BS] [debug] Setting Option: session - 1490600104252
[BS] [UI] Starting Step: Setting default plugins
[BS] [UI] Step Complete: Setting default plugins
[BS] [UI] Starting Step: Finding a free port
[BS] [UI] Step Complete: Finding a free port
[BS] [UI] Starting Step: Setting options also relevant to UI from BS
[BS] [UI] Step Complete: Setting options also relevant to UI from BS
[BS] [UI] Starting Step: Setting available URLS for UI
[BS] [debug] Getting option via path: urls
[BS] [UI] Step Complete: Setting available URLS for UI
[BS] [UI] Starting Step: Starting the Control Panel Server
[BS] [UI] Using port 3001
[BS] [UI] Step Complete: Starting the Control Panel Server
[BS] [UI] Starting Step: Add element events
[BS] [UI] Step Complete: Add element events
[BS] [UI] Starting Step: Registering default plugins
[BS] [debug] Getting option via path: urls,external
[BS] [debug] Getting option via path: urls,local
[BS] [UI] Step Complete: Registering default plugins
[BS] [UI] Starting Step: Add options setting event
[BS] [UI] Step Complete: Add options setting event
[BS] [debug] +  Step Complete: Starting the UI
[BS] [debug] -> Starting Step: Merge UI settings
[BS] [debug] Setting Option: urls - Map { "local": "http://localhost:3002", "ui": "http://localhost:3001" }
[BS] [debug] +  Step Complete: Merge UI settings
[BS] [debug] -> Starting Step: Init user plugins
[BS] [debug] Setting Option: userPlugins -
[BS] [debug] +  Step Complete: Init user plugins
[BS] Proxying: http://melon.dev:80
[BS] Access URLs:
 ----------------------------
 Local: http://localhost:3002
 ----------------------------
    UI: http://localhost:3001
 ----------------------------
[BS] Watching files...
[BS] Browser Connected: Chrome, version: 59.0.3051.3
[BS] Browser Connected: Chrome, version: 59.0.3051.3

OS X Sierra, Latest BrowserSync, Local by Flywheel 1.4.2 with Virtualbox

[dy1z]

@justnorris Had any luck with this? I'm experiencing the same issue :-|

[pyronaur]

I don't remember how I solved the issue anymore 🤔

My config for that project looks like this (pardon my coffeescript)

gulp.task "browser-sync", ->
    sync.init "/path/to/build/directory/*.css",
        proxy:
            target: "https://melon.dev"
        open: false
        port: 3002
        logLevel: 'debug'

That works fine with "browser-sync": "^2.18.12", and Local 2.0.6

[clayteller]

I just switched from DesktopServer to Local by Flywheel and BrowserSync is suddenly WAY slower refreshing my browser. I hope I can figure out how to fix it…I just spent so much time migrating all my local sites from DesktopServer to Local!

[clayteller]

Saw in another post somewhere that changing the domain from a ".local" to a ".dev" fixes the Local by Flywheel slowness issue and it did. Don't know why it fixes it, but that was the solution for me.

[cstielper]

Just tried out Flywheel for the first time this morning as my MAMP install died a slow death. Had the same problem with BrowserSync in my Gulp workflow and changing the domain name fixed the problem for me as well.

[raik]

I can confirm that using the default .local tld will make BrowserSync unusable with Local by Flywheel (GUI for WordPress centric Docker conf). Using BrowserSync CLI. Checked .dev and .localhost which worked fine. Don't really know on which side the problem exists.

[sethstha]

I have another solution. If you enable IPv6 Lookup from preference -> advanced, It resolves the problem.

[akkolad]

Thanks a lot @sethstha !

[jobsturm]

How do I do this @sethstha ?

[akkolad]

@jobsturm Go on the menu of the top bar of your screen "Local by Flywheel" > preferences > advanced > enable IPv6 , or the same with the shortcut "⌘,"

[davidosullivanco]

I have another solution. If you enable IPv6 Lookup from preference -> advanced, It resolves the problem.

Thank you @sethstha!