CSS file reload lagging in PW

[kathep]

Hey all

I have a frustrating issue with lagging display of css changes in my PW install. 

When I change code in main.css and upload the file via FTP, sometimes the css styles are updated in the browser display, and sometimes not. It takes about 10 times of uploading main.css for the browser display to reliably change to reflect the changed css styles.

Steps taken each time:

• css file is opened
• css code is changed 
• the css file saved locally
• the css file has uploaded via FTP correctly
• refreshed PW site in the browser
  • if changes showed, breathe sigh of relief
  • if no changes shown, upload via FTP again
  • refreshed PW site in browser
  • ** repeat indefinitely **

This is happens in multiple browsers (Chrome & Firefox, latest versions), including:

• when caching is turned off in the browser
• when all browsing history is cleared
• when PW site is re-opened in a browser it has never been viewed on before

I have only ever experienced this mysterious refresh behavior specifically with the CSS file in PW. All other files in PW refresh fine, and I have never had this refresh problem with a CSS file on another site. However, I have never worked with css on a PHP based site, so I'm wondering if this is the issue.

I have tried changing the code calling the css in _main.php from the default:

	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

to the following (based on this advice on stackoverflow, when I thought it could be a Chrome issue):

Attempt 1

• 	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css?v={random number/string}" />
  

Attempt 2

	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css?v=<?=time();?>" />

Nothing worked.

Is there something about how PHP or PW handles CSS files that I don't know?

Some internal caching of css in PW that I need to reset?

One option to resolve this is to use @nico's Template File Editor module to make changes to the files live. Because i am old school, I really don't want to do that. I really prefer to edit files locally and upload them.

Any suggestions to this css refresh problem, pro PW users?

[LostKobrakai]

ProcessWire doesn't even touch your css file. It handles only the part of generating the html. The css file is direcly loaded as file. The .htaccess file contains the rule to forward all real files directly (css/js/images), while everything else is taken to ProcessWire itself. #

Do you have any caching enabled in the .htaccess file? I can't image anything else, after all the things you already checked. Or did you check if the upload does work as expected? Maybe there are some issues in uploading/overriding the old css file on the server.

[kathep]

Thanks for the quick suggestion, @LostKobrakai .

Yes, it could be something to do with the .htaccess file. 

With my current (small) amount of knowledge, I'm scared to touch the .htaccess file right now. But I'll do some googling and try to prepare myself to tackle it.

Or did you check if the upload does work as expected? Maybe there are some issues in uploading/overriding the old css file on the server.

This is something else I may need to check. It seems unlikely though, as this server (I'm using siteground.com) hasn't had any issues with the many css file uploads I've done on it before.

Thanks again!

If anyone else has further suggestions on how to tackle potential caching issue in htaccess, please let me know.

[LostKobrakai]

If you're using the standart .htaccess which ships with processwire then there should be nothing which affects the behaviour your getting. Regarding the ftp issues, just take a look at the changing date of the online file, it should change after the upload is done. Another way would be downloading the css file after the upload and compare. 

This shouldn't take long to test, but rules out errors there. 

[pwired]

I see no need to follow those stack overflow tricks calling the css. The processwire examples always work for me:

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

Looks to me like a temporary lag in the traffic between your host and your computer,

or even more likely, a background process on your computer or a script in your browser consuming all resources.

Next time this happens open taskmanager and check cpu usage. Normal usage varies between 0 and 5 %

Having a lot of programs running simultaneously cpu usage goes up. Usually it reaches 90 or 100 %

when a background process in the os or a script in the browser doesn't end or close correctly and you

will run into typical problems as you described.

Are you developing or maintaining websites online ? What computer, mac or win ?

Using a wamp server (win) or a mamp (mac) locally on your computer and develop or maintain

from there makes things more easy. No need for ftp all the time. Also having a local copy

of your website is a good way of having a backup.

[LostKobrakai]

@pwired I think it's not about lag in terms of "a lagging computer" but in terms of "my browser recognises my newly uploaded css file and the changes in it". 

[kathep]

Thanks @LostKobrakai and @pwired. You have given me some good ideas.

I see no need to follow those stack overflow tricks calling the css. The processwire examples always work for me:

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

Ok, good to know 

Are you developing or maintaining websites online ? What computer, mac or win ?

Using a wamp server (win) or a mamp (mac) locally on your computer and develop or maintain

from there makes things more easy. No need for ftp all the time.

Yeah, I'm developing a website that is hosted at siteground.com, and working on it remotely on a MacBook Air (10.9.3).

I prefer to work online rather than using mamp, partly because I get to observe how 'heavy' my site is as I build. I've had the unfortunate experience of building a website using mamp that was way too heavy - despite all the usual optimization tricks. I don't want to repeat that. 

I actually like the version control FTP gives me (when it works).

@pwired I think it's not about lag in terms of "a lagging computer" but in terms of "my browser recognises my newly uploaded css file and the changes in it". 

Actually, its more about 'my FTP client tells me my remote css file has successfully been updated, but no browser displays that it is up-to-date'. I have noticed the website is also drawing from the out of date css file on browsers on my phone.

LostKobrakai, said: 

Regarding the ftp issues, just take a look at the changing date of the online file, it should change after the upload is done. Another way would be downloading the css file after the upload and compare.

Yes! This test solved the mystery. It turns out the culprit is my FTP client (I'm using Transmit). It displays a successful upload and a 'date modified' time that is current (on the remote server) for an old version of the main.css file. Grr. Will use a different FTP client and that *should* fix it.

This turns out not to be a PW question at all, but I at least hope it will help another noob another day.

[horst]

@kathep: I like working with a editor / IDE that supports remote file editing (it is done via FTP behind the scenes). For me this is the most comfortable way, I really like it.

Maybe your editor of choice has this too? Or can be extended somehow? Or another way could be to use a system software / protocol that lets you "hang in" remote directories into your filesystem. This way you can open any remote file with any software, also if the software doesn't support opening remote files by it self.

[Macrura]

but you can live edit in transmit, just setup your preferred editor in prefs; i've never had an issue, and transmit is a good ftp client

[adrian]

I am a big fan of Forklift for remote editing (although I am sure many others work well). The great thing about Forklift is that it is a full dual pane Finder replacement. I honestly couldn't survive without it. Finder really is horrible

http://www.binarynights.com/forklift/

[Macrura]

yeah, forklift is indispensable for mac.. i almost always have forklift, transmit and coda open at once.

[kathep]

@kathep: I like working with a editor / IDE that supports remote file editing (it is done via FTP behind the scenes). 

OMG, mind blown! I love this idea.

but you can live edit in transmit, just setup your preferred editor in prefs; i've never had an issue, and transmit is a good ftp client

Mind blow again!! This is so awesome. I am off to change my prefs...

[kathep]

yeah, forklift is indispensable for mac.. i almost always have forklift, transmit and coda open at once.

Good to know. I haven't heard of forklift before. I'll check it out. 

Thanks @adrian and @macrura for the forklift tip.

[kathep]

Nerdy fun fact update: 

I've discovered there's a two minute lag between when my sitehost registers main.css as being updated, and when the changes are visible in a browser on multiple devices. I didn't know such a lag could be possible, but now I do.

How did I find this out, you ask? By live updating my main.css as suggested above, refreshing the online file viewer provided by my site host, then refreshing various browsers repeatedly to find the soonest possible time that the changes are visible.

[pwired]

Such a lag on the hosting side is not normal. I often work outdoors with a simple internet dongle

and my html/css/js updates are done in seconds. Same on all the other hosters I worked with so far.

Should check your ftp tool / internet connection / hoster. Personally I edit online with winscp,

works like a charm, and within seconds.

[LostKobrakai]

I would also suggest you talk to your hoster as my impression of transmit as a ftp tool is also top notch. 

[kathep]

Such a lag on the hosting side is not normal. I often work outdoors with a simple internet dongle

and my html/css/js updates are done in seconds. Same on all the other hosters I worked with so far.

Should check your ftp tool / internet connection / hoster. Personally I edit online with winscp,

works like a charm, and within seconds.

Ok, thanks for confirmation! It seems strange to me, but then I know very little about server performance.

I would also suggest you talk to your hoster as my impression of transmit as a ftp tool is also top notch. 

Also good to have confirmation of Transmit's robustness. I really like it in general. I'll get on to my site host and see if there is something that can be done.