Ever since Google announced that a site’s speed would be a major factor in its ranking, I have really been paying attention to how my site performs. I guess I should have been doing it anyway, but I am the type of person that sometimes needs a kick in the butt to realize what he should be doing. Now I keep an eye on my site and constantly monitor how it’s performing. That’s the only way to stay on top of things and guarantee that your visitors have a positive experience on your site.
Many things factor in to how your site performs, including the speed of your server, the amount of traffic on your site, how your site is coded, if your site is static or dynamic, and the list goes on. If your site has not been optimized then you are really doing yourself a disservice, especially now that your page rank might rely on it.
If you have a WordPress site, there are some great plugins to help you out. I like to use WP Super Cache to get things started. It is pretty easy to set up and works exceptionally well. Plus, the customer support is top notch, so if you have any issues you can just contact the author.
If you don’t use WordPress, you can still follow some of the steps below to get your site performing at its best.
First, let’s take a look at some free tools that are available online that can analyze your site and let you know exactly where the problems lie:
Pingdom Tools
Pingdom Tools will give you a breakdown of all the files that your site needs to load to render a page, and whether or not any of them is problematic. It can also save your tests so you can compare your site’s statistics against one another on different occasions.
http://tools.pingdom.com/
Web Page Test
Web Page Test provides a similar service to Pingdom Tools, but the results are a lot more elaborate. The test takes a bit longer but it’s well worth the wait. Your site will be graded on 6 different aspects of its performance: KeepAlive Enabled, Compress Text, Compress Images, Cache Static Content, Combine CSS/JS Files and Use of CDN. Once you are graded, you will also see why your site might have failed each test.
http://www.webpagetest.org/
Firebug & YSlow
If you have a Web site and you’re not aware of Firebug, you need to become aware of it immediately. It’s an amazing developer tool for Firefox that can make your life a hell of a lot easier. It offers tools such as an element inspector, CSS editor, and process console. To get your site optimized, install YSlow from Yahoo and you will have all the tools you need to test your site and find its weaknesses.
http://getfirebug.com/
http://developer.yahoo.com/yslow/
Once you’ve tested your site and you know what the problems are, you can start to make a few changes to help increase your site’s performance, which will in turn give your visitors a better experience and show search engines that you mean business.
You probably already know these tips, but just in case you don’t, pay attention because they are the basis of how you can optimize your site:
Optimize Images for the Web
If you plan on uploading an image to your site, make sure you’re not uploading the original 5 x 7 that has a resolution of 300dpi. Why? Because it’s such a large file that it will definitely slow down your site, if not crash it. That’s why all images must be optimized for the Web. If you have Photoshop, or any image editing software, you’ll have the option to export your image for the Web.
What does that mean? Well, first of all, you should probably aim for 72dpi, which is pretty much the Web standard. That will help bring your file size down. You should also save your photos as JPGs with a quality of around 50-60%, and your graphics as GIFs with a color range dependent on the graphic itself. If your image has a transparent background which doesn’t look too good as a transparent GIF, then you might want to make it a transparent PNG. That does increase the size of the file, so keep that in mind.
If you want to really get fancy, you can put together a CSS sprite so that all of your graphics and images are merged together into one file. This brings down the number of elements that your site has to load, but it does require a bit more effort in regards to the CSS used. Here is a CSS sprite I use on bavotasan.com:
If you don’t have any desktop software to optimize your images, you can always take advantage of Yahoo’s Smush.it, which allows you to upload an image file and have it optimized and returned to you. If you have YSlow installed, then you also have Smush.it included on the tools tab.
Put CSS at the Top & JavaScript at the Bottom
Placing your CSS at the top of your site makes sense, because you want to have your elements styled before they start to render. Placing JavaScript at the bottom also makes a lot of sense because you need your elements to render before they can be manipulated by your JavaScript. This has become a standard and should always be the way these files are included in your site.
Reduce the Number of HTTP Requests
An HTTP request occurs every time your site fetches a file that is required to render the page. So every image, every JS file and pretty much every element on your Web page requires an HTTP request. That’s why CSS sprites are a great idea. They reduce the number of times your site needs to fetch an image. Another great idea is combining your CSS files and your JavaScript files into one. So grab all of your site’s CSS (you can view it using Firebug), create one file and include it in your header. Same goes for your JavaScript files, but make sure you place the JS elements in the proper order or else they won’t work, eg. jQuery needs to load before you use any actual jQuery. And be sure to stick your JS file in your footer.
If you don’t plan on making any changes to your CSS or JS, you can even minify the files to make them as small as possible. There are many online resources to do this, but you also have everything you need if you already installed Firebug and YSlow. If you take a look at http://jquery.com/, you can see the difference between the minified version (24kb) and the development version (155kb). That’s a big difference.
The Hard Stuff
This is where things start to get a little more complicated. The following tips require a bit of knowledge of coding, or at least a willingness to attempt to do some things that you might not really understand.
Configure your ETags
According to Wikipedia, an ETag, or entity tag, “is one of several mechanisms that HTTP provides for cache validation, and which allows a client to make conditional requests.” If you don’t plan on using them, which most likely you won’t, then you need to remove them completely by adding the following to your .htaccess
file.
FileETag none
If you don’t have an .htaccess
file in your site’s root directory, then create one and upload it because you’re going to have to make a few modifications to it to get your site optimized.
Add Expires Headers
Expires headers will let everyone know that certain elements can be cached by the browser so they won’t need to be reloaded every time a visitor hits your site. Static elements should have a far future expiration date and dynamic elements need to be configured according to how you plan on using them. The following will add an expiration date of one month to all your image, CSS and JS files.
# Expire images header ExpiresActive On ExpiresDefault A0 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/ico A2592000 ExpiresByType text/css A2592000 ExpiresByType text/javascript A2592000
A2592000 (60*60*24*30) is a timestamp that equals one month. Remember, if you plan on modifying any files that have been cached with a future expiration date, you need to rename them or else visitors will not see the changes until they clear their browser cache or the old files expire.
Compress Components
Compressing things always ends up making them smaller and load faster, so implementing some form of compression on your components is a must. This optimization step might not work for you if your server does not have either mod_deflate or mod_gzip installed as part of Apache. You should contact your service provider and inquire about this to find out which of the following codes you should use.
mod_deflate:
SetOutputFilter DEFLATE
mod_gzip
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Content Delivery Network
It’s a little hard to believe, but the closer your visitor is to your server’s location, the faster they will receive your site elements. That’s where a CDN can come in handy. They provide multiple server locations for your site elements that will be accessed accordingly depending on where you visitors are located. This has been known to improve your site’s response time by up to 20%. The only problem, is it might cost you an arm and a leg to get it up and running. There are many CDNs popping up that are not as expensive as others, but to tell you the truth, this might not be a viable option unless your site is really bringing in the money, which in turn would make it worth having a CDN on your side.
Conclusion
When it comes down to it, running a successful Web site requires a lot of attention to certain things that you might never have considered. Being aware of optimization tools and techniques will definitely help you improve your site’s performance. Most importantly, it will get your site ready to be indexed by Google, Yahoo and many other search engines that rely on speed as a ranking factor.