If by large you mean 1 to 5% on a properly formatted document… The amount acutally saved being bupkis compared to what gzip/mod_deflate server-side can provide. The only reason to do it is to reduce the amount of work the server has to do when compressing, and frankly that is such a TINY fraction of CPU time (especially if you have RAM to burn on caching the compressed versions) it’s not worth the effort or the maintennance headaches should someone else want/need to work on it. There are better places to put one’s optimization efforts!
Well first off the ([i].jpg 172k[/i]) layout is completely broken here since elements that shouldn’t be absolute positioned ARE. Text is blowing out of fixed height containers, elements that should be fixed fonts like the menu arent, elements that shouldn’t be fixed fonts (px) like the content are, and thats without even looking at the code.
The CSS on that is ugly, formatting-wise, but the real problem lies in broken layout methodologies and worse, absolute RUBBISH markup.
What do I mean by rubbish HTML? Page elements not in flow order, spans doing heading tag’s job, image replacement techniques that don’t actually WORK when images are disabled, multiple H1’s on a page (your only supposed to have one), nonsensical heading orders - lower order headings are supposed to be subsections of the heading preceeding it, and it’s improper to skip levels - unordered lists around what appears to be an ordered list or not a list at all given the use of headings, lots of DIV, Classes and ID’s that don’t even serve a purpose, meta tag that’s stuffed like it was the keywords meta instead of using it for what it’s for (the actual page SERP listing), the use of CITE for no apparent reason, CSS image sprites on CONTENT images (things that SHOULD be in the markup as IMG) etc, etc, etc…
It’s funny how TOTALLY you embraced “CSS Sprites” as you took it TOO far. JPEGs tend to result in larger files the larger the image, so they are rarely good candidates for it in the first place… and can result in really bad appearance like the artifacting on that left red button. Much less it’s BAD SEO when it’s content images. Sure google’s regular search doesn’t see alt text, but you blew chances to get relevant images listed on google image search!
When determining if a image belongs in the CSS or the Markup, you should be asking “is this image content, or is it presentation” - borders, little arrows instead of bullets, the site logo - that’s all presentational affectations. The plates sitting in the content? That’s CONTENT and belongs in an IMG tag.
Until you clean up the markup so that it makes sense and is less wasteful, I’d not be sweating the CSS.
Which if I had written that same page, it would have gone a little something like this:
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="This should be a plain text description of what the site IS, since this is what shows on your actual SERP result! (unless you use that ODP crap)"
/>
<!-- remember, keywords should be relevant to the document content for EACH page! -->
<meta
name="keywords"
content="EWTO, Martial Arts, Training"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<!--
Don't forget to implement these later!
<link
type="text/css"
rel="stylesheet"
href="print.css"
media="print"
/>
<link
type="text/css"
rel="stylesheet"
href="handheld.css"
media="handheld"
/>
-->
<title>
EWTO UK
</title>
</head><body>
<!--
empty tags like SPAN and B below are image sandbags for
sliding doors or glider-levin replacement - do not remove!!!
Horizontal rules should be removed by CSS
and are present for CSS off users only.
-->
<div id="pageWrapper">
<h1>
Welcome to the EWTO England Website
<span></span>
</h1>
<ul id="mainMenu">
<li><a href="#">WORKING</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
<li><a href="#">Menu Item 8</a></li>
</ul>
<div id="contentWrapper"><div id="content"><hr />
<h2 class="wingTsun"><b>Wing</b>Tsun<span></span></h2>
<img
src="images/trainerOnHand.jpg"
alt="Trainer is always on hand to help"
class="leadingPlate"
/>
<p>
WingTsun ist wohl die logischste Kampfkunst überhaupt. Sie nutzt mit Raffinesse alle physikalischen und geometrischen Möglichkeiten des Körpers, um die auftreffende Kraft des Angriffs abzuleiten. So ist es auch körperlich schwächeren Personen (und ein potentieller Angreifer ist meistens stärker) möglich, sich effizient zu wehren. WingTsun lehrt, sich nach Grundprinzipien zu verhalten, damit im Ernstfall die Entscheidung wegfällt, welche Technik nun anzuwenden sei. Denn bei einem tätlichen Angriff hat intuitives Handeln die größte Schnelligkeit und Chance, erfolgreich zu sein.
</p>
<h2>Geschichte des WingTsun</h2>
<img
src="images/womenTrainMen.jpg"
alt="Women also train the men"
class="trailingPlate"
/>
<p>
Während seiner Geschichte von mehreren tausend Jahren wurde das chinesische Volk immer wieder von angrenzenden Stämmen überfallen. Deshalb war die Kriegskunst für die Chinesen seit jeher von lebenswichtiger Bedeutung. Gleichzeitig mit dem kämpferischen Können wurde mit dem Training die Gesunderhaltung von Körper, Seele und Geist angestrebt. Immer wieder entstanden im Laufe der Jahrhunderte neue Kampfkünste, von denen überliefert heute noch ca. 400 verschiedene Stile unter dem Sammelbegriff "Kung Fu" in der ganzen Welt unterrichtet werden. Gemäß der Legende wurde WingTsun vor etwa. 250 Jahren von der buddhistischen Nonne Ng Mui erfunden und nach ihrer ersten Schülerin benannt: Ihr Name, WingTsun, bedeutet "schöner Frühling". WingTsun wurde in Familientradition weitergegeben, Yip Man war der letzte unangefochtene Großmeister. Seine Schüler, zu denen unter anderen Bruce Lee zählte, gründeten später ihre eigenen Schulen und Organisationen und entwickelten den Stil nach ihrem eigenen Gutdünken. Einer der letzten und besten "Closed Door"-Students von Yip Man ist der aktuelle Großmeister Prof. Dr. Leung Ting. Anfang der 70er Jahre unterrichtete Leung Ting den heutigen Großmeister und Europacheftrainer Prof. Dr. Keith R. Kernspecht. Dieser, international bekannt als DER Kenner orientalischer und okzidentaler Kampfkünste, brachte das WingTsun-System 1976 nach Europa, wo es heute weltweit die meiste Verbreitung gefunden hat
</p>
<h2>Prinzipien</h2>
<ol>
<li>
<h3>Ist der Weg frei, stoss vor!</h3>
<p>
Standiger Kraftfluss nach vorne, auf das Ziel zu, denn Gegenangriff ist die beste Verteidigung. Sobald die eigene Sicherheitsdistanz vom Kontrahenden unterschritten wird, folgt der Gegenangriff.
</p>
</li><li>
<h3>2.Wenn der Weg nicht frei ist, bleib kleben!</h3>
<p>
Dranbleiben: Wird die Verteidigungsaktion vom Gegner gestoppt, behält WingTsun den Kontakt und somit die Kontrolle bei, um einen neuen Angriffspunkt zu finden (anstatt sich zurückzuziehen).
</p>
</li><li>
<h3>3. Wenn die Kraft des Gegners gr?sser ist, gib nach!</h3>
<p>
Der Klügere gibt nach: Übt der Gegner nun einen verstärkten Druck aus, um die Kontrolle zu brechen, gibt WingTsun weich nach. Man lässt den Angriff ins Leere laufen, ohne dabei die Kontrolle aufzugeben (anstatt sich dagegenzustemmen mit unzureichenden Kräften).
</p>
</li><li>
<h3>4. Zieht der Gegner sich zur?ck, folge!</h3>
<p>
Zieht sich der Angreifer zurück, z.B. um zum neuen Schlag auszuholen, dringt WingTsun sofort nach vorne nach, fliesst automatisch wie Wasser in jede sich ergebende Lücke. Dies ist eine Konsequenz aus dem Ausüben des 1. Prinzips, dem ständigen Vorwärtsdrang.
</p>
</li>
</ol>
<h2>Frauenselbstverteidigung</h2>
<img
src="images/womenCombatCompetitions.jpg"
alt="Women Combat Competitions"
class="leadingPlate"
/>
<p>
Gerade Frauen werden immer wieder Opfer von Gewalt - sowohl körperlich als auch psychisch. Das WingTsun-Frauenkonzept," Verteidige Dich hoch 3 " wird Sie selbstbewusster machen, Sie werden sich Ihrer eigenen Stärken bewusst und eine neue Freiheit für sich entdecken, die Freiheit durch Selbstverteidigung. In drei Phasen aufgeteilt, lernen Sie: Grenzen zu ziehen, diese zu bewachen und, falls nötig, auch erfolgreich zu verteidigen. Dabei bedeutet dies nicht, sich nur für den schlimmsten aller Fälle zu wappnen; erfolgreiche Selbstverteidigung beginnt im Alltag, immer dort, wo jemand Ihnen zu nahe tritt. Egal ob Ihnen jemand ins Wort fällt, sexistische oder rassistische Bemerkungen macht oder Sie bedrängt - bereits hier beginnt das, was wir Selbst-Verteidigung nennen.
</p>
<!-- #content, #contentWrapper --></div></div>
<div id="firstSideBar"><hr />
<a href="#" class="enquiryLink">
Enquiry Form
<span></span>
</a>
<ul class="subMenu">
<li><a href="#">Shop</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Shop</a></li>
</ul>
<!-- #firstSideBar --></div>
<div id="secondSideBar"><hr />
<h2>EWTO Austria Aktuell</h2>
<div class="sideBarBox">
<h3><a href="#">Messerabwehr in Theorie und Praxis</a><span></span></h3>
<img
src="images/knifeInWaistband.jpg"
alt="Knife in waistband"
class="plate"
/>
<p>
Interessantes Know-how und spannende praktische Übungen werden in diesem Trainer 4- Seminar am 13.6.10 im EWTO-Hauptquartier Österreich in Wien durch den Nationaltrainer Dai-Sifu Oliver König (7.PG ...
</p>
<div class="sideBarBoxFooter">
<span></span>
<a href="#">EWTO Austria</a>
</div>
<!-- .sideBarBox --></div>
<div class="sideBarBox">
<h3><a href="#">Nächster WT Prüfungslehrgang in Wien </a><span></span></h3>
<img
src="images/training.jpg"
alt="Two people in Training"
class="plate"
/>
<p>
Sa, 19.6.10 und So, 20.6.10 mit Dai-Sifu Oliver König. Details ...
</p>
<div class="sideBarBoxFooter">
<span></span>
<a href="#">EWTO Austria</a>
</div>
<!-- .sideBarBox --></div>
<div class="sideBarBox">
<h3><a href="#">Das war Mallorca 2010</a><span></span></h3>
<img
src="images/mallorca.jpg"
alt="Mallorca"
class="plate"
/>
<p>
Sonnige, vorsommerliche Stimmung herrschte am heurigen Mallorca-Trainingsurlaub Ende April! Die zahlreichenTeilnehmer aus verschiedenen Ländern genossen den hochkarätigen WingTsun-Unterricht unter der Leitung von Großmeister Kernspecht, Dai-Sifu Giuseppe Schembri, Dai-Sifu Oliver König und ...
</p>
<div class="sideBarBoxFooter">
<span></span>
<a href="#">EWTO Austria</a>
</div>
<!-- .sideBarBox --></div>
<!-- #secondSideBar --></div>
<div id="footer"><hr />
<div class="ewtoLink">
<a href="#">EWTO<span></span></a>
</div>
© EWTO Austria
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Also shows what I’m talking about when it comes to white-space stripping. Yours doesn’t have closing element comments, nor the giant text comment I have after BODY, there’s no commented out secondary stylesheets, and it doesn’t have indenting that makes any sense, it doesn’t have the extra hooks mine has for using sliding doors/eight corners instead of fixed width corner images, and it uses spans with sliding backgrounds instead of IMG tags which SHOULD result in SMALLER code… any yet:
Yours unstripped is 10k… we white-space strip it you only bring it down to 9.2k… My rewrite is only 8.6k - there’s a reason I don’t bother with that white-space stripping nonsense. The people who advocate it’s use usually have fat bloated code filled with classes and ID’s they don’t need, twice as many div and span as neccessary, and non-semantic markup.
It’s also shows why I piss on most ‘tools’ for doing the job. You have a decent text editor with auto-deindent, block tabbing, and learn to use the tab and enter keys PROPERLY you don’t need any ‘tools’ to clean up the code. The only legitimate reason for using any sort of tool for handling that is to clean up other people’s messes - and even then in most cases it’s FASTER to throw it out and start over from scratch!
I have time later I’ll toss together the CSS to show how that would work ‘my way’ and document it so hopefully you can learn from it.