Need For Speed: Give Your Web Pages a Nitro Boost

If you’re planning a new site, or revamping an old one, just how important is your front-end code to your site success and SEO glory?

In the past, it was often arguable how much your front-end site code impacted your site’s usability and SEO. While we all know download time has an effect on user experience, the difference in site load time between 100kB and 300kB wasn’t going to motivate the CTO or IT VP to spend the time or money recoding the company site, and we all know how well SEO works as a motivating debate.

However, with Google adding page load time (page speed) to its quality scores in PPC, coupled with Matt Cutts’ announcement last year that page speed would become a factor in organic search as well, those arguments have come to an end. The time has come to take another look at your site code, how it might be affecting you, and what you can do to speed things along.

Your Baby is Ugly On The Inside, Too!

OK, I’m stealing the metaphor from Tim Ash, but as Tim always says about landing page design, “Your Baby is Ugly”!

Well, if you think your design is a little on the homely side, have you taken a look at what’s behind that site face? Looking at site code will make most people shiver.

If you know what you’re looking at, and even if you don’t, I bet even you can say with confidence, “Yep, my baby is ugly, inside and out! Now what?”

Places You Can Start Lightening Your Load

At one time, the standard for page load was under 100kB per page. However, today’s scripting technologies can make this difficult to achieve.

As a rule of thumb, if your site crosses between 300kB and 500kB on a page load test, figure out where you can reduce page weight. Fat bloated pages make no one happy. Not your users, and definitely not Google.

You can use Google’s Page Speed plug-in for Firebug to get a page speed analysis.

So what effects page weight? What factors should you look at for page weight reduction? Here are a four of the most common areas of page bloat.

1. (X)HTML: What is Your Code Weight?

Are you using style sheets for your presentation level and your HTML for your structure? (Think of the HTML as your house frame and the CSS as the decoration.) Your HTML should be clean and pristine, devoid of inline attributes, inline images, excessive div structures, tables (except for data), and excessive style sheet calls.

In layman’s terms, if your site code doesn’t seem clean, crisp, light, quick, and white, then chances are you’re experiencing issues in this area.

For a more definitive marker, if your page HTML is over 30kB-50kB, then you have an issue you need to address. This can be checked in the Web Developer extension for Firefox and Chrome.

2. CSS Sheets

CSS sheets are often utilized as dumping grounds for all things site related. Style sheets should be lightweight and written with as few calls as possible with simplified class names, and then divided into sheets relevant to site structure. Most importantly, make sure to remove unused classes.

Also, when possible, use CSS sprites for compressing image files in your style sheets. This will lower the number of calls to the server and decrease your page load times overall.

3. JavaScripting

If your JavaScripting isn’t in external .js files, move them there immediately.

Next, check for excessive scripting weight, class, and library calls. JQuery is infamous for having you download complete libraries of scripts you’ll never use. Check your scripts. Make them faster and lighter.

If you’re really advanced, you can use Google’s Closure Compiler to make your JavaScripts better, faster, and lighter.

4. Images

Are you using image extensions properly? JPGs are for photo images and PNGs (8) are for line art.

What about GIFs? They don’t compress as well as PNGs, so try not to use these unless you must. There is nothing you can do with a GIF you can’t do with a PNG, and it will be lighter and of better quality.

Using the incorrect file compressions will make your files significantly larger. This is the most common area for page bloat.

Now, it’s important to be careful of using PNG 24, as it has transparency issues in IE 6 and 7 and has a more heavily weighted compression algorithm, which means a page of PNG 24 versus PNG 8 is going to be much heavier.

For transparency, use FireWorks. It has a better transparency algorithm than Photoshop.

No matter how good your team, or how big or small your website, every site is a little bit ugly on the inside. Start by reviewing these four areas, and you’ll probably find that there’s a lot more there to help you lighten your load than you thought!

In future installments, we’ll continue to look at how to better assess your site, as well as how to fix it!

Join us for SES Toronto June 9-11, 2010 at the Hyatt Regency Toronto. The event will be packed with sessions covering topics such as PPC management, keyword research, SEO, social media, local, mobile, link building, duplicate content, multiple site issues, video optimization, site optimization, usability and more while offering high-level strategy, big picture, keynotes, an exhibit floor with companies that can help you grow your business, networking events, parties and more.

Related reading

Anchor text variations: Your key to link profile diversity
How to improve your website ranking in 2020
The role of SEO in online reputation management (ORM)
What impact will voice search have on SEO in 2020?