Live Reload Slowness / Delay

I’m on a Windows system and when I have livereload enabled via grunt watch it works, but it’s god awful slow. My current workflow is edit the LESS files, save, wait 3-4 seconds for Grunt to do it’s magic and then watch the browser reload. I see a FOUC and then the site. So around 6-10 seconds for each edit. Seldom, it seems my PC works properly and it reloads quickly, in under a second and with no FOUC. Then it seems to bog down and go slow after a few reloads. This is very frustrating… I’m trying to get faster and more effecient using LESS and Grunt. Right now it seems I was much faster doing plain vanilla CSS.

Has anyone had this issue? And if so, how did you fix it? Does livereload perform much faster on Mac/Linux? I’m trying to ‘see the light’ with LESS/Grunt but it’s been frustrating. Any help or insight is appreciated.

Can’t say I’ve seen anything like that in Linux. I would ask what your computer specs are, but I’m not sure if that’s your issue…

When you run grunt watch, I assume it’s from the command line. Do you see the output as it works? Also, what browser are you using? I Dev in Chrome and live reload seems to be pretty quick

It’s not the computer. It’s pretty fast. It’s around 2-3 seconds for grunt to run all the tasks and then 2-3 seconds for Chrome to reload. I see a FOUC and then the site loads. Is this normal times?

Nope not at all. Compile times, might be correct, but I think my computer compiles in Linux in 1-2 seconds. But the page should refresh almost instantaneously.

Again, does your command line show what’s happening? And what browser are you running?

I’ve noticed this as well… but a small percentage of the time it doesn’t happen. Comparing the grunt watch output, when I get a good quick reload without the FOUC it lists just the reload for main.min.css, and not both main.min.css and scripts.min.js.

... Reload assets/css/main.min.css ...

vs.

... Reload assets/js/scripts.min.js ...
... Reload assets/css/main.min.css ...

Seems like a simple solution is to remove the JS tasks when mostly focusing on CSS updates.

ISSUE #1

I have the exact same issue on Mac (kinda slow, 4-5s to compile and refresh + FOUC). Did you find anything helpful regarding that issue? The FOUC thing is annoying and it is systematic.

ISSUE #2

Also, once the watch task is running, as long as I only edit the .less files and switch to my browser window to see the result, grunt will compile the less to css and then “INJECT” the css into the HTML (=no page reload), which is pretty cool and super fast. Then, as soon as I edit a PHP or JS file, it’ll take a page reload which is normal. BUT… after that it will always reload the page, no more “injection”, even though I only edit .less files again (and no .php or .js). The only solution I found to get back to the “css injection without page reload” was to stop the watch task and restart it. WOULD YOU KNOW ABOUT ANOTHER WAY TO ACHIEVE THIS?

Thanks for help, community.

Oh, wow. Getting terrible results with Grunt here aswell…

Just running the basic grunt watch with these results:

Waiting...OK
>> File "assets/less/app.less" changed.

Running "less:dist" (less) task
File assets/css/main.min.css created.

Running "version" task
Versioning assets/css/main.min.css...OK
Versioning assets/js/scripts.min.js...OK
"lib/scripts.php" updated with new CSS/JS versions.

Done, without errors.
Completed in 7.714s at Thu Mar 27 2014 22:26:31 GMT+0000 (UTC) - Waiting...

This is inside a VM, so I went and upped ram to 2GB and allowed usage of 4 cores and got this:

Running "watch" task
Waiting...OK
>> File "assets/less/app.less" changed.

Running "less:dist" (less) task
File assets/css/main.min.css created.

Running "version" task
Versioning assets/css/main.min.css...OK
Versioning assets/js/scripts.min.js...OK
"lib/scripts.php" updated with new CSS/JS versions.

Done, without errors.
Completed in 40.480s at Thu Mar 27 2014 22:33:11 GMT+0000 (UTC) - Waiting...

Not sure if I should laugh or cry :frowning:

If you’re using Vagrant and on an OS X host, try using NFS for the synced folders: https://docs.vagrantup.com/v2/synced-folders/nfs.html

Performance should be better!

1 Like

Right you are, it cut the loading down to 2s. Is this what I should be looking at?
I turned the VM spec down to 512MB and 1 core again (for some reason the fans of my MPB started to throttle when I changed the spec and got the 40s load time).

Even locally on a beast of a machine I get around 2s so I doubt you’ll ever get much less than that (although I haven’t actively tried to improve it).

Couple more things you can try: https://github.com/gruntjs/grunt-contrib-watch#why-is-the-watch-devouring-all-my-memorycpu

And you can see timing breakdowns with https://github.com/sindresorhus/time-grunt

1 Like

For strictly css this is the fastest liveReload tool I have used fwiw.

http://livereload.com/

I usually disable grunt / sass when working with roots based sites