Do you plan on being Dugg or Slashdotted? Are you on a crappy shared server that can’t handle the load your website brings? Are the majority of your visitors using dial-up? Then you sound like the perfect candidate for some website optimizations. Optimizing your website is a really easy process, and some minor changes can go a long way.
The main focus of this article will be things you can do as the webmaster. These optimizations will be applied directly to the items you have access to, such as the HTML files. Sure you could do some really complex optimizations with Apache, but unless you’re the server administrator, you most likely won’t have access to Apache’s configuration files. And besides, it’s always better to start with the basics and if things still aren’t performing correctly, then do the advanced stuff.
Now keep in mind, the following optimizations will allow you to keep your website looking just as it does now. The only difference is your server will be using less resources. It should also be noted that the majority of the following optimizations focus on using less bandwidth. By using less bandwidth, your website visitors will spend less time pulling information from your server, causing the server to do less work.
Using CSS Correctly
One of the biggest optimizations you can do to a website is to start using CSS. If you’re already using CSS, keep using it. Don’t get lazy and start using the HTML attribute style=”" or direct HTML style commands such as color=”". However, just using CSS isn’t enough. You have to use CSS correctly.
I’d say a large number of people using CSS aren’t doing it correctly. They type their CSS styles directly into their HTML files in a similar fashion to this:
<style type="text/css" media="screen"> .class { color: #000; } </style>
This completely takes away the main advantage to CSS, caching. Since the CSS is physically a part of that page, having your CSS information directly in the <head> section of your website causes browsers to download that CSS every time they request a page. What you need to do is put all the CSS in its own file. This way a browser only has to download your CSS information once, so it can cache it, and then it uses that CSS file across all the pages of your site. Not only does this reduce the amount of data downloaded from your server, but it’s a lot easier to maintain CSS when it’s in one central location.
Now that you know you have to put your CSS in its own file, let me show you how to do it. First things first, creating your CSS file. All you have to do is open up a new text document in your text editor of choice, type your CSS information in the file, and save it with a .css extension. The CSS class we used early would simply look like this in a style.css file:
.class { color: #000; }
Now that your CSS file is complete, it’s time to link it to your HTML. All this requires is one line of code in the <head> section of your HTML file. Just copy this line and replace the href=”" value with the location of the CSS file:
<link rel="stylesheet" type="text/css" media="screen" href="http://location.to/style.css" />Perfect, your server will thank you.
Put Your Images in Your CSS
If your website has images as a part of its design, it’s a good idea to put them in your CSS file. I’m not talking about images that appear once on your site; I’m talking about the images that are on almost every page of your site. Take for example my header image. That image appears on every page of my site, and would be the perfect candidate to be placed in a CSS file. Placing the image in your CSS file has the same effect as the CSS file itself. Your visitors’ browsers will cache the image, saving download time and server work.
Now there are several methods to displaying a CSS background image. I can’t tell you exactly which one to use, but I can give you some ideas on when to use what method. Technically there is no right or wrong way, it’s just a matter of what you think is correct.
The first method is a class with nothing in it but the image. This works well for areas where there is a large section of just an image. For example, my header image is done with just the CSS class and nothing in the actual <div>. To pull off this method, you first place your image in your CSS file, making sure you define the width and height of the image:
div#header {
width: 760px;
height: 75px;
background: url('images/header.jpg') no-repeat;
}Then just call the class from your HTML:
<div id="header"></div>
Presto, you have an image in your CSS and no one can tell the difference.
Now the other method is to place an image as the background of a class which is being used. This works well for images that are associated with elements on your website. For example, the images that are displayed next to my post information are perfect for this situation. Now the important thing to note for this method is that you apply some padding to the class, so your text shifts over and your image appears to be placed in normally. To accomplish this, you would use some CSS similar to this:
div#content .item .date {
padding-left: 20px;
background: url('images/date.png') left center no-repeat;
}Your HTML wouldn’t change, but just to complete the picture I’ll show you the HTML for this situation:
<span class="metadata date">Fri, Feb 17, 2006 at 8:51 pm</span>
Hopefully this makes some sense now.
Saving Images for the Web
The majority of images placed on websites were never intended to be used on the internet. They were saved from Photoshop in a format that was intended to be used for print or just for local use. To place an image on the web, you have to specially save the image. This removes information that isn’t necessary and drastically cuts down the file size. Now don’t fret, this isn’t hard, and only requires a few extra moments of your time. In the end, it’s well worth it.
Now I’m going to show you how to do this in Adobe’s Photoshop. I’m not too familiar with other image editing programs, so you’re going to have to experiment with that for yourself.
In Photoshop there is a nice little option called Save for Web. This is what we will be using to reduce the image’s file size. Save for Web can be found in the File menu (shown below).
Once we select the Save for Web option, we’ll be presented with a new window.
As you may notice, there are a lot of options here. If you don’t feel like messing around with them, you can just select the image format you wish to save in from the preset drop-down. Then just save away, and the defaults should suffice.
While I don’t know everything there is to do with the Save for Web option, there are a few things I know that are worth noting. In the bottom left corner is a list of vital information regarding the image. In this list you can preview how big the resulting file will be and how long it will take to download. This comes in handy when you’re messing around with the options, so you can see exactly what effect that option has on the image. Another thing worth noting is the Image Size tab on the bottom right. Here you can resize the image without messing up the original. This is perfect for images taken from digital cameras. Just make sure you press the Apply button or the image size change won’t take.
Caching Those Queries
If you use blogging software, most likely you’re using a program which resides on your server. Most blogging applications which fit that description pull your web page out of a database as it’s requested. While this works for the majority of users, it’s not the quickest way to do it. The best possible way to serve out a page to a visitor is by having the page completely assembled before the user requests it. That way your server has everything all ready, and it’s not trying to strain itself gathering the information required to assemble the page.
Now for this to work, your blogging software has to have that feature prebuilt in. It’s not something most users can create themselves. Luckily the two major server-side blogging applications, WordPress and Movable Type, do support static pages.
While I haven’t used Movable Type since they included this feature, I do have a general idea of how Movable Type handles static pages. When creating a page in Movable Type, you have the option to make the page dynamic or static. Dynamic assembles the page as it’s created, while static pre-assembles it. Dynamic pages are useful if the page doesn’t get accessed frequently, like your archives. However, for pages like your index page, you’ll want to make sure that’s static.
WordPress is my forte, and there is reason for it. WordPress is just so easy to use, while still being feature rich. This is another one of those cases that falls into the easy category. Nine out of ten times WordPress has already done this for you. Since WordPress 2.0, WordPress automatically caches pages it feels need to be cached. No user intervention is required.
In some rare cases, WordPress has failed to set this up. To check if WordPress did the job itself, go to your wp-content folder and look for a folder entitled cache. If no folder exists under that name, go ahead and create it. Once the folder has been created, CHMOD it to 777, which will allow WordPress to write files to the folder.
Now if you still haven’t upgraded to WordPress 2.0, you’re not out of luck. There is a plugin called WP-Cache 2, which will do the same thing. The only difference with WP-Cache is you manually have to configure which pages get cached. While it’s a bit of a pain, it’s better than nothing.
Conclusions
Hopefully if you followed the tips in this article your website is running a lot smoother. If it isn’t, what you’ve just read is just the tip of the iceberg. You can go crazy optimizing your page, but most likely you’ll end up sacrificing your design. I wanted to make sure that didn’t happen.
If all else fails, you can jump ship. That’s right I mean get a better host. A better web-host such as Media Temple will have their server optimized for the maximum performance. The majority of web-hosts don’t do that, which is most likely what you’re experiencing. Having a stable webserver is essential in a good website. If visitors can’t access your pages quickly, they’ll stop coming. So, don’t cheap on what you put your website on. Optimizations only go so far.
4 Comments
This article is a big “Duh” - statement of the obvious for the oblivious.
Are you saying that if you have Wordpress 2.0, you don’t need WP-Cache?
Correct.
Ok, but others claim the opposite?
http://www.maxpower.ca/how-to-configure-wp-cache-to-abate-the-digg-effect/2006/03/08/
Post a Comment