I Don't Understand What PageSpeed Wants Me To Do

As my site gets bigger and sees more and more visitors I am trying to speed it up and streamline it.

So I used a PageRank website to see my score and I don’t understand it’s CSS request for me to “Use efficient CSS selectors”

This is part of what it tells me:

Very inefficient rules (good to fix on any page):
.commentlist .children li ul li Tag key with 4 descendant selectors
.nav * Universal key with descendant selector
ul.nav li.sfHover ul Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag

If anyone can tell me what it is trying to get me to do and how to do it I would much appreciated.

That’s just a machine talking to you. Rules of that complexity may or may not be necessary, so we’d need to see your site to know.

Something like this

.commentlist .children li ul li

could almost certainly be simplified to

.commentlist .children li li

and you could see what effect it has to remove something like .commentlist. If it breaks the effect, you probably need it. The ideal is to keep rules as simple as possible, but sometimes they need to be that long.

.nav *    Universal key with descendant selector

The * takes a lot of processing, so it’s better to avoid it if you can.

ul.nav li.sfHover ul

It’s going to be hard to simplify that. Even if you remove .nav, you need to target that UL in some way, even if via the container. E.g.

.container ul li.sfHover ul

… which doesn’t achieve much in terms of efficiency.

These warnings are just a guide, to make you ask if the rules need to be as long as they are. Sometimes they simply will need to be.

Thanks. Will look into it more.

My site: Game Guide Central | All The Guides On The Internet In One Place

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 &#8211; Minikit Location Guide &#8211; Film 2"> LEGO Pirates &#8211; Minikit Location Guide &#8211; 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&#8217;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 &#8211; Minikit Location Guide &#8211; 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 &#8211; Minikit Location Guide &#8211; 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">

		<a href="/2011/06/lego-pirates-minikit-location-guide-film-2/">
			LEGO Pirates - Minikit Location Guide - Film 2
		<small>Posted  by admin on Jun 5, 2011</small>
	<div class="postBody">
	<!-- .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.

deathshadow, I enjoyed your rant, but it is slightly unfair. :cool: 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…

He/she should keep the W3 Total Cache, though. It’s a plugin that creates static versions of all the pages, and will certainly save more time than the extra few lines of HTML costs.

Your point being? :smiley:

I actually believe that’s exactly what I was implying.

First off thanks for just saying it straight. I do appreciate it. But as PatrickSamphire said I am using WordPress and I really don’t know what to do about 90% of this. Between Wordpress and my Theme all of this is pre-coded and I don’t have the knowledge to try to go in there and change anything.

Yep. I completely agree with this. Will get it changed. This is lazyness on my part with trying to get some ads on the page to pay the bills and not wanting to really mess with the theme’s layout.

The white space striping is Minify from W3 Total Cache. Little things that I am trying to do to save size and increase speed

The Jquery is used on pages for a hide/show (i.e. LA Noire – Homicide – The Quarter Moon Murders – Just Locations | Game Guide Central) I don’t know how to make it only load on pages where it is needed.

I’ve actually tried to strip the extra plug-in CSS and combine it to 1 file and I just don’t have enough knowledge to go into the plug-ins and strip the references to their own CSS files.

Something I can change! lol. The comments were there to just let me know it was working. I have now removed them.

Not trying to make excuses but if I could program my own CMS then I would. My goal now is to make as many changes as I can to make improvements where I can without breaking the site.

And out of all of this the only things I have the direct knowledge to do are remove the wasteful comments and work on ad placement.

Well, there was an article here on sitepoint a while back outlining how to go about stripping down/clean out the unnecessary bits of the menu… Gah, digging for the link…

Ah, here it is:
How to Tidy Your WordPress Menu HTML » SitePoint

That can at least walk you through eliminating most of the bloated code in the menu. Likewise much of the IE conditional nonsense could probably be stripped with a rewrite of the CSS used to build the page, though that’s a much more involved process.

It’s a shame really that so much bloated nonsense is hard-coded into turdpress where you can’t even edit it without neutering any chance of upgrading – but then top to bottom every existing off the shelf CMS seems to be filled with this type of idiocy; It’s getting worse with all the “gee ain’t it neat” useless bells and whistles being added through the use of javascript for nothing… to the point of even replacing functionality with scripting.

I know they keep it in there for ‘legacy skin’ support, but really when it’s that idiotic maybe it’s time for a pimp-slap to the userbase – or at the very least make it optional and not the default.

That’s not totally true. A lot of it can be removed by duplicating the native WordPress functionality without the crap in your functions file and calling those functions instead. It’s just not worth it. :slight_smile:

Of course. I guess I felt a little sympathy for the guy, as he’s not to blame for the abomination that is WordPress. :cool: