Reducing html size

Question

Does anyone have a suggestion on how i can reduce my home page size please http://www.floorsandchores.net

Answer 1

All of the other answers are correct, but there is additional fine tuning you can do. ;-)

1.) You have a million-and-one non-breaking spaces used to do alignment... use CSS instead of this:

     

2.) There has to be some better image preloading than the Macromedia preloaders from circa 1999.

3.) Use server-side comments, that don't get pushed to the client

4.) You have a ton of empty onclick="" handlers in your code. If you don't need them, rip them out.

5.) Delete all your empty font tags, and strong tags, and divs that aren't being used

6.) Unless you overrode it to be inline, you don't need to add display:block to your div's

7.) Your favicon is a BMP file... it should be ICO for IE (and/or PNG for modern browsers)

8.) Drop the right-click blocker - there's no point in it anymore. All browsers fully expose the entire HTML/JS/CSS for anyone to see in ways you can't block.

9.) Remove/Refactor the JavaScript that is targetting IE4 and Netscape6 - both of these browsers died years ago

10.) You have this meta tag declared twice... <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

11.) You likely don't need this on the links: target="_self"

Answer 2

Are you thinking about size in kilobytes?

Your page is currently 182K. That's not a whole lot.

To find out the size of your site of find out how to optimize the loading speed, I recommend firebug for firefox and yahoo's yslow (add on to firebug) - it will tell you the page size, how you can optimize the site etc.

According to YSlow, you're currently getting a grade of C, which isn't so bad.

---

Page loading speed

If you're thinking about speeding your site up, there are a few ways.

To speed up the page you can do a few things:

• You currently have 7 javascript files, and 5 css files. The css files can be combined into one and the javascript files can be reduced to (I think) two or three.
• You should actually place the javascript files at the bottom right before the closing </body> tag
• You can add "expires headers" - you can do that in an .htaccess file (on apache servers at least) - this won't affect new users, but users that come often will feel a difference.

  ---

GZip compression

You could enable gzip compression on your website. There is a plugin for apache - but it's not certain that your host is compatible. But this will reduce the size considerably.

Answer 3

If you use a tool such as YSlow or Google Page Speed they will tell you what kind of optimizations that would increase the performance of your site. I can tell that your not gzip:ing your html, js-files and so on. Turning on gzip will reduce the size that gets downloaded to the client drastically.

Answer 4

It isn't a huge document relatively speaking, but here's what I'd tell my employees if they presented the code for review:

• The Javascript is old-school (looks to be auto-generated?) and you could minimize what you're sending across on each request by utilizing JQuery or in cases such as the rollover images, pure CSS.
• CSS could be used to remove repetitive element such as the font-size: 10px; which is done 17 times in-line on the page. Just set a CSS property for font with font-size=10px (or better yet, set one for the html and do percentages for child selectors)
• Run the page through a CSS optimizer
• Use semantic markup, which will clean up the page and also help with SEO!
• Combine CSS documents to lower the amount of HTTP Requests
• Check in a W3 Validator. Doesn't save space per se, but you are currently reporting 18 errors