Stop header, footer and shared images from reloading

Forum Moderators: mack

Message Too Old, No Replies

Stop header, footer and shared images from reloading

deepman007

11:58 pm on Jun 2, 2008 (gmt 0)

Is there a way to stop header, footer and shared images from reloading every time a user goes to a different page?

Thanks

piatkow

10:39 am on Jun 3, 2008 (gmt 0)

Are you sure that this is how the site is behaving and not the way the browser is configured?

Are you sure that each page accesses the same files you are not replicating things across multiple folders?

Caching is the default, something must be explicitly preventing caching or forcing a refresh, either server side or client side.

topr8

10:45 am on Jun 3, 2008 (gmt 0)

if by header and footer you mean the coded header and footer of the page, then no this is seen as seperate for each page (unless you are using some kind of frame or iframe system to display the header and footer.

images should be cached however.

check out the yslow extension for firefox, it is very handy for optimising download speeds - i bought the book too! (but you don't need that)

deepman007

4:55 pm on Jun 3, 2008 (gmt 0)

The page is mainly written in html, css and few lines of javascript. The way i structure the page was for every page I put the same code for header, footer and the only difference is the middle content. I didn't use frame and the browser is in default configuration.
Could it be the repeated code in each page causing the browser to re-load every time user goes to a different page?

thecoalman

6:10 pm on Jun 3, 2008 (gmt 0)

Although its repeated code every page is new page as far as the browser is concerned and it will load it. You can't prevent that.

As mentioned the images should be cached though so they don't have to be reloaded.

piatkow

9:42 am on Jun 4, 2008 (gmt 0)

Sorry, I assumed that you meant that you were loading the headers and footers from their own files.

daveVk

12:43 pm on Jun 4, 2008 (gmt 0)

[webmasterworld.com...] may be relevent

pageoneresults

12:49 pm on Jun 4, 2008 (gmt 0)

Is there a way to stop header, footer and shared images from reloading every time a user goes to a different page?

Is there anything different between those pages in how that information is being assembled at the browser level? Can we assume that these are include files and their position, etc. is the same on all pages? I know what you are referring to and it can be annoying at times. Check your page load times and also how the page is structured. Maybe you've got something really "heavy" that is loading first at the browser level and causing delay for the remaining elements? What do you have being called externally? Any third party scripts involved?

deepman007

12:06 am on Jun 5, 2008 (gmt 0)

Well, every page is in xhtml strict 1.0, there's no include files. Every page is structured in and only the middle content changes.
In CSS, there's <body> background image and <wrapper> Image. I don't know why every time you click on a link in the navigation, that page loads everything including background and wrapper images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>testing</title>

venti

4:58 am on Jun 5, 2008 (gmt 0)

If you want to cache scripts, images, and css on subsequent requests you will need to mess with your webserver settings.

1) Setup content expires headers for the directories those files are in. We usually set the time limit for the just above average session length (20 minutes for us).
2) Remove any etag headers

This should have the clients cache the files and prevent most 304 requests as well. Without going crazy (frames and such), you won't be able to cache header and footer content but if the pages themselves dont change often, you could apply the method above to you content as well.

A good tool to test this stuff is YSlow for FireFox (free).

StoutFiles

6:48 pm on Jun 9, 2008 (gmt 0)

Look up YSlow, an extension for Firefox/Firebug. If you follow the guidelines they give you your site will run at maximum efficiency.

edit- venti already mentioned this, i am just seconding it.

[edited by: StoutFiles at 6:49 pm (utc) on June 9, 2008]

deepman007

3:49 am on Jun 10, 2008 (gmt 0)

I did install Yslow and it doesn't help on the blinks that I get on IE when you go to different pages. I checked that shared images are being cached and requests are from cached, but why is it the page still reloads or blinks that look like page is reloading everything again ?

thecoalman

8:03 am on Jun 10, 2008 (gmt 0)

I believe I know what you are talking about, I've seen this myself in IE only. Never really tracked it down if it was cache issue or something else. Try adding your background images in a hidden <div> to the bottom of the HTML file.

tomda

9:49 am on Jun 10, 2008 (gmt 0)

Remove any etag headers ?

Could someone confirm that ? I though Etag were ignored when expires date was set and that servers usually:

1/ Check for expires date
2/ If not, then check for etags

I know that YSlow says that they can be some problems with Etags, especially if content is fetch from multiple servers, nonetheless they do not say to remove it

SuzyUK

10:07 am on Jun 10, 2008 (gmt 0)

and it doesn't help on the blinks that I get on IE when you go to different pages

[webmasterworld.com...]

but why is it the page still reloads or blinks that look like page is reloading everything again

It's an IE thing, it's got something inbuilt to allow for its proprietary transformations, the meta tag (also IE Proprietary) in the linked post simply takes control of the "transforms" - afaik anyway... it might help?

[edited by: SuzyUK at 10:14 am (utc) on June 10, 2008]

deepman007

6:29 pm on Jun 10, 2008 (gmt 0)

Questions:
1) Why you want to put images in a hidden div ?

2) The meta tag did not work on mine IE 7
<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)">

thecoalman

2:49 am on Jun 12, 2008 (gmt 0)

Well as mentioned I've seen this happen myself, at the time I thought it was a caching issue but someone else on this forum told me that IE didn't have caching issue. In any event it solved the flickering between page loads... I'm pretty sure what you are seeing is the exact same thing as me. It's only for a split second, if I remember correctly I even tried doing it with some very large images to determine if in fact it was cache problem and that didn't help either.

I'd venture to guess that maybe the background images linked to in a external CSS document is that last thing to be rendered by IE?

If putting them at the bottom doesn't help try the top of the HTML document.

deepman007

7:26 pm on Jun 16, 2008 (gmt 0)

Some how IE 7 works sometimes, but IE 6 doesnt work, I put it right below the <body> tag, and In the external CSS, I still have the background image.
<div style="display:none;">
<img src="backgroundimage1.jpg" />
<img src="backgroundimage2.jpg" />
</div>