An Overview of Optimizing Your Web Pages for Speed

Jordan Sandford - July 10, 2009

As long as the Internet has been around, long before search engines came on the scene, speed optimization was an oft-pursued goal. Whatever made the user wait the least time for a page to show on their monitors would be employed. Now, search engines are measuring load time for pages and using this metric to help determine quality. Even in the age of high speed internet, page load time is both an SEO issue and user experience (UX) issue. In addition, not all high speed connections are the same “high speed.” This difference is noticeable depending on your proximity to urban areas and internet connection type (fiber, DSL, cable, satellite, etc.)

In my first post in this series on speed optimization, I will provide some general areas where speed optimization can take place. In other posts, I will discuss some tools that can help in this effort.

I’d like to make some comments before I start. Depending on the current state of your website or web pages, making just one of these optimizations may not be apparent. Making several optimizations, however, should cause a noticeable change. It’s a good idea to fully understand these suggestions and match them to your site (consider your site’s type, size and daily/weekly traffic patterns) before implementing them, because you may actually end up slowing your site down instead of speeding it up.

General areas for speed optimization

1. Remove unnecessary HTML code (or, using techno-speak: remove unnecessary DOM elements).
   As an example, you don’t need a DIV as the only tag inside another DIV. As another example, you don’t need tags like DIV or SPAN sitting around with nothing inside them. Removing unnecessary HTML decreases “code bloat,” makes the browser display the page faster (a.k.a rendering time) and increases content-to-code ratio, which helps your SEO efforts. You want the search engines to have to sort through the least amount of code to get to your content.
2. Use the least amount of websites to serve content (a.k.a. host names).
   Examples of different host names are: www1.mysite.com, www.ebay.com, www.mysite.com, mysite.com, www.youtube.com. The benefit is that every time the browser needs to find the internet address of a new website, it takes some time. The less address look-ups, the faster the page will display. Note: This is more applicable with images than with video and other web services like Google Maps, YouTube and Twitter.
3. Move as much CSS and Javascript to external files as possible. This also helps with your content-to-code ratio and helps separate the content from the programming.
4. Use the least amount of external files as possible.
   Any time a file is requested from a website, the browser has to wait for the request to go all the way to the server and then wait for a response. In addition, there is always a bit of “meta” information about this communication that must be transmitted as well.
   Here is an example: you may have 10 different external Javascript files that are responsible for different things on your site. Consider merging them, either using an automated or manual process.
5. Optimize all files, including images, videos, PDFs and Flash files.
   Don’t forget to optimize text-based files such as CSS, Javascript, HTML and XML files by removing empty lines. Especially useful on Javascript and CSS files, “minifying” removes all unnecessary spacing. This causes the file to be the smallest possible while allowing browser to interpret the file correctly.
6. If you have a lot of media content and a lot of traffic, use specialized servers that are tuned to serve specific types of content.
   These servers are part of systems called content delivery networks, or CDNs. A well known CDN is owned by Akami Technologies, and is used by large websites such as CNN. A more likely option for an average site would be Amazon’s CloudFront (read a review of CloudFront by CMSWire.com: Amazon Launches Cheap CDN for SMB Web Publishers).
7. Even if you do not use a CDN, consider properly adjusting cache and compression settings in your website.
   Caches settings, when used properly, help the browser re-download content only when it has changed. Compression settings allow the transmission of the files to be faster, since the file will be compressed when in transfer, but uncompressed after it gets to the web browser.
8. Limit the use of HTTPS.
   HTTPS is a secure communication system used when transmitting sensitive and personally-identifiable information back and forth to websites. This is extremely important for many sites that use sensitive data and want to maintain a high level of customer trust, but serving content via HTTPS is slower than by HTTP, so make sure your site only uses HTTPS where it must.
9. Try to limit the amount of redirects needed between when a user clicks a link (or types a URL) to when they see the page.
   Redirects can cause slower load times, but many times are the only answer for various problems, including SEO issues. All redirects cause the “meta” information, mentioned in item 4 above, to be transmitted, regardless of whether any real content is transmitted. When redirects occur, especially multiple redirects, time is wasted when the browser has to wait for the real content to be transmitted.

These items do not encompass nearly all areas in which speed optimizations can take place, but they should be a good start to the concepts I will discuss some future posts.