Problematic CSS Script

This thread concerns this guy:

http://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin,latin-ext

Code (markup):

I am trying to optimize my website www.lukecorden.com and using GTMetrix whenever there is a recommendation that needs fixing, i.e gzip, expires headers, etc I fix it and it's all good with the exception in each instance of this font. I'm not really sure what it is except that I believe it resides in my functions.php and is the main font for the wordpress site.

The recommendations I need to fix are the following:

1. Specify a cache validator

The following external CSS files were included after an external JavaScript file in http://www.lukecorden.com/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

2. Enable gzip compression

Compressing the following resources with gzip could reduce their transfer size by 222B (47% reduction).

3. Add Expires headers

There is 1 static component without a far-future expiration date.

4. Optimize the order of styles and scripts (repeated on google/yslow)

The following external CSS files were included after an external JavaScript file in http://www.lukecorden.com/. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

You can see these recommendations in real time if you input my site into gtmetrix and then you might be able to get a better idea of my issue.

Any advice on what I can do would be really appreciated. Also, I'd like to be able to learn/understand this so I can help others with this issue, including myself again, no doubt, in the future.

Apologies if I have broken any posting rules?
I hope not.

 

Google Pagespeed and ySlow often make some nonsensical recommendations and/or ding you for less important things, while missing MAJOR failings in term of design, functionality, accessibility, and YES, the actual speed of the page. I've seen it rank scriptless 70k pages made from 16 files or less LOWER than 2 megabyte train wrecks built from hundreds of separate files loading tens if not hundreds of times slower as being... slower, just because of things like not wasting time dicking with caching, things that effect render time not load time (and of the two load is more important), or just because you're not using some unstable buggy CDN -- the last of those funny from the guys selling CDN's. (I don't TRUST CDN's, my experience with them is NOT good!)

But, let's look at the ones you listed:
1. Specify a cache validator

That's pretty simple... any attempts to include external CSS belong in HEAD, at the start of HEAD before you have even your first SCRIPT tag. This makes sense, and why any scripts worth using should be able to be loaded right before </body> and automatically attach themselves to the page -- of course most of the crap sleazed out by the sleazeball scam artists known as 'advertisers' don't do this, neither do a lot of fly by-night javascript for nothing asshattery since the majority of people who see merit in halfwit garbage like jQuery don't know enough about writing javascript to be providing scripts for others.

2. Enable gzip compression

A simple server setting to automatically compress the files for transmission. This is a must have -- but turning it on depends on your HOST, and could even involve having to recompile the server if it's monolithic (like Apache). If you are self-hosting or on a dedicated, you should know how to set this already -- if not, ask your hosting provider to turn on something that should have been turned on in the first damned place.

3. Add Expires headers

This is what I meant by 'dicking around with caching' -- playing with the expiration in hopes of wasting the users disk space to try and sweep poorly coded page bloat under the rug. IT's a bunch of BS if you have clean semantic minimalist code... but you did say turdpress so that's already out the window.

4. Optimize the order of styles and scripts

This is pretty much the same as the first one. Certain things should be loaded in certain orders. ALL CSS <LINK> belong in your head before you even have a single <SCRIPT> tag. If you have <LINK> inside body or have them in the wrong order, you've screwed the pooch.

Of course, since you're working with the steaming pile of manure known as turdpress fixing these is difficult, and most likely there are far FAR deeper rooted problems I'd be sweating LONG before thinking about the above.

Looking at your page the fixed metric (px) fonts are an inaccessible mess, depressing in a semi-fluid/responsive layout (almost defeats the point!), the massive pointless images for text header doesn't work with the responsive layout, etc, etc...

You've got 14k of markup for 3k of plaintext, possibly as much as twice what should be neccessary... much of that can be blamed on static CSS in the markup, endless pointless DIV and classes for nothing (a turdpress hallmark, particularly since it likes to shove classes for nothing down your gullet), static scripting in the markup, outdated scripting methodologies, tables for layout, tables for nothing, and a host of other garbage that serves no legitimate purpose in the code.

Though good luck fixing ANY of that in the steaming pile of manure known as turdpress, since it loves to shove bad code down your throat -- more so the more plugins you add since things like the source-order of scripts vs. CSS is pretty much ignored by 99% of the people sleazing those out.

 

Nice one Death Shadow. I love the the way you write. We share a similar caustic style. If you can bring yourself to look at a Turdpresss crafted website then you you should check out my blog. I think you'd enjoy it.

Great response. Very useful in places. Thanks.