Rankwinz

How 90s HTML Coding Will Save the SEO World In 2014

As an SEO whose murky career background includes a stint in web development, I had a good chuckle reading through this walk down memory lane for 90s coders. I also connected it with a surprising blast-from-the-coding-past that has been making a comeback via SEO, and is frequently making its way into the core of advanced responsive design thinking: the humble sprite.

The Return of the Sprite

I have hugely fond memories of carefully packing as many images as possible into a single image file, to be gymnastically revealed in ever-more contorted positions to build a webpage — the “Sprite.”

Originally a concept taken from gaming, where sprites were like contact sheets of snapshots of characters used to animate motion, sprites were adopted by HTML coders to build rich-visual layouts and interactions for web pages without having to load hundreds of tiny individual images.

Using this advanced technology, web coders could replace the dull, predictable interactions of a website — standard link rollover behaviours, pallid and uninteresting navigational elements, square corners(!), or non-interactive link images — with exciting coder-defined, multicolour, rounded-edge and zanily off-kilter effects that would make your website stand out from the crowd and show your mastery of the web in JavaScript-free interactive splendour.

By 2004, A List Apart showed how the obsolescence of slicing (and lighter JavaScript usage for rollovers) could be achieved with liberal, thoughtful usage of sprites and light, clean, valid HTML. (And of course, if ALA suggested you should use sprites… then you used sprites!)

Like the rococo explosion in art and architecture, never was over-elaboration in rollovers as cherished as in that brief window where images were sliced into layers in Photoshop and artfully presented like sushi chefs in a chopping frenzy, spewing forth bedazzling websites to delight and amaze.

Come the late noughties, however, and austerity began to replace our earlier extravagance. The use of sprites to achieve effects now within reach in modern browsers purely via the (then) advanced CSS3 (even the age-old problem of rounded corners was solved), and an emerging understanding of the impact of off-beat design decisions on usability (even in more subtle design choices) meant that the coderati moved away from the humble sprite to today’s zen-like state of image-less websites.

In this credo, a devotion to light-touch coding puts much best practice beyond reach of the “working” website, the e-commerce platform, or indeed, anyone who doesn’t want to achieve a website look that is akin to a Bauhaus-designed library that only allows visitors to peer through the window.

In short, the design principles of elite coders have crept into a domain deemed beyond practical use for serving websites to the general public, who are more prosaically concerned with using the web to buy things and engage socially.

In the general Internet, the sprite has languished, unloved — except, perhaps unsurprisingly, by performance-focused companies like Google, whose own usage of the sprite on its famously high-performance homepage was monitored closely for new elements signifying SERP changes. Even today, Google’s sprite still delivers two powerful lessons for the advanced SEO.

Lesson 1: Speed Speed Speed

Why does Google use a sprite for its most valuable webpage? Speed.

Not only are sprites faster because they (famously) require less hits to the server to render a page, but the sprite also lets you harness another throwback web concept: the preload.

If you think about it, the concept of the pre-load is obvious. How do you get a page to load quickly? Simple – you have everything needed to render it already downloaded.

You can see that Google’s more than aware of this benefit, including, as it does, much of the required sprite content for its search result pages (the pages you get after making a search) in its homepage sprite.

Lesson 2: Mobile Is Going To Eat Your SEO Lunch

I’ve written here before about the impact high mobile render speed will have on your mobile SEO performance in the future, so I won’t repeat myself (TL;DR: beat sub one-second critical render path before this time next year or you’re toast).

But, it’s worth considering the massive consumer swing onto mobile evidenced by the fact that 20% of revenues in the UK this past Christmas were delivered from mobile shoppers in some cases. Similar stories abound elsewhere.

And, if you look beyond simple SERP performance in gaining mobile performance, it’s also worth noting that sprites have been found to render faster than data URIs in early testing conducted by the ever-excellent Peter McLachlan. This has implications for mobile application development best practices and should be integrated within the heart of mobile strategies this year.

So, bring back the sprite into your SEO strategies — achieve blinding web performance with an elegant tool that drives traffic and improved conversion rates on the search platform of the future: mobile.

Opinions expressed in the article are those of the guest author and not necessarily Rankwinz.
Info presented by Rankwinz