CODEWITHSUNDEEP
htmlcsscachinghosting
Matt
Matt

Reputation: 1632

Having trouble clearing cache to refresh webpage

This may sound like a very basic question but I feel like I've tried everything.

This a follow-up to this post I made earlier, where I resolved the issue, only for it to come back again.

To summarize, I was making some change to the contact.css file on the contact page of my website when I noticed the changes were working offline but didn't appear online. I narrowed this issue down to a caching issue with the above post (others could see the changes but I couldn't).

In the above example I couldn't get my website to show up as background-color:blue - eventually it worked and I thought I'd fixed it... So I go to change the color back to normal and boom, it stops refreshing the changes again.

So I think it's some sort of caching issue but for the life of me I can't get my cache to clear properly so that I can refresh and see the changes.

Here are the things I have tried already:

I'm using HostGator to host my website, I'm wondering at this point whether it's something to do with them? I really just have no idea at this point.

Here's what I see online: enter image description here

Here's what I should be seeing and what I do see on the offline version of my website: enter image description here

Upvotes: 0

Views: 114

Answers (2)

k2snowman69
k2snowman69

Reputation: 1929

I noticed you said "I'd really like to get to the bottom of the underlying issue" so I figured I'd write an answer to provide a few options (and if anyone wants me to add others, please feel free to add a comment). Overall though, determining your root cause is likely much harder than just solving your overall problem, but let's start with possible causes that I can think of off my head:

  • Multiple CDN servers taking a while to update so some are returning the old data (your current session) and some are returning new (incognito)
  • Server session caching so when you reload the page within one http context session you get back the same content (I've seen this in product search queries for example)

The solution to this is relatively simple though, it's called cache busting. Basically, every time you update your source code just add a unique key in either the query string, file name or something to make the url unique. For example, for your css you can link https://path/to.css?v2.0.1 and just keep increasing the version number as you go. If you use webpack for your build outputs, they have a content hash variable that you can use as a token in the file names.

As for the CDNs possibly caching things out of date... the content hash solution will solve that problem as it's an entirely different file name so the CDN will go get it from the root if it doesn't have it in it's cache. I'm unsure of the url version query parameter will do the same, maybe someone else could shed some light on that.

Upvotes: 1

John Carlo Diocadiz
John Carlo Diocadiz

Reputation: 29

Have you tried using Incognito in Chrome?

Upvotes: 1

Related Questions