One of my favorite Cre8asite Forums threads, which mysteriously disappeared, not once but twice, was rescued from Google’s cache, and is being reproduced here to celebrate Cre8asite Forums third birthday.
It began with a question from Send2Paul:
Send2Paul
Sat Sep 18, 2004 8:37 am
Morning all 
Ongoing with my recent education in the Website Hospital , I find myself asking more & more questions the deeper I get into this “web design thing”… So, here’s a good one concerning page size & loading time….
At present I see my HTML file size & image file which, when added together gives me my total page size. I have also been checking my page loading time here: http://www.netmechanic.com/GIFBot/optimize-graphic.htm - thanks to Garrick for that one. And, (following Garrick’s advice again), I shall be trying to keep a page to a max total page size of 50K - giving an approx download time of 10 seconds on a 28.8K modem.
And finally, having created pages in DWMX2004, optmised the images to reduce the overall page sizes using methods mentioned above, is there a list/explanations of what coding gives makes a page bigger - i.e. what can be edited out/changed to make the page smaller. Is there a priority listing of what types of coding - Java, HTML, CSS makes a page bigger than another?
Lots of questions, I know. But I’m on a bit of a learning mania at the moment - and today’s mania is “Image Optimisation/Page Size”
Thanks for you help and expertise.
Ruud
Sat Sep 18, 2004 9:12 am
Use the power!
… Uh, I mean: use the cache. Images once downloaded to the browser will be served from the browser’s cache. By re-using elements you don’t make the total page download smaller as the browser will serve these images from the cache.
So: a good selection of re-usable elements.
External files
Put in an external file what you can put in an external file. CSS: external file. Java Script used on more than one page? External file. After hitting one page on your site any other page will load faster as my browser already has these files in its cache…
Local calls
Eliminate as much as possible calls to remote servers (ads, trackers, counters, whatever). The more calls to remote servers the browser has to follow the slower your page “loads” (read: displayed).
Get it out!!
Page loading time is a question of perception. Make things happen right away. Change the body color: the browser will almost instantly execute this: hey I’m already on the page!
Use content on the top of the page. When working in tables, ensure there is either a separate well defined table there or just plain content. When working in CSS, use a separate DIV there. In both cases don’t do anything too complex: simple span the width of the page. This element will start to display while the browser is still busy figuring out how to render all this other complex stuff further down.
CSS
Use CSS whenever possible - and use it wisely. If all your < H2 > tags read like < H2 class="subheading" > simply redefine the H2 itself instead of attaching a class to it.
Slice
When larger images are sliced they do not reduce the overall download weight but the user experiences the ongoing display of page elements differently from just sitting there and waiting.
Minimal gain
You can edit out whitespace. Tip: keep a copy with whitespace handy to work with….
Same goes for comments along the line of < !-- start left menu -- >.
Gain is minimal though…. to say the least. Cutting out almost any non-icon sized images delivers more than cutting out whitespace and comments combined. Generally your page will be 5-10 KB max. whereas a single images start at that size……
Don’t worry
As said, it is not about the size of the page or the download time: it is about perceived download time:
(from User Interface Engineering) Our other finding, though, took us entirely by surprise. When we looked at the actual download speeds of the sites we tested, we found that there was no correlation between these and the perceived speeds reported by our users. About.com, rated slowest by our users, was actually the fastest site (average: 8 seconds). Amazon.com, rated as one of the fastest sites by users, was really the slowest (average: 36 seconds).
There was still another surprising finding from our study: a strong correlation between perceived download time and whether users successfully completed their tasks on a site. There was, however, no correlation between actual download time and task success, causing us to discard our original hypothesis. It seems that, when people accomplish what they set out to do on a site, they perceive that site to be fast.
User Interface Engineering in that article also suggests that complaints about your site’s “slowness” could in fact relate to how successful they are at doing what they want to do at your site.
Ruud
Send2Paul
Sat Sep 18, 2004 9:36 am
Superb Ruud - thank you
External Files - I understand the external files, I think. A CSS style sheet which is attached to another would be considered as an external file? (I don’t use Java - yet!).
Local Calls - yup understood. I do have a link to a stats gathering service at another website on the front page of the site I’m building:
http://www.send2paul.btinternet.co.uk/JC/index2.html, but I’ll live with that as it doesn’t appear to be too much of an issue in loading - so far. But point taken for the future.
Get It Out - I didn’t understand what you meant about changing the body colour, and what effect that will have? I’ll be using more CSS on the next few site I put together.
Minimal Gain - Comments I can get rid of some. DWMX2004 sems to relish in splattering your coding with comments here and there
Thanks again for that Ruud.
DianeV
Sat Sep 18, 2004 3:44 pm
send2paul, you asked how to make pages download faster, and Ruud has given good information.
However, there are other issues. People who hand-code pages often comment their code as an aid to themselves, or whoever comes after.
Dreamweaver also places comments in code. If you are using the Templates or Library Items feature, the Templates/Library Items won’t update on the pages where you have removed those comments.
Send2Paul
Sat Sep 18, 2004 4:03 pm
Diane, thanks for that - I suppose when it comes to deleting any code from DW produced documents - I’ll be careful what I do.
I don’t suppose if you know if there is a definite list of “what effects download time of a page”? People talk about reducing code size - but what to reduce & why?
Anyway, thanks again for your help.
bragadocchio
Sat Sep 18, 2004 4:22 pm
Hi Paul,
Why don’t we see if we can make this thread the place people turn to when trying to answer that question?
Ruud has us off to a really good start.
Send2Paul
Sat Sep 18, 2004 4:32 pm
Yes, Bill - that’s a good idea
As it happens, I’ve found an even better link to use for testing page & image size optimisation, and that is here: http://www.websiteoptimization.com/services/analyze/
It would be good to thrash out any further knowledge on this subject. I know I may have asked a lot of questions on this topic, but it seems so important - particularly when you’re dealing with a site with lots of images on - that optimising the image & page size to the optimum download time is something that should be thought of right at the start of the design - much to my ignorance and hard work now as I try to go about re-optimising all the pages I’ve created already!
Send2Paul
Sat Sep 18, 2004 5:02 pm
And so that I may continue this thread let me pose another question….at the page analysis website here: http://www.websiteoptimization.com/services/analyze/ it says how clever I am etc when things are okay. But, when the page size is under 50K, and there is only one image on the page which it deems to be an issue, it will say one of two things:
IMAGES_SIZE - Warning! The total size of your images is 45219 bytes, which is over 30K. Consider optimizing your images for size, combining them, and replacing graphic rollovers with CSS.
IMAGES_SIZE - Caution. The total size of all your images is 24354 bytes, which exceeds 15K. Consider optimizing and creatively cropping your images, and combining them where appropriate. Even better, replace graphic text and form controls with styled text to eliminate unnecessary HTTP requests. Ideally each image should be less than 1160 bytes, to easily fit into one TCP-IP packet.
So, what I would like to know is - with only one image on the page, the total page size being less than 50K, what is the optimum that the one image should be scaled to - 30K or 15K ?
Confused- Once-Again-Of-Essex
Ruud
Sat Sep 18, 2004 8:42 pm
Optimum image size
The absolute minimum at which you and others still feel comfortable about the image quality. When using a GIF see if you can spot a disturbing difference between a palette of 256 colors and 64. No? Go down. How about 12? 8?
When a JPEG, does it make too much of a difference when you save at 75% or 80% of quality?
When you save the JPEG as GIF or PNG (or vice versa) is the file larger or smaller? How about the quality?
Comments
As I said, this is tiny stuff. The filesize gain vs. the benefit in the future of these comments is minimal: I would keep the comments. The great thing about using CSS for your layout instead of tables is that you generally need much less comments.
A nested table layout often need < !-- start this-- > < !-- end that -- > or you would have no clue anymore what part of the code appears where. A CSS layout can, but isn’t always, much more natural.
Optimised code
Mainly: moving to a CSS based layout. Meaning, whenever possible do not declare something within the page code:
< font size="2" color="red" >hello world< /font >
… repeated for 8 sizes and 3 colors adds up to a lot of code junk.
< span class="red" >hello world< /span >
This saves a few bytes in the HTML. Even more if the class red defines much more other properties.
Other example. If you use a lot of < p >, < br >, & as means to push your layout or the content in the layout you might consider using CSS elements such as line-height, padding, margin.
Example. Say that to achieve a certain amount of whitespace after a < H2 > heading I always do < p > & < /p > … I could eliminate that by using padding-bottom.
If it appears more then once you can generally use a rule for it.
Example
From the front page of the site you’re working on. HTML itself is 7,957 bytes (just under 8 KB).
Moving all style declarations to an external .css file the HTML is now: 5,252 bytes… Now that is saving.
Deleting all the < FONT > declarations and using a class for the < P > where you use these: 4,911 bytes.
But wait - you use that style declaration all the time. Why not set it once for the body and then declare fonts we want to appear differently? Or declare < P > to use font X unless you would specify otherwise in a class?
No font tags, no class declaration for the < P > tag: 4,820 bytes.
Then we see a mix of TABLE and DIV positioning. Through some good hard honest work you can get rid of the TABLEs as well, shaving off even more. Mind you, it will take some effort, especially to have it behave well in the main browsers… but in the end it can be done: 4,357 bytes.
You just cleaned up the code look and readability of your HTML, gained a valuable CSS layout experience, helped browsers to render your page faster… and as a result your HTML, without removing comments or whitespace, is 54% of what it used to be.
Get it out! Make it happen!
(quoting send2paul) I didn’t understand what you meant about changing the body colour
The < BODY > tag is one of the first to be executed, if possible. If I change the body color to green there right away when the browser sees this it will change the page color. My user sees that a connection to the site has been established and the page will appear any moment now! Had I left it white he would have to wait for the first page element to display.
Likewise, using a non-nested table or DIV on top of the page will give the reader something to look at while the rest of the page renders. I’m sure you’ve been to sites where you will see the company logo already on top of the page … and then it takes a few seconds before the content of the article appears. That is it!
Counters, trackers
Depending on the hosting package of your clients he will usually have AWstats or webalizer (or both) included for free. And raw log files. It is better to use those than a remote call to some free stat/tracker service…
But if you want to use it, the one freestats uses actually is free and can be installed on the same server. Have a look at PowerPhlogger.
Ruud
Send2Paul
Sat Sep 18, 2004 9:56 pm
Wow……very cleverly done Ruud
Ha - but I’m not as clever/confident as y’all at the moment with reconstructing coding. I have been using the built-in Mark Up Validation tool in DWMX2004, which has been quite good in removing some code - where I understood what was going on. However, as there is no major issues at this level, (code removal to reduce page size), with the site I’m doing, I think I’ll leave this as an exercise to look-and-learn later on, and just concentrate on getting decent size pages. When I start another site from scratch, I’ll be more CSS orientated.
With the web album pages, I have re-optimised the images to about 70% (a medium setting), and it does seem to have made a difference to overall page size. I’ve put a sample of the album here: http://www.send2paul.btinternet.co.uk/OPT2/index.html and I’m just waiting for the artist, John Clark, to have a look at the individual images to confirm that he’s happy with the slight reduction, which hasn’t caused hardly any degradation of the images. (I still have to learn to appreciate gifs as well, as my life has so far revolved around jpgs & jpegs!).
Thanks again Ruud for all your help - I’ll be printing this thread out and pasting it in a book somewhere for future reference
p.s. If anyone else has anything to add - don’t be shy! 
Ransak
Sun Sep 19, 2004 3:18 am
There is not much I can add to the excellent advice given.
One more bit of advice I can offer is about tables if you are still using them for layout.
Internet Explorer will not display any images in a table, until all the content in the table loads. What Ruud said about perceived loading time is really important. Instead of having one large table surrounding your content, try breaking the page up into several smaller tables. This way the users feel like something is happening and they have some content to read while the rest of the page loads.
Other than that, if you keep doing what your doing and follow Ruud’s advice you’ll be in great shape.
Frank V.
bragadocchio
Sun Sep 19, 2004 4:44 am
Good point about the perception of a fast loading time. For the same reason, it can be a good idea to use interlacing with GIF images (example).
I figured that I could point out some basics of CSS that might fit well in this thread, too.
Following are some ways for making CSS more efficient.
Use Shorthand properties
There are a number of properties in CSS that can be used as shorthand:
background
border
font
list-style
margin
padding
outline
I’ve linked above to the W3C descriptions of how to do that for these, and an example of how shorthand is used for padding follows.
This:
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 15px;
becomes this:
padding: 5px 10px 20px 15px;
Condense Box side values
The four sides of a block level element (paragraphs, divs, tables, lists, etc.) can have borders, paddings and margins. I’ve linked to the shorthand properties for those above. There’s a method of writing the values for those properties that can make them shorter. (note that the shorthand method can’t be used for setting different values for the width of a border - you need to use the longer method if the different border sides have different widths)
1 value, applies to all sides.
2 values, the first value is the top and bottom, the second value is the right and left.
3 values, the top is the first value, the left and right are the second, and the bottom is the third.
4 values, In this order (clockwise from the top): top, right, bottom, and left.
In my padding example above, if all of the lengths are zero, I would only use one value, like this:
padding: 0px;
If the top and bottom were 0px, and the sides were 5px, it would look like this:
padding: 0px 5px;
If the top was 0px, the sides 5px, and the bottom 10px, here’s how it would appear:
padding: 0px 5px 10px;
When you have Zero lengths
If a length in CSS is set at zero, you don’t need to include the unit identifier (e.g., px, em, etc.)
So, my in my padding example at 0px for all sides, I could use this:
padding: 0;
Group Selectors when you can
It’s possible to group selectors that share declarations in a comma separated list.
Here’s an example:
P { font-family: sans-serif; }
LI { font-family: sans-serif }
can be written as:
P, LI { font-family: sans-serif; }
Use Multiple Declarations for Selectors
Instead of repeating the same selectors with different declarations, list the declarations after the selector, separating those declarations by semicolons.
So, the declarations for this selector:
P { font-size: 10px; }
P { line-height: 12px; }
P { font-family: Verdana; }
can be expressed as:
P { font-size: 10px; line-height: 12px; font-family: Verdana; }
Use grouping intelligently, with multiple declarations
An example:
H1 { font: 18pt Helvetica; color: black; background: white; border: 3px solid black; font-weight: bold; }
H2 { font: 16pt Helvetica; color: black; background: white; border: 3px solid black; font-weight: bold; }
H3 { font: 14pt Helvetica; color: black; background: white; border: 3px solid black; font-weight: bold; }
H4 { font: 12pt Helvetica; color: black; background: white; border: 1px solid black }
H5 { font: 10pt Helvetica; color: black; background: white; border: 1px solid black }
H6 { font: 8pt Helvetica; color: black; background: white; border: 1px solid black }
can be written as
H1, H2, H3, H4, H5, H6 { font: Helvetica; color: black; background: white; }
H1, H2, H3 {border: 3px solid black; font-weight: bold;}
H4, H5, H4 {border: 1px solid black; }
H1 { font-size: 18pt; }
H2 { font-size: 16pt; }
H3 { font-size: 14pt; }
H4 { font-size: 12pt; }
H5 { font-size: 10pt; }
H6 { font-size: 8pt; }
Another Resource
An intelligent use of selectors can be really helpful in making your CSS more efficient. An excellent resource describing how to do this is the Selectutorial. In addition to describing the different selectors, it covers the difference between class and ID, the importance of inheritance, and how to use cascading well. It also has a useful step-by-step tutorial to build a simple layout.
Tim
Sun Sep 19, 2004 5:06 am
Paul,
Excellent idea on starting this topic. Bill & Ruud especially have provided some great info, and I think we should all bookmark or print this out for future reference.
Thanks guys!
Ron Carnell
Sun Sep 19, 2004 6:30 am
Lots of really great advice, especially (since it can’t be said too often) about the perception of speed being most important.
FWIW, two years ago, I optimized my busiest site to see if I could save a couple bucks on bandwidth charges. I used virtually every one of the tips above, especially the CSS ones, and a few that probably aren’t worth spending much time for most people. For example, I renamed my images folder to img — saving three bytes for every graphic on every page. That probably only saved me, maybe, about 60 bytes per page. But 60 bytes times 8 million page views adds up at the end of the month.
If it’s at all feasible, I strongly suggest finding a web host that supports mod_gzip. It doesn’t help a lot with images (because those are already compressed), but it easily turns 50K of code and text into 25K going across the wire. The larger the page size, the more noticeable the speed improvements. Configured correctly, there is virutally no downside and I honestly don’t know why all Apache installations don’t have it standard. Great stuff!
Finally, while I think it’s wise to optimize every page as much as possible, I think it’s even more important to know which pages need it the most.
While I certainly have no personal experience to back up this contention, I’m guessing that those videos of Paris Hilton circulating last year were probably a bit larger than 50K? I’m sure Stock will correct me if I’m wrong < wink >. Yet in spite of their size, rumor would have it they were fairly popular downloads.
My point, of course, is that people don’t object to large file sizes if they feel they are getting a return for the time they spend waiting. I think our entry pages, certainly the home page and any main category pages, need to be fairly small and follow the 8-10 second download test. When someone first arrives at an entry page, they haven’t yet had their expectations raised and will be impatient to see something. However, once they’ve arrived at the site and start clicking on deeper links, I believe it is perfectly acceptable to reject the 8-10 second rule if it means giving the visitor what they want. We shouldn’t become slaves to our rules, not at the expense of good design and usability.
If you can make the visitor really wantyour content, they’ll wait as long as it takes.
Ruud
Sun Sep 19, 2004 7:05 am
(quoting Ron Carnell) I think our entry pages, certainly the home page and any main category pages, need to be fairly small and follow the 8-10 second download test. When someone first arrives at an entry page, they haven’t yet had their expectations raised and will be impatient to see something.
Excellent advice.
Apart from the entry pages mentioned, don’t forget to check your logs for additional entry pages. Visitors may be brought in often by the search engines via a particular page. That page too is an entry page.
Ruud
0
Comments
Comments on this post