# Solved: website page Loading questions



## skyhigh007 (Jun 17, 2004)

Hi

My question is Does your whole web page reloads everything even though you are using the same background for all the pages?

Ex: If I'm on my home page and a user clicks on the "About us" or "contact us" page, does it mean everything reloads for " About us" or " contact us" page ?

I'm trying to figure out a way to save some bandwidth.


Thank you


----------



## tomdkat (May 6, 2006)

Items like graphics will be cached and shouldn't be downloaded again unless the browser cache is disabled or there are HTTP headers instructing the browser not to cache that item. Of course, as you change pages the new pages will be downloaded but then they will be cached.

Depending on how the browser is configured, it will check more frequently or less frequently to see if any of the cached content has changed so it can download fresh copies, if necessary.

A GREAT way to save bandwidth is to scale images down to their desired display size instead of using HTML to scale the image for you. Use GIFs or JPEGs and stay away from PNGs unless you can keep the PNGs small in size. PNGs can get LARGE in size. Keep the DPI of the images around 72. Keep the file sizes of images small.

Another way to conserve bandwidth is to put common CSS and JavaScript in external files that are shared across pages instead of embedding CSS and JavaScript in the HTML files themselves.

Lastly, use CSS for page layout and ditch HTML tables for page layout to reduce page size.

Peace....


----------



## skyhigh007 (Jun 17, 2004)

thanks for the reply. I did everything that you have mentioned in the above regarding how to set image, css, and javascript. But I still see my whole page gets reloaded. By the way, how do you check the http headers instructions to see the cache?


----------



## tomdkat (May 6, 2006)

Those will be "pragma" directives in the HTML files themselves. If you aren't aware of these already, chances are they aren't being used at all.

Something else to consider, the browser displaying a blank page as the new page loads doesn't mean it's downloading everything again.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

When you click on the button, I can see it loads the whole page. It gives a quick blink. Any other areas I might need to look at? EX: coding ?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> When you click on the button, I can see it loads the whole page. It gives a quick blink.


That's what I mean. By virtue of seeing the "blink", that doesn't mean images and other stuff is actually being downloaded *again*. Of course, the new page will load (at least the first time) and subsequent times you'll get cached versions. Different browsers will cache differently so you might be different behavior.

Without seeing the site in question, it's hard to comment on anything specific that could be changed. I checked out your gallery in the other thread and outside of the first loading of the images, the content loaded quickly.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I know that you have to load int he first time, but it keeps on reloading it every time it goes to those pages.


----------



## tomdkat (May 6, 2006)

I don't think it is. I've experienced what you describe on THIS forum. Sometimes the techguy header at the top will stay in place as I switch forums and sometimes it will disappear and re-appear but it isn't being downloaded.

Without seeing anything, it sounds like what you're describing is an image being "painted" as the page is rendered, which is indicative of a LARGE image being dynamically scaled down to a smaller resolution.

Peace...


----------



## Mudley (Apr 7, 2008)

how much traffic does your site get?


----------



## skyhigh007 (Jun 17, 2004)

I'm just testing my site on the server. Is there anything that i can do on the server site? Ex: cache control or stuffs like that?
So, I should reduce the file size?


----------



## tomdkat (May 6, 2006)

Without being able to see the content we're dealing with, it's hard to provide better advice than what we've done so far. We've got no idea how large the images and HTML files are. We've got no idea how images there are per page. We've basically got nothing. 

Peace...


----------



## Mudley (Apr 7, 2008)

tomdkat said:


> Without being able to see the content we're dealing with, it's hard to provide better advice than what we've done so far. We've got no idea how large the images and HTML files are. We've got no idea how images there are per page. We've basically got nothing.
> 
> Peace...


what he said 

i'm glad you're thinking ahead about your site though!


----------



## skyhigh007 (Jun 17, 2004)

What do you mean by "Of course, as you change pages the new pages will be downloaded but then they will be cached." So, they will be cached in the browser? 
Or I have to set the cache control for the web server?


----------



## Mudley (Apr 7, 2008)

browsers cache images, css files, and js files

if you provide a link, we can likely save you a lot of wasted time and confusion


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> What do you mean by "Of course, as you change pages the new pages will be downloaded but then they will be cached." So, they will be cached in the browser?


Yep. If you have Firefox installed, fire it up and type "about:cache" in the URL bar and you will see how much of your browser cache is utilized. If you install the CacheViewer extension, you can see what is in the cache easily.

Peace...


----------



## Mudley (Apr 7, 2008)

nice call on the cacheviewer!
looks like it even works with ff3


----------



## tomdkat (May 6, 2006)

Mudley said:


> browsers cache images, css files, and js files


I've got some HTML files in my Firefox cache as well.

Unfortunately, CacheViewer doesn't work with Firefox 3rc1 (yet). 

Peace...


----------



## Mudley (Apr 7, 2008)

tomdkat said:


> I've got some HTML files in my Firefox cache as well.
> 
> Unfortunately, CacheViewer doesn't work with Firefox 3rc1 (yet).
> 
> Peace...


left out the html cuz i didn't want to freak him out 

my bad about the ff3, i saw 3.0...but didn't realize it was 3.0pre

i use ie7 mostly


----------



## skyhigh007 (Jun 17, 2004)

Here's the Response Header: 

Response Headers
Date	Fri, 30 May 2008 16:48:42 GMT
Server	Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8b PHP/5.2.6 FrontPage/5.0.2.2634 mod_perl/2.0.3 Perl/v5.8.8
X-Powered-By	PHP/5.2.6
Expires	Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control	no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma	no-cache
Set-Cookie	CartId=3048209; expires=Wed, 01-Jan-2020 17:00:00 GMT
Content-Length	5126
Keep-Alive	timeout=15, max=100
Connection	Keep-Alive
Content-Type	text/html


Request Header :

User-Agent	Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14
Accept	text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language	en-us,en;q=0.5
Accept-Encoding	gzip,deflate
Accept-Charset	ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive	300
Connection	keep-alive

Can you tell from this ?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Response Headers
> Date	Fri, 30 May 2008 16:48:42 GMT
> Server	Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8b PHP/5.2.6 FrontPage/5.0.2.2634 mod_perl/2.0.3 Perl/v5.8.8
> X-Powered-By	PHP/5.2.6
> ...


That tells the browser NOT to cache the content. I don't know if that will apply only to the HTML or to everything on the page.

EDIT: Look to see if any of your PHP scripts are disabling caching of content.

Peace...


----------



## tomdkat (May 6, 2006)

I just found this site which has some GREAT info, most importantly this:



> The client - web browser, spider, cache etc.
> having requested a page, receives all the cache control information in the headers sent before the content of the page is sent. *By default PHP pages send no cache control headers, and subsequently are not cacheable.*
> 
> In order for a page to be cacheable, it must have at least a last-modified header, and preferable a few more headers - expires, etag (more about this below). Since the php script dynamically generates the page the moment it is requested, the last modified time is the instant it is requested.


Peace...


----------



## skyhigh007 (Jun 17, 2004)

IS this setting from server "Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma no-cache? "

I dont have php scripts, except the shopping cart in written in php. all my other pages are in xhtml and css and only few php in there.


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> IS this setting from server "Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0
> Pragma no-cache? "


That got sent back from the server with the other header information. Whether or not the *web server* was the origin of that setting, I don't know. One thing you can try is loading a simple, static HTML page:


```
<html>
<body>
<p>This is a test</p>
</body>
</html>
```
And see what headers come back, using the same method you used to get the header info above.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

There's no " Cache-Control	no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma	no-cache" show up after I tried the above code. 
Hm.. So it looks like code i wrote in my site ? Do you know where to look in the code?

By the way, I used Fire bug add on for the firefox to get those response headers.


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> There's no " Cache-Control	no-store, no-cache, must-revalidate, post-check=0, pre-check=0
> Pragma	no-cache" show up after I tried the above code.
> Hm.. So it looks like code i wrote in my site ? Do you know where to look in the code?


Can you post a link to the test HTML code above on your server?

EDIT: I'm doing some experimentation on a server I admin. If you could post a link to the test HTML code above you ran on your server, that would be great. 

Thanks!

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Here 's the link test2
test.html
test.php

Could it be that the server that I installed SSL ?


----------



## tomdkat (May 6, 2006)

Nope, this isn't SSL related at all. Thanks for the links. NONE of them have any cache control information in the headers, so there's gotta be something related to the particular site you're working on that's causing the caching of the content to be disabled.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

How do I check ? is there particular code or tags or anything that I should look for ?


----------



## skyhigh007 (Jun 17, 2004)

It looks like the shopping cart that I use is causing the problem ?test


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> How do I check ? is there particular code or tags or anything that I should look for ?


Hmmm, I'm not sure. Try checking your PHP shopping cart. 

Ok, so the shopping cart is setup to NOT cache any data. Cool. Make sense. However, that SHOULD NOT impact the rest of the site. Your other test pages DID NOT have any cache control info in the headers, which is good.

So, I'm thinking your shopping cart should be the only page(s) that don't get cached. To make sure the other site pages generated by PHP get cached, add a "Last Expires" or related header to those PHP generated pages, per the link I posted above.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

So, shopping carts are not suppose to cache any data? Why ? Well, my other php pages are integrated with the shopping cart. Ex: include a page or a file from the shopping cart. Where can I look for the " last expires " or related headers in a file ? Is there a specific code to look for ?

Thanks


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> So, shopping carts are not suppose to cache any data? Why ?


Well, it's not a matter of "supposed to" or not but if you think about it, a shopping cart generally has the stuff you want to purchase in it. If you don't buy what's in the cart, you don't want cached pages being reloaded when you visit the cart at some later point. So, it makes sense (to me at least) for a shopping cart page to NOT cache content.



> Well, my other php pages are integrated with the shopping cart. Ex: include a page or a file from the shopping cart. Where can I look for the " last expires " or related headers in a file ? Is there a specific code to look for ?


Are you familiar with "grep"? If you are, use it to look for "Cache control" in the PHP files for the shopping cart. If you're not familiar with grep, use some other file searching tool to locate where the "Cache control" header is being injected and deal with it accordingly. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Let me ask you this, whats the standard method or ways of stopping from headers, footers and shared images through out the site to reaload when the user goes to different page ?


----------



## tomdkat (May 6, 2006)

I'm not sure I understand the question but I'll see if this answers it. 

Normally, content sent to the browser is cached unless that content is NOT intended to be cached. If the content provider doesn't want their content to be cached, they will either configure the server or the web pages themselves to prevent caching by specifying the cache control HTTP headers (in the case of web server configuration) or pragma directives (in the case of web page configuration). I believe I read somewhere that use of the pragma directives is obsolete and using HTTP headers (web server configuration) is the best way to disable caching of content.

In the Apache world, the mod_expires module is used to control sending of cache control HTTP headers. The mod_expires directives can be specified in a .htaccess file allowing fine-tuned control over which content gets cached and which content doesn't.

So, in a nutshell the question isn't "what is the standard way of enabling caching?" but "what is a good way to disable caching?" since caching will be done be default. Since PHP pages are dynamically generated, I don't think they will be cached by default but I have no more information than that. I've been reading this frequently when looking at various pages that discuss PHP and cache control.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I converted all the php pages to html files and took out the shopping cart software. My IE 7 browser is still not caching those images and I contact my server support, they said only IE is not caching , other browsers are fine and the web server is setup correctly.


----------



## tomdkat (May 6, 2006)

What do the HTTP headers look like with the new set of pages? They *should* look just like the test pages you posted links to above.

Another thing to consider is using frames. Put the shopping cart stuff in a frame and leave the HTML headers and other stuff outside fo the frame where the shopping cart content is loaded.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Response Headers
Date	Tue, 03 Jun 2008 18:24:27 GMT
Server	Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8b PHP/5.2.6 FrontPage/5.0.2.2634 mod_perl/2.0.3 Perl/v5.8.8
Last-Modified	Tue, 03 Jun 2008 02:05:05 GMT
Etag	"3d94848-1361-8a6a9640"
Accept-Ranges	bytes
Content-Length	4961
Content-Type	text/html
Request Headers

User-Agent	Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14
Accept	text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language	en-us,en;q=0.5
Accept-Encoding	gzip,deflate
Accept-Charset	ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive	300
Connection	keep-alive

Cookie	SQMSESSID=2681388fba254a4639792b367a7125fe
If-Modified-Since	Tue, 03 Jun 2008 02:05:05 GMT
If-None-Match	"3d94848-1361-8a6a9640"


----------



## tomdkat (May 6, 2006)

Ok, the headers above look fine. If things aren't caching in IE for you, you'll have to do some testing on other systems to make sure it's not just your system and you'll have to look into IE's caching settings to see if they will need to be adjusted. Lastly, you should verify if IE6 or IE7 have the same caching issues or not.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I added "

"

to the header and I went to the IE browser --->Tools-->Internet Options--> Browsing History--> Settings----> Automatically and I can see the files related to the site in the Temporary Internet files folder in my windows xp desktop. However, I still see every pages gets reloaded when I click on each individual tabs or buttons.


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> I added "
> 
> "


That will enable IE-only page transitions and isn't related to this at all.



> to the header and I went to the IE browser --->Tools-->Internet Options--> Browsing History--> Settings----> Automatically and I can see the files related to the site in the Temporary Internet files folder in my windows xp desktop. However, I still see every pages gets reloaded when I click on each individual tabs or buttons.


Just to make sure things are "clean", I would dump the browser cache AND the cookies. Now, the tricky part is determining if content is being downloaded or being loaded from the cache given how the page is loading. Again, the fact the content "paints" on the page doesn't necessarily mean the content is being downloaded again.

I don't know of any IE add-ons you can install to monitor network traffic or to ascertain if any element on a displayed page came from the browser cache or not.

How about starting the task manager and looking at the networking tab. Monitor the network traffic when you first load the page with an empty cache and no cookies. Then, refresh the page and see if the network traffic changes any. If it does, make note of how much it changes.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Here's the structure for every html page that I have and all of them share the background image and <wrapper> background image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

testing


Home
About
Gallery
Shop

Testingggggggg


Home
Shipping
Privacy Policy
Contact Us 
News
Terms of Use
Site Map


----------



## tomdkat (May 6, 2006)

That looks cool. The point I'm making is you will need to find a way to verify if IE is actually *downloading* images repeatedly when the page is viewed repeatedly. By virtue of the image not appearing "instantly", that doesn' t _necessarily_ mean IE is downloading anything again. What are the file sizes of the background images?

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Background and Middle background images are 56KB and 42KB, JPGs


----------



## tomdkat (May 6, 2006)

Those are just large enough that you might notice the browser loading the images when the page is displayed but that doesn't necessarily mean the browser is downloading them again.

If you can, temporarily change the image background sizes to some much smaller (like 5kb) and see if the loading speed in IE changes any.

Also, see if what I suggested above about using the Task Manager to monitor the network traffic will help you determine if those images are actually being downloaded each time or not.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

alright, i will try that .


----------



## skyhigh007 (Jun 17, 2004)

now, I tried with two different html pages use same background and mid background for both pages. I installed IEwatch on my IE 7 and see whats being cached. It turns out that shared images are cached and response is from cache. But why the page still blinks when i go to a different page ? Here's the link


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> now, I tried with two different html pages use same background and mid background for both pages. I installed IEwatch on my IE 7 and see whats being cached. It turns out that shared images are cached and response is from cache.


U da man! :up: I'll have to look into IEwatch. How did you find it?



> But why the page still blinks when i go to a different page ? Here's the link


I have no idea, something about the way IE renders the page. I think IE wants to make sure everything is downloaded _before_ rendering the page and if all the content is cached, the blink occurs because it's able to locate all the content more quickly. I know Firefox 2 cached objects in memory to speed up performance switching between recently viewed pages. Firefox 3 also does this as does Opera 9.5.

I don't know why IE behaves the way it does but I'm glad you found a way to verify whether it was actually downloading the content each time vs using cached copies. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I was searching for HTTP viewer on google, IEwatch and httpwatch cameup. I looked at the both, IEwatch has 30 day trial so I picked that one. LOL Here's a site that doesn't look to blink in IE at all Link. Can you tell why ?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Here's a site that doesn't look to blink in IE at all Link. Can you tell why ?


Nope because it blinks for me using IE6.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

It looks like the background and the header is not blinking in IE 7? Link


----------



## tomdkat (May 6, 2006)

This last test case is interesting since in IE6, the background doesn't flash at all for me and the header will sometimes flash. The section of image below the navigation menu consistently blinks.

I don't have access to IE7 on this machine. The thing is, a LOT of people still use IE6 so you'll have to keep that in mind.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

In the last case, I switch from a large background image to a small image that repeats. As for the middle images, I give top, middle and bottom each section an background image. I still dont get why it blinks for the header.


----------



## tomdkat (May 6, 2006)

It has NOTHING to do with your HTML coding, at least that's my opinion. It's a side-effect of IE's page rendering method. Just a fact of life for IE users. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

so are you saying I have to stuck with that blink?


----------



## tomdkat (May 6, 2006)

Only if you're an IE user.  

Seriously, your last set of test pages demonstrated (at least to me) that using smaller images reduces the "blink". The header image didn't blink nearly as much as the lower image and the background basically remained static.

If your images are relatively small in size, the blink should be minimal. If you must use larger images, I don't know what to tell ya.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Well, what I did in the last test page was, for the background image, I changed to a smaller image and repeat it , before it was a image like 1100x 1200. As for the middle background, before I also had a big image 780x1200, now I divided into 3 sections, top, middle, bottom and the menu buttons are put it between top and middle. During testing, the background does not change and the header blinks sometimes. So, I guess IE hates Large image files.


----------



## skyhigh007 (Jun 17, 2004)

Is it possible to have background-image: url (something.php); ?


----------



## tomdkat (May 6, 2006)

If you're careful in how you have PHP fill in the background URL, that could work.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

thanks!


----------

