Ctrl+F5 hard refresh explanation and solution

[jebediah]

Hi guys. First of, English is not my spoken language so have patience

 

I've google it and done some reading regarding "hard refresh" but i cant find the information i'm looking for.

Lets say that i visit a website that i've visit 6 month earlier, and what if they done some changes that require a so called hard refresh. How should people know that the site require a ctrl+5?

I mean, i could be visit sites that looks different without my knowledge, that could been changed several month ago?

 

How does it work? Is it manage automatically or is it up to the webmaster to implate some codes like

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

 

I dont know much about site development and i try to learn as much as i can. Is there no better way to handle this.

 

And my second question.

Where should i paste codes like this to solve the cache problem? In the header.php?

[requinix]

For static files the web server (like Apache or IIS) should handle caching automatically. Sometimes they need a nudge in the right direction but they'll do it. That leaves the dynamic content (like PHP scripts). Often they won't specify caching behavior themselves, so without any advice to go on the browsers shouldn't be caching the pages and a Ctrl+F5 shouldn't be necessary.

 

In my experience caching problems are almost always the result of the web server not handling caching for static files, like scripts and stylesheets, as you expect. Like they'll send Expires headers* that last a long time, or generate ETags** using limited information. Both of those can be fixed quite easily but you only need to do so if you discover a problem.

 

Odds are you won't have problems, but just in case you should do a bit of testing early on and find out if there's anything to fix.

 

 

* Tells the browser that it doesn't need to "refresh" until a certain date and time. Meanwhile they won't pull down new content - won't even try to.

** Identifiers generated by the server that change whenever the content changes, however you define that. For example, if an identifier depends solely on file size then browsers will only refresh if your edits also change the file size.

[jebediah]

Sweet, i really appreciate that you took the time to explain. Not often a newcomer get that kind of help

 

For static files the web server (like Apache or IIS) should handle caching automatically.

 

Any idea what the "default" time for this is, if any?

Most of my problems is that images are not updated as soon as i've uploaded them.

Lets say that i do some minor changes on a picture in the header, the new one wont appear untill i make a hard refresh.

What i've noticed though is that if i wait like 24 hours or so "without a hard refresh", the new picture will appear automatically. So it has to be some kind of timespan somewhere?

 

 

In my experience caching problems are almost always the result of the web server not handling caching for static files, like scripts and stylesheets, as you expect. Like they'll send Expires headers* that last a long time, or generate ETags** using limited information. Both of those can be fixed quite easily but you only need to do so if you discover a problem.

 

It is not every day i change the .css file, but it happens some times

When that day comes, is the code that i posted earlier a good choice then?

[requinix]

For static files the web server (like Apache or IIS) should handle caching automatically.

Any idea what the "default" time for this is, if any?

Most of my problems is that images are not updated as soon as i've uploaded them.

Lets say that i do some minor changes on a picture in the header, the new one wont appear untill i make a hard refresh.

What i've noticed though is that if i wait like 24 hours or so "without a hard refresh", the new picture will appear automatically. So it has to be some kind of timespan somewhere?

I don't know for IIS, but I believe Apache uses ETags by default. Those don't use dates or times:

1. Browser requests something for the first time

2. Server sends it and includes an ETag header with an identifier

3. Next time, the browser asks the server for the same thing but includes a condition that says "only send it if the ETag is not $identifier"

4. If it changed the server sends it (and the new identifier), otherwise it responds saying there were no changes and the browser uses its cache

 

What you're describing sounds like time-based caching (be that an Expires or something else). To find out what's really going on you need something like Firebug or Chrome's Inspector or something that lets you view HTTP request and response headers.

 

In my experience caching problems are almost always the result of the web server not handling caching for static files, like scripts and stylesheets, as you expect. Like they'll send Expires headers* that last a long time, or generate ETags** using limited information. Both of those can be fixed quite easily but you only need to do so if you discover a problem.

 

It is not every day i change the .css file, but it happens some times

When that day comes, is the code that i posted earlier a good choice then?

That code is only good for PHP scripts. To fix it for normal files you'd configure the web server to use caching as you want. For Apache you can stick a

FileETag All

in a .htaccess. But again, what you do depends on what's going on with the server and why it's doing what it's doing.

[jebediah]

Thanks again requinix for the explanation.

[jebediah]

Sorry to bring up this old thread again, but i have same problem with another site.

The site is only built with HTML.

 

The problem.

I have a div that i upload some picture to now and then and all new picture won't show up untill i press ctrl+f5.

This only happens with Firefox and not IE. The thing is that i run my FF with default settings, so all other users with FF should have the same problem.

 

What i've tried so far is

<meta http-equiv="expires" content="wed, 09 aug 2000 08:21:57 gmt" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />

 

<img src="images/pic.jpg?34523576"/> [b]At all new picture[/b]

 

And some that i found on the web

 

<ifModule mod_headers.c>
# YEAR
<filesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
  Header set Cache-Control "max-age=29030400"
</filesMatch>
# WEEK
<filesMatch "\.(js|css|swf)$">
  Header set Cache-Control "max-age=604800"
</filesMatch>
# 45 MIN
<filesMatch "\.(html|htm|txt)$">
  Header set Cache-Control "max-age=2700"
</filesMatch>
</ifModule>

 

# Turn on Expires and set default expires to 3 days
ExpiresActive On
ExpiresDefault A259200

# Set up caching on media files for 1 month
<filesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|swf|mov|mp3|wmv|ppt)$">
  ExpiresDefault A2419200
  Header append Cache-Control "public"
</filesMatch>

# Set up 2 Hour caching on commonly updated files
<filesMatch "\.(xml|txt|html|js|css)$">
  ExpiresDefault A7200
  Header append Cache-Control "private, must-revalidate"
</filesMatch>

# Force no caching for dynamic files
<filesMatch "\.(php|cgi|pl|htm)$">
  ExpiresDefault A0
  Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
  Header set Pragma "no-cache"
</filesMatch>

 

No one works. So is there any other solution?

 

EDIT: Just notices that this question should be posted at HTML section? Mod, or should i start a new thread?

[requinix]

EDIT: Just notices that this question should be posted at HTML section? Mod, or should i start a new thread?

Nah.

 

Using Firebug, what headers is Firefox receiving when it loads the image? You might have to Ctrl+F5 to see them.

[jebediah]

Hi again requinix and thanks for the answer.

Weel i cant really see where i can find that information.

I've installed Firebug, hard refresh the site and clicked on the Firebug icon. Then what?

I can only se what's in between <head> tags

[requinix]

Haven't the foggiest. I'm a Chrome user myself. Here's a start.

[jebediah]

This is all i could find, under Net -> All

 

Response Header

Accept-Ranges bytes

Cache-Control max-age=7200, private, must-revalidate

Connection close

Content-Length 5837

Content-Type text/html

Date Fri, 06 Jul 2012 18:11:10 GMT

Etag "4632a4f8-16cd-4c40643ab72c0"

Expires Fri, 06 Jul 2012 20:11:10 GMT

Last-Modified Wed, 04 Jul 2012 19:44:51 GMT

Server Apache

 

Request Headers

Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Encoding gzip, deflate

Accept-Language sv-se,sv;q=0.8,en-us;q=0.5,en;q=0.3

Cache-Control no-cache

Connection keep-alive

Host

Pragma no-cache

Referer

User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1

[requinix]

Yeah, that's it.

Expires   Fri, 06 Jul 2012 20:11:10 GMT

That tells your browser it doesn't have to re-request the thing (HTML page) for two hours. So it won't unless you specifically tell it to with a Ctrl+F5.

 

You're already using ETags and Last-Modifieds which, IMO, are superior to Expires. I say to get rid of all the Expires stuff in that second bit of .htaccess code you posted. The Cache-Controls can stay though.

[jebediah]

Just to be sure, which one of them do you mean?

[requinix]

All of the ones that have anything to do with "expires". All you'll leave behind is the Headers.