Website Optimization Guide: Part One

Written by Ethan Gardner Web Design

A recent study has shown that a half-second increase in download time can result in a 20% loss of traffic. With so much competition in the marketplace, it is becoming increasingly more important to optimize website content.

Website optimization is an up-and-coming field and is a natural fit for someone with front-end development experience. Over the next series of posts, I will examine ways to improve the performance of websites in terms of speed, usability, and on-page SEO.

Peregrine Falcon

Title Tags

Meaningful title tags are just as important to humans as they are to search engines. Well-crafted page titles benefit the user by giving information about the page content on the search engine results pages (SERPs). Page titles should preferably contain at least two of these three components: the site URL, the company name, and an overview of the content be unique for each page on a site.

  • Good Title Text:

    Amazon.com: Kindle: Amazon’s Wireless Reading Device: Kindle Store

  • Bad Title Text:

    Apple

Keep in mind that search engines place limits of about 65 characters for page titles on the SERPs, so it best to use that as a guideline when writing.

Relevant content

Readers on the web have a short attention span, so it is best to keep copy short and concise. Copy that is to-the-point will not only be more relevant to human visitors, but it will also help earn high placement in long-tail search results, the most qualified and targeted traffic a search engine will send to your site. Don’t be afraid to use images, headings, and bullets, as this helps make content scannable and allows the user to information more quickly.

Descriptive Anchor Text

Search engines weigh link text more heavily than they do for regular paragraph text, so it makes sense to use descriptive text here as well. Any time “click here” is used for anchor text is a wasted opportunity.

I’m not an Internet historian, but I would imagine “click here” got started because someone in the marketing department thought the user needed a call to action. Calls to action are a good thing, however, “click here” doesn’t describe the link contents and loses all sense of context when printed. “Click here” also gives no benefit for search engine since it is competing with 1.4 billion results pages any time it is used.

  • Good Anchor Text:

    The best values in LCD and plasma TVs

  • Bad Anchor Text:

    Click here

Proper Use of Headings, Strong, and Em Elements

Headings (h1–h6), strong, and em tags are all elements that are given greater importance by the search engines. From a user standpoint, they help to create a visual hierarchy and focus attention on the more important pieces of a work.

Generally, the h1 element should only be used once per page, the h2 element should be used three times or less, and h3–h6 should comprise the subheadings, pull quotes and other featured content areas. I have seen people wrap their whole page in a heading tag. Do not do this! It can actually do more harm than good.

Strong and em elements are a little different since they are meant to display inline with other text and should be used on a discretionary basis. It is interesting to note that screen readers do not emphasize the strong or em tag, but the search engines do take these elements into account.

Use Image Replacement Techniques for Graphic Headings

Most text on a page should use a web-safe font, but some instances dictate the use of a different typeface for headings, tag lines, slogans, and logos. In the past, many people have just inserted a sourced image, which can be detrimental to page performance and accessibility.

Film canister

In cases that require a non-safe typeface, the best solution is to use an image replacement technique so the text remains accessible to users and easily-interpreted by search engines. There are three techniques that I suggest depending on the application.

Facelift Image Replacement (FLIR):

This uses a combination of PHP and Javascript to render a font and replace a block of text with an image file.

  • Pros:

    Requires no additional software. Works over multi-colored, gradient, or textured backgrounds. Can degrade gracefully with images off through use of the detect images plugin.

  • Cons:

    Requires Javascript. Causes a brief flicker while the text is being replaced with an image. Only for use with PHP sites. Can’t do hover states if the image is a link.

Scalable Inman Flash Replacement (sIFR)

A replacement technique that embeds a typeface in a .swf file and writes text dynamically using Javascript. You used to need Flash to do this, but now there is a free tool to convert fonts to Flash.

  • Pros:

    Degrades gracefully with images and/or Javascript turned off. Can have a hover state for links. Doesn’t break when text is resized in IE6 and below.

  • Cons:

    Requires Javascript and Flash Player plugin. Text blocks show up blank until the rest of the page is done loading. Only works on solid color backgrounds.

CSS Image Replacement

There are many different techniques for CSS image replacement. The technique I am detailing is the Dave Shea enhancement of the Leahy/Langridge method.

  • Pros:

    Works with images off. No flicker or delayed loading. Images in the CSS files can be made into a sprite resulting in reduced load on the client and server. Doesn’t rely on Javascript.

  • Cons:

    No hover state if the image is a link. Only works on solid color backgrounds. Amount of text is limited to what can be covered up by the image. Can be time consuming if there are a lot of text that need to be replaced.

Use Alt Text for Images

You can’t have valid markup without using alt text for images, so the reasons why people skip this step are completely lost on me. The alt attribute improves accessibility by adding an alternate description for people who use screen readers or browse with images turned off.

Adding alt text for images is also a great time to get more content in front of search engines. Search engines have a voracious appetite for content, and since image search is the second fastest growing forms of vertical search on the net, it is a win-win scenario for the site owner. Using carefully crafted alt text can drive large amounts of traffic to a site which has huge potential for conversions.

Conclusion

Though the performance enhancements are typically more measurable for larger sites, anyone can benefit from these techniques. In the subsequent articles, I will look at more client-side optimizations as well as some techniques on the server, and finish it all off with a free PDF checklist for you to keep track of your own optimizations.

Other Reading