Ok, word of warning, I am going to be BRUTALLY frank with you – I will likely be dissecting this down to the lowest level ripping it apart. If we don’t tear it down, there’s no way you can build it up stronger. This ‘review’ of your page will address many things besides just speed, as there are likely accessibility issues as well.
Before I even look at the page load times, filesizes and code we must give it an accessibility review – where said page is a miserable failure. I say this because you are using absurdly undersized fixed metric (aka px) fonts across the entire page, combined with a fixed width layout. Useless on my netbook due to the fixed width, useless on my workstation since I have to zoom in 50% to get the fonts up to a legible size. PX should NOT be used for content fonts, and even on controls 12px or smaller is really useless to anyone out there running large fonts/120dpi. It also has several color contrast failures, the green on grey links being illegible even when zoomed, the dark grey “posted” text also facing those same problems.
The first thing on you page a user sees is an advertisement – you have it even before your actual site title… This DESTROYS trust with visitors and could likely be limiting your traffic and/or increasing your bounce rate. From the appearance it would also seem that your content order makes little to no sense, but we’ll know more once we peek under the hood.
Doing a speed analysis the first thing I do is copy/paste just the plaintext out of the page to figure out how much content you really have. I’m seeing 4.5k of plaintext and I’d ballpark it at five objects/images – so for HTML on such a page it realistically should be no larger than 8-9k of markup… you have 44k of markup meaning it is at LEAST five times larger than it needs to be. You appear to have no external stylesheets being included so it’s not leveraging caching models to your advantage, and the 125k of javascript for nothing probably means it needs just a wee bit of code reduction in that department.
Running it past the validator we have 58 validation errors on a tranny doctype – an indicator that what you have isn’t even HTML, it’s gibberish!
Going into the source the problems become appraent – the document is white-space stripped for no good reason, so we can assume that it is done to obscure bad code or to try and squeeze a few bytes out of it when the problem is in the HTML itself – Jquery for nothing, IE conditionals for no good reason, endless links to multiple CSS that don’t even seem to be loading, inlined CSS in the header, static scripting in the markup, redundant classes, full url’s… Hey, is this turdpress? The output LOOKS like turdpress, and that’s not a good thing.
I’m seeing a nasty case of “not every ejaculation deserves a name” – which is to say classes and DIV on/around elements that don’t need them, I’m seeing tags that have no business in a website written after 2003 like CENTER… I’m seeing full URL’s for no good reason besides wasting bandwidth… pointless/redundant title attributes also wasting bandwidth for nothing… All telltale signs of wordpress idiocy.
You take just the stupidfish menu, and it’s a whopping 11k of HTML to deliver 300 bytes of plaintext in 20 or so links… Serious whiskey-tango-foxtrot territory. Again this is entirely the fault of what I outlined above – pointless/wasteful title attributes for nothing, full instead of relational URL’s for no good reason, and classes that serve no purpose in this layout.
We take just one item:
<li class="page_item page-item-2576"><a href="http://www.gameguidecentral.com/privacy-policy/" title="Privacy Policy">Privacy Policy</a></li>
Every single blasted anchor inside that top UL gets cat-item, so what the **** does it need a class for? If the page is on the same URL you don’t need to waste bandwidth saying it, and if you need a title attribute like that there’s something wrong with the contents of your anchor.
That’s one giant train wreck for what should be a simple:
<li><a href="/privacy-policy/">Privacy Policy</a></li>
139 bytes in the original vs. 55 in the rewrite, a reduction of three fifths. There is NO reason for any of the rest of that being in there other than wordpress’ coders being some of the most inept {rather nasty expletive omitted} on the planet.
This isn’t your fault, it’s the inept bull hardcoded into the CMS you are using.
We get down into a content section, and it’s more bad code and worse, non-semantic markup. Lets take that first “lego” news item as an example:
<div class="home-post-wrap"><div class="home-post-titles"><h2><a href="http://www.gameguidecentral.com/2011/06/lego-pirates-minikit-location-guide-film-2/" title="Permanent Link to LEGO Pirates – Minikit Location Guide – Film 2"> LEGO Pirates – Minikit Location Guide – Film... </a></h2></div><div class="post-inside"> <span class="post-info">Posted by admin on Jun 5, 2011 </span> FILM 2PELEGOSTOA TOUCH OF DESTINYTHE DUTCHMAN’S SECRETISLA...<div style="clear: both;"></div> <a href="http://www.gameguidecentral.com/2011/06/lego-pirates-minikit-location-guide-film-2/" rel="bookmark" style="float: right;" title="Permanent Link to LEGO Pirates – Minikit Location Guide – Film 2"><img src="http://www.gameguidecentral.com/wp-content/themes/eGamer/images/readmore.gif" width="59" height="17" alt="Read More of LEGO Pirates – Minikit Location Guide – Film 2" style="border: none;" /></a></div></div>
953 bytes of markup for 145 BYTES of content. I see multiple unneccessary div, clearing DIV like it’s still 1998, a pointless REL tag that NOTHING actually uses, inlined style, redundant/pointless title attribute, an image that is presentational in nature and as such has no business in the markup, and a whole slew of other unneccessary bits for what could probably be done as a simple:
<div class="post">
<h2>
<a href="/2011/06/lego-pirates-minikit-location-guide-film-2/">
LEGO Pirates - Minikit Location Guide - Film 2
</a>
<small>Posted by admin on Jun 5, 2011</small>
</h2>
<div class="postBody">
<p>
FILM 2PELEGOSTOA TOUCH OF DESTINYTHE DUTCHMAN'S SECRETISLA...
</p>
<a
href="/2011/06/lego-pirates-minikit-location-guide-film-2/"
class="readMore"
>More</a>
<!-- .postBody --></div>
<!-- .post --></div>
Which even with the extra comments and formatting is effectively half the code. (480 bytes!)
Oh and a little advice, I don’t know what that “W3 Total Cache” nonsense is at the bottom of your HTML, but whatever it is get rid of it. 1.3k of extra bull at the bottom isn’t helping matters.
Basically I’d throw it ALL away and start over clean… There’s little worth even trying to salvage from that.
You are right that at least 50% of what is screwing the page up are WordPress artifacts, and there’s not much he/she can do about it without abandoning WordPress or from getting into some tough work that almost removes the point of having WordPress in the first place. All those classes are coded in by WordPress. I have been known on occassion, when I couldn’t stand it anymore, to write lots of new functions to override the native WordPress functions and strip out the junk in the header, but by the time you’ve done all that, you might as well code your own CMS…
