How to force users cache to reset when coming to my website?

HTML & CSS
1

I hired a developer to modify my websites header and navigation. I found out that it has caused returned customers to see some of my website as weird looking. We are not a website that has thousands of returning visitors but I do get a few. I would like for them to see the newest version of the website without a problem.

Is there a way to show the newest version of the CSS? I read something about cache busting. Something about adding a version to the CSS.

I do not do a lot of coding. I am unsure if the developer knew this would happen. Do I need to edit a string in my frame and add 1.1 or something to something to make this work?

2

The easiest way to get browsers to get a clean copy of the CSS is to add a query string, viz

<link rel="stylesheet" href="css/styles.css?1">

2 Likes
3

Just add that within the frame? My frame has this up top where that is normally:

<!doctype html>

[TITLE] [META]
4

What do you mean by “frame”?
The link to your CSS should be in the head of the document.
You can manually add a version like shown above.

I automate this with PHP getting the last modified date and adding that to the link as a paramter.

$csstime = date ("Y-m-d\TH-i", filemtime($_SERVER["DOCUMENT_ROOT"] . '/assets/css/style.css')); // when the css file was modified

Then:-

<link rel="stylesheet" href="assets/css/style.css<?='?'.$csstime ?>">

Which results in:-

<link rel="stylesheet" href="assets/css/style.css?2019-03-04T12-38">

So if the file hasnt changed since the last visit they get a cached version, if it does change they get the latest.

1 Like
5

We use a platform called 3dcart. It has the files of the website broken up to be easily edited. The Frame is the outline of the site. You then have code for categories and the like.

I have no idea how to use PHP yet. I hired the developer and did not know this was going on or that some browsers would hang onto cache for so long. One customer told me the site looked odd since Friday(the day we made some changes). Sales have kept coming in but I know what the site looks like to some with the funky header.

Do I need to change my CSS link or add in that one? I can’t seem to find one that matches the link pointed to above in my HTML.

I have this in my frame/head:

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta name="msvalidate.01" content="8154FB060D53B141AB65C15EFE5B87BB" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--[if ie]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>[TITLE]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes" /> [META]
    <script type="text/javascript" src="assets/templates/[template]/js/modernizr.min.js"></script>
    <script type="text/javascript" src="assets/templates/[template]/js/utilities.js"></script>
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,500italic,400italic,700italic&subset=latin,vietnamese,greek,greek-ext,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400italic,700italic&subset=latin,vietnamese,greek-ext,greek,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/templates/[template]/css/animate.css" type="text/css" media="screen" />
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="assets/templates/[template]/css/bootstrap.min.css" type="text/css" media="screen" />
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/templates/[template]/quicksearch/quicksearch.css" type="text/css" media="screen" />
    <!-- jQuery MagnificPopup CSS -->
    <link rel="stylesheet" href="assets/templates/[template]/css/magnific-popup.css" type="text/css" media="screen" />
    <!-- jQuery OwlCarousel CSS-->
    <link rel="stylesheet" href="assets/templates/[template]/css/owl.carousel.min.css" type="text/css" media="screen" />
    <!-- jquery.mCustomScrollbar.min-->
    <link rel="stylesheet" href="assets/templates/[template]/css/jquery.mCustomScrollbar.min.css" type="text/css" media="screen" />
    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/templates/[template]/css/[stylesheet]" type="text/css" media="screen" />
    <link rel="stylesheet" href="assets/templates/[template]/css/responsive.css" type="text/css" media="screen" />
    <!--START: FRAME_RSSFEEDS -->
    <link rel="alternate" type="application/rss+xml" title="Featured Items (RSS 2.0)" href="[store_url]/rss.asp?type=home" />
    <link rel="alternate" type="application/rss+xml" title="Products On Sale (RSS 2.0)" href="[store_url]/rss.asp?type=onsale" />
    <link rel="alternate" type="application/rss+xml" title="New Releases (RSS 2.0)" href="[store_url]/rss.asp?type=newreleases" />
    <link rel="alternate" type="application/rss+xml" title="Best Sellers (RSS 2.0)" href="[store_url]/rss.asp?type=bestsellers" />
    <link rel="alternate" type="application/rss+xml" title="Latest Blog Posts (RSS 2.0)" href="[store_url]/rss.asp?type=blog" />
    <!--END: FRAME_RSSFEEDS -->
    <script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write("<script type=\"text/javascript\" src=\"/assets/templates/common-html5/js/jquery.min.js\"></" + "script>");
    }
    </script>
    <link href="/assets/templates/[template]/css/quick_view.css" rel="stylesheet" type="text/css" />
</head>
6

Hi,
caching is server-y stuff. Your hosting server sends out response headers which can say things like telling the browser whether or not to cache things, if so for how long, is there an expiry date on that, and cookie stuff.

I see you’ve got the following heading:
Cache-Control: private

This tells proxies not to cache, but doesn’t say anything to the browser about not caching. Most browsers want to cache if they can, and it looks like your page isn’t giving them any guidance.

You could instead set that heading to
Cache-control: no-store, no-cache, private

(I have no idea if you use proxies so I’m assuming you want to keep “private”)

Thing is, you probably want people to cache stuff most of the time, just not when you get some developer to make a major change. So Sam didn’t say anything about changing your HTTP headings, and now that I’ve had some coffee I think Sam’s is the better approach and you should leave your headings as they are, but I wanted you to know it’s a thing.

What Sam’s suggesting is sometimes called fingerprinting-- the name of your CSS and/or JS files get some extra blah-blah-blah tacked onto the end of their names, which does nothing more than make the browser think it’s seeing a brand-new file (well, I guess it is, lol).

Since you’re using Wordpress and are not yourself a developer, apparently in teh wordpress world everything and I mean EVERYTHING can be done with a plugin.

Someone made a plugin that can do this fingerprinting for you, called “Busted” (for cache-busting). https://technumero.com/css-changes-not-showing-up-in-wordpress-cache-busting-css/

But in the meantime, you’d have to know which CSS files and any other files your developer edited, since I’m assuming that if you added the Busted plugin, it would start out with no fingerprinting as all your files right now would be fresh to it (who knows, maybe it has an option to go ahead and change the names of your files anyway).

2 Likes
7

From a quick search it seems 3dcart is built on .NET so doesn’t use PHP. That was just an example of how I have automated cache control on a PHP based site. I can be done manually as shown.

There are a few style sheets in there, a lot look like they belong to various plug-ins.
Find the link for the CSS you edited that is giving you the problem and try adding a variable manually to the URL to start with.

8

3dcart is like wordpress but does not have a plugin to modify cache times.

I called support and the support knows nothing about this stuff. They opened a ticket to go to the developers. I am trying to fix it today as this can be an issue for customers.

<link rel="stylesheet" href="assets/templates/[template]/css/[stylesheet]" type="text/css" media="screen" />

The CSS that the site uses is defaultmodified.css located: /assets/templates/Ella-html5/css/default_modified.css

The code above does not list the defaul modified. I take it that the code there just grabs whatever CSS you choose as the one to use and that is the code to translate it. Maybe I need to edit that code.

EDIT:
I added a 1 to the end of that code and it made the site all messed up. What I have tried is going to where the default modified CSS is located. I copied it and added “defaultmodified2” as the file name. I then went into the store where you select the CSS to use. I chose that one. All works fine on my website. I will go to my home computer where I have not cleared the cache or opened the website since I made the changes and see if that works.

More and more I feel like 3dcart is not the best place to have my website. As a novice coder I simply do not know how to do all of this. I am constantly learning and appreciate the help I get from here. Maybe other platforms offer better coding support.

9

Try ?1 instead.
Just a 1 will alter the file extenstion to .css1 which will not be found. The ? makes what follows a parameter, not part of the filename.

1 Like
10

Okay, I will add that in after I run home and see if the other change worked. I have a feeling 3dcart uses this code:

<link rel="stylesheet" href="assets/templates/[template]/css/**[stylesheet]**" type="text/css" media="screen" />

To translate whatever file name I choose as the default CSS in the store settings. Where most sites just point to it directly in the code like: <link rel="stylesheet" href="css/styles.css?1">

It just simply works a bit different than it should. Oh well, makes learning fun.

11

This will be the templateing system used by 3dcart. The parts between the [square brackets] will get substituted for the actual folder/filename in the final output.
So you would try the parameter after the brackets. [stylesheet]?1

1 Like
12

I think that would work as well. I edited the stylesheet name manually and that fixed the problem. I am glad I know this as it is simple to add numbers to the stylesheet. Thanks so much everyone for all the advice. I will do this now when I make major changes.

13

So here is an update. I re-named the CSS main file to something different. That did not work. I added a number and ? mark behind the stylesheet in the frame code and that did not work. Firefox seems to let go of the cache quickly but chrome, the most popular browser simply will NOT show the changes I make. It requires me to manually go and remove the cache. My customers will not do this of course.

EDIT:
These changes I am making are not exactly CSS. I am modifying the navigation. Do I need to force a reset on those areas of code somewhere? It is odd because if I manually clear the cache it see’s the new navigation. If I re-name the file nothing happens.

14

I recommend against doing this. Although in the past it has been a nice solution, these days ideally you should be using HTTP 2.0 push to send the CSS along with the initial response from the server to make the page load and render faster.

You’d likely have your HTTP 2.0 push set up like so (nginx example, other servers would differ):

</assets/css/style.css.css>; as=style; rel=preload, </other.css>; as=style; rel=preload

The problem is, if the URL to your CSS changes dynamically, you’d also need to send this header dynamically as well and I’m not sure there are many easy ways of doing that.

If your browser is referencing assets/css/style.css?2019-03-04T12-38 it won’t match the pushed CSS and effectively your CSS will be downloaded twice.

15

Do you have samples of both, what it should look like and what it should not, that you can post? In other words, a screen capture?

One simple trick is to try Ctrl-F5. I don’t know if that works for all browsers but it might cause the cache to be updated.

For diagnostic purposes only, can you try a different browser? Or can you have a customer having the problem try a different browser? If they try a browser they have never used in their system for your website then there should not be a cache problem.

There are some services (primarily Cloudflare) that use highly technical ways to cache things. It is possible for a website to use them without changing the HTML. I am using a free Cloudflare account with one website and the only change I made was the A record for the DNS. So you can check that; do you know how? I doubt that it is Cloudflare or anything like that but if it was relevant then it might be why you can’t find the problem.

I really, really think it is better to determine what the problem is before making any changes. Avoid using trial-and-error for your production system. It could be that what you need to do is to undo a fix that someone forgot about that was applied attempting to solve some other problem.

If the problem has existed for a couple of days then my guess is that it is something different. I am not familiar with the relevant material to be sure.

Do you know what Configuration Management is? It is something that big companies use. You should look it up. If a developer does not know what Configuration Management is then they might not be as professional as you think.

16

At risk of derailing the discussion into off-topic server config :shifty:

I have never touched mod_headers and because I don’t like causing 500s I would wade in very slowly and carefully. Definitely not on a live site until I knew what I was doing.

https://httpd.apache.org/docs/current/mod/mod_headers.html#header

Do you have a syntax example for something like
“if the mystyle.css file is requested, send no-cache in the response headers”?

17

This isn’t a particularly good idea. Sending a no-cache header will force the browser to re-download the CSS. This will likely cause cause a flash of unstyled content ( https://en.wikipedia.org/wiki/Flash_of_unstyled_content) when navigating between each page of the website.

I had a go at implementing this with HTTP/2 push and got it working well. My code is here: https://r.je/http2-push-cache-css-reload I had to do it with PHP as it wasn’t possible using just NGINX as there’s no way to determine the modification time of the stylesheet.

The CSS file is pushed to the browser on the first request (avoiding a flash of unstyled content) and cached. A cookie is set containing the timestamp the user first visited the page. Then on each request the timestamp is compared to the modification time of the stylesheet, if the stylesheet has changed it’s re-pushed to the browser, updating the cache.

A very clean solution that works without any effort once it’s set up.

4 Likes
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.