Web Developer's Guide: How to Speed Up Your Website

By Vincent Wright

There was a time way back in this author's career when making web sites as fast as possible was almost as high a priority as making them look good. In today's Internet, the mantra is to make a web site as flashy as possible. As designers and developers, we tend to forget that there are a lot of people out there that still use dial-up or browse on slow Internet connections. It is easy to sit at home or work on a broadband connection and not worry about speed, but try going to a location that has slow connections or browse on a phone or portable device and you can quickly get impatient.

Google recently announced that site speed will affect page ranking. With this recent announcement, it is more important than ever to tune up the performance of your web site. What can cause speed problems and how do you fix them? That is what we hope to answer in this article.

Does Where You Host Your Site Affect SEO?

To start with, where your site is hosted can contribute to a speed boost. If you are hosting a site on your personal computer at home using a cable modem, you might not be getting the fastest bandwidth and processing speed. If you plan on having millions of hits per month, you might want to choose a hosting provider who can deliver. Let us look at a few options that are provided with hosting companies.

First, there is shared hosting. With Shared hosting your site is hosted on a server with many other sites. How many sites? That depends on the hosting company. You might want to ask your hosting provider how many sites they limit to a server and ask for the server specs. Some hosting providers will provide this information to you.

Another option would be dedicated hosting. Dedicated hosting provides a dedicated server for your web site. Some web hosting companies allow you to have complete control over the OS and you may even be able to use remote desktop functions to login to the server. With dedicated hosting, you may also host multiple web sites on one server. One other thing to keep in mind with dedicated hosting is that most hosting companies use virtual servers to host dedicated servers. Now it comes back to the question above, how many virtual servers are hosted on one main server. The more virtual servers, the slower the server can get.

So what do you do? One word: research. Ask your hosting provider questions about hosting options, hardware and even what backbone connections they have. Other questions you might want to ask are what type of redundancy they have and what disaster recovery procedures are in place.

How Does Database Speed Affect SEO?

If you have a dynamic web site that is database driven, you will want to make sure you are using an optimized database design. A poor database design can bring down a web site just as easily as overloaded hardware. As with the site hosting, you will want to talk to the hosting provider to see what database servers they have, what hardware they use, how many databases are stored on the database server, and what redundancy/disaster recovery procedures are in place. Caching database information can also help improve performance. There are several services and database design professionals that can help with database design and performance. If you feel that your site is slow because of the database, seek out some help from one of these professionals.

How Can I Improve My Web Site Code for SEO?

Bad code can contribute to the majority of performance problems. Writing tight HTML, JavaScript, and CSS code will speed up a web site. What are ways to write tight code? Actually, it is pretty easy. Here are a few.

Pure CSS Design

Using CSS for design instead of tables will give you cleaner HTML and smaller pages. Using tables creates more HTML markup than using CSS for design. You can save up to 50% on file size by switching to pure CSS design instead of tables.

Remove Redundant Code

Redundant code in CSS or JavaScript can make the files larger and take longer to download. Use CSS shorthand properties whenever possible. Properties in CSS cascade so you can create nested styles.

Move JavaScript and CSS to External Files

By moving JavaScript and CSS code to an external file, it will make the page load faster by making the HTML file smaller. External JavaScript and CSS files are downloaded to the client's cache once so subsequent request will be faster since the browser does not need to download the file again.

Remove White Space

It might seem trivial, but removing the white space between tags will make the files smaller and speed up the download. Your HTML code may look very pretty all nice and formatted, but it causes the file size to grow. This is the same for JavaScript and CSS too. You can use compression programs to compress these files before you upload them to your hosting provider.

Use a Content Distribution Network (CDN)

CDNs allow files to be downloaded from hosting sites closer to the user. This way the user gets the file faster. Companies like Google and Microsoft offer CDNs for jQuery and a few other libraries. You can also use CDNs to host your own JavaScript, CSS, images, or other download files.

Use Caching To Improve SEO

Caching JavaScript and CSS files was discussed earlier, but you can also specify how pages are cached. You can add tags in the header of the page to control how pages are cached. If you have pages that do not change, you can add a "never" value to the "Expires" header. You can also express when and how often pages expire. Setting the "Expires" to 0 (zero) causes the pages to expire now.

	<meta http-equiv="EXPIRES" CONTENT="Mon, 31 May 2010 12:12:12 GMT" />
	<meta http-equiv="EXPIRES" CONTENT="0" />
	<meta http-equiv="EXPIRES" CONTENT="never" />

Optimize Your Images

Images comprise the biggest bulk of web site traffic. There are several ways to optimize images. A web site without images is pretty bland. Here are a few suggestions to optimize images.

Minimize the Palette Size of GIFs

GIFs support 256 colors, but the GIF you are using may not need all 256 color slots in the palette. How can you optimize it? There are several programs to do this. You can open the image in an image editor such as Photoshop and select "Save for Web & Devices" from the menu. You can then play with the palette size of the GIF. You can use a free Windows program like paint.net to something similar. The program does not matter as long as you can easily change the number of colors and see the results.

Optimize JPEGs

Did you know that programs such as Photoshop put extra information in JPEG headers? Cameras also do this. That extra information is not needed to display the image so it is best to remove it. There are a few programs that can do this. One this author uses a lot is JPG Cleaner by Rainbow Software. This has a Windows GUI and a command line component. Another way to optimize JPEG images is to lower the image quality. You can do this in various image editing programs.

Convert to PNG

Convert your GIF images to PNG and use a PNG optimization program to optimize your PNGs. A good program to use is pngcrush.

Stop Scaling Images

If you have an image that is 200 pixels by 200 pixels and you want to use it in a 100 pixel by 100 pixel space, resize the image using image editing software. Do not use HTML to scale the image by setting the height and width in the img tag. Resizing the image before it is downloaded will save a lot of bandwidth.

Conclusion

The first step is to identify the problem by analyzing the site. One of the nicest tools is YSlow from Yahoo! YSlow is a plugin for Firebug (which is a plugin for Firefox). YSlow will analyze your website and give you advice on what to fix. Use the above suggestions while you design your site and then use YSlow or a similar product to analyze your site to see where you can make improvements.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •