css or javascript, possible caching issue

Beaver Builder
1

I notice on one of my newly made sites that I use BBuilder on that when I add any kind of page template, it shows the styling all wrong. It also happens when just editing some elements on a page and changing the styling of them. It’s very annoying!:

It's not supposed to look like this!

For everything to show up correctly, I have to push ctrl+f5 to make it show up correctly:

This is more like it

But once I make another page, the same issue happens again!!! Also, if I discard the current page I’m editing (after ctrl+f5 making it show up correctly) and then re-edit the page, same issue again!!

I’ve tried disabling the webhost’s caching of css files and fl_builder urls, and even flushed beaverbuilders cache a few times but nothing has worked so far!

How do we fix this?

2

Hey Carmelo,

That certainly sounds like a caching issue. Have you tried getting in touch with the hosting company to see if they have another sort of caching installed on your server? And, just to rule it out, have you tried deactivating all plugins except BB and see if you get the same issue?

Ben

3

So it ended up that my webhost uses Varnish cache in front of their shared servers(nice!) along with pagespeed (nice too!). They had a faqs section that mentions how to turn Varnish caching off for certain files. So I took that and modified it to look like this and it seems like it fixed the problem:


<FilesMatch "\.(css)">
    <IfModule mod_headers.c>
        Header set no-cache "1"
        Header set Set-Cookie "NO_CACHE=1; path=/;"
        Header set Cache-Control "max-age=2592000, public"
    </IfModule>
</FilesMatch>

It was Varnish that was the culprit but it seems to work fine now. Thanks for the help!

4

Hey Carmelo,

Glad you figured it out! And thanks for sharing the solution, we really appreciate it! Enjoy BB! :slight_smile:

Ben

5

BTW, that piece of config ‘code’ that I put above went in the .htaccess file of my shared account.

6

Thanks Carmelo for sharing, we appreciate it.

Thanks,
Danny

7

This issue has popped up again and I’m actually not sure it’s the hosting provider any more.

With the solution above, I was able to get the main website on a multisite network to work just fine with no issues. Now that I am testing subdirectory subsites, this same issue above only happens on subsites!

Constantly having to refresh with a ctrl+f5 because of stale css or js not showing for my clients is a no-go.

I’ve been working at this for days. Turning off the browser caching through the htaccess doesn’t seem to work for subsites. Nor does clearing beaverbuilders cache, that doesn’t seem to help. I’ve turned off caching of every kind that I can and still, subsites aren’t editing correctly…

Please advise…

8

[Content Hidden]

9

Hi Carmelo,

Unfortunately, I am not familiar with Vanish, but you issue does appear to be cache related. Is it possible for you to also include .js in the code you provided above and see if this resolves the issue.

Thanks,
Danny

10

Thanks for your reply Danny. Yeah, after more tests, it just seems obvious that it’s cache related but I could not figure out what was going to turn it off.

I did some experimentation and I think I might have gotten it. So far I tried (html|htm|php|css|png|jpeg|jpg|js). Apparently ModPagespeed is installed also on my webhost, and maybe it minifies js and css and automatically tells the browser to cache? I have yet to look it up…

I commented out my old code above and added in the .htaccess:

<IfModule pagespeed_module>
ModPagespeed off
</IfModule>

So far it hasn’t acted up. Do you guys know if BB plugin is compatible with ModPagespeed?

11

Hey Carmelo,

Our demo site uses ModPagespeed so there shouldn’t be any problems there. Is there a way for your hosting to turn off the server-side caching while you’re actively working on the site? Then just switch it back on once you’re ready to go live?

Ben