Website Optimization Guide: Part Two

Written by Ethan Gardner Web Design

Successful websites are constantly evaluated for performance and usability. Before you start building links with other domains, you should make sure that your website is in working properly in order to get the most benefit.

In part one of our website optimization guide, we focused on front-end performance techniques. Today, we’ll look at some other optimizations that pertain more site’s overall construction and dealing with external files such as PDFs.

Missed Part One?

Be sure to read the first article on website optimization so you don’t miss anything.

Separate Content from Presentation

Separating content from presentation is the cornerstone of web standards. In lay-person’s terms, this means that pages are segmented into two different sections, the relevant text (HTML) and the visual formatting (CSS).

  • Sites that use this approach will load faster and are more meaningful to search engines since it content can be organized in an optimal fashion.
  • Standards-compliant sites are accessible to all users regardless of physical or cognitive disabilities. In a 2006 lawsuit, Target was sued for ignoring these principles.
  • Sites that separate markup from presentation will experience lower maintenance costs since articles can be reused and adjusted with minimal effort. This is especially handy when it comes time to redesign.
  • Your site is done incorrectly if you don’t use web standards! This isn’t my opinion, it is the standard spec set by the W3C, the professional organization for web development languages.
  • And many more reasons

Add Metadata

Adding metadata, especially descriptions, to your pages can really help performance in search engines. This provides an overview of the content to search engines and the user since the description shows up on the SERP. Meta keywords are less important than descriptions, but can still be beneficial if you avoid the temptation to overload a page with keywords (called keyword stuffing) and stick to 4-8 well targeted terms.

For some quick keyword ideas, it is a good idea to run the article through Google’s Keyword Tool prior to publishing.

Results from Google's Keyword Tool

Use Semantic Coding

Just as metadata can be used to provide meaning to the document content, semantic naming conventions provide additional meaning through the HTML code. This can be achieved by using things such as the title attribute on images and giving meaningful names to classes and ids.

Semantic naming allows for intuitive development, easier maintenance, and it can provide an enhanced browsing experience through microformats, a meaningful set of markup that allows the user to extract additional data from a page.

Use Friendly URL Rewriting

The way this works is to take an unfriendly URL such as http://www.example.com/index.php?p=50a and provide instruction to the server to give the URL a more user-friendly format such as http://www.example.com/contact. URL rewriting is beneficial to both humans and search engines because it is easier to read addresses that take advantage of this technique.

Many sites using a CMS will have this option available to manage URL rewriting for their pages in the admin back-end, but the same option is available through the .htaccess file in Apache in cases where the CMS won’t allow updating or it is a unique scenario such as a marketing promotion that requires special handling.

One particularly useful example is to redirect the non-www version of a site (http://example.com) to the www version (http://www.example.com) by putting the following in your .htaccess file:

#redirects non-www to www
RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]

This helps prevent any duplicate content issues if Google happens to index both www and non-www versions of the site and prevents any ensuing penalty in rankings.

Use Robots.txt to Help Guide Search Engines

Robots (aka searchbots, crawlers, or spiders) are the automated programs that search engines send out looking for content to add to their index. Robots.txt is a plain-text file located in the root folder containing instructions for search engines on which directories to crawl. This isn’t a surefire way to keep pages out of search engine’s index, but it is a helpful way to offer some guidance.

A search engine will want to crawl through every directory by default, but greater control can be obtained by creating your own file to guide a searchbot to the most relevant content. On this site, I use a robots.txt file to restrict access to CSS, Javascript, or other folders containing modules for my Joomla CMS because I’d rather have search engines look at my blog articles, site pages, uploaded documents, and images. These files can be quite limited in scope as is the case with my robots.txt, or quite extensive such as the Whitehouse.gov file. UPDATE: during the redesign that took place during the Obama administration, the Whitehouse has changed their robots.txt file. You can view the old version at Pastebin.

Create an XML site map

Where robots.txt is like a compass, an XML Sitemap is like GPS for the site architecture. Sitemaps give search engines a list of URL to crawl. Other helpful information such as the importance of a page in the site structure and how often the page is modified can also be included.

Best of all, it is super easy to generate a sitemap and then update it continually as you add more pages to the site architecture.

Optimize Documents

Sometimes it is necessary to provide a file that can be downloaded file for offline use. Search engines index many document formats so these documents can be optimized for human users and search engines just as it can with HTML content. In order to get started, you need to think of everything a document will do and what it contains.

File Format

PDF is the format of choice. The only reason you’d want to use another format is if the file contains some sort of interactivity such as embedded multimedia, transition, or is a form that can’t be replicated as a PDF.

Whatever format is used, it is best to give documents meaningful file names just as you would with images. Ideally, the name should include a keyword and be hyphenated if the file name has several words.

File Size

While many people have high speed connections, there are still people with dial-up, and not everyone is willing to download a 79MB file. Documents with large file sizes should be broken up into several parts or zipped up at the very least. If you are using a PDF, Acrobat has a “Fast Web Preview” option that should be used for anything offered online.

Metadata

Most electronic document formats will allow you to enter metadata just as you can with HTML pages. Including metadata for files posted online can help site performance in search engines, especially if you are trying to rank for content located inside of a PDF.

Adding metadata to a PDF in Scribus

Conclusion

As you can see, there are many adjustments that can be made to get your website performing better with users and search engines. In the next and final post of this series, we’ll look at some aesthetic principles, experience-driven optimizations, and provide a checklist for you to keep track of your own progress.

Other Reading