Web Fonts
A well-known fact about non-developing designers is that they love to use not safe for web fonts. This becomes more of a problem when they specifically request that a webpage looks exactly like their design. The truth is that no matter how you slice it, web developers are limited in options when it comes to web fonts. We shouldn’t use sIFR, because that can cause serious load time problems. Even with @font-face our hands are tied because we are limited to only free fonts due to redistribution clauses in font licenses. The last resort is to use images to replace all of the good quality content that should be on the page. An alt tag only does so much for search engines so we are really shooting ourselves in the foot in the form of Search Engine Optimization by using this method. What is the purpose of producing a website that *looks good* if no one is going to see it in the first place?

Page Titles
Another problem I have faced not only with web designers, but clients in general is that they like to use their page titles as cheesy marketing devices rather than for keyword optimization. In a perfect world, I’d like to use something like Works by Jared Lunde | Design Simplified, but the reality of the matter is that I am much better off using a page title like Logo Design & Web Development | Madison, Wisconsin because those are the key phrases that I am looking to get visits from. Again, what is the purpose of making it look good if no one is visiting?

Background Images
A major pet-peeve of mine is when I see a website that doesn’t take into account screen resolution sizes or load times with their web pages. A designer should always be aware of typical screen resolution sizes and plan accordingly. I’m also a firm believer that a background doesn’t need to be elaborate or textured and in some cases it definitely shouldn’t be. While the background may look *cool* it is entirely possible that you are in fact doing harm to the experience by a) increasing load time by a lot or b) distracting from content that a visitor should be paying attention to. I mention the former a lot because it really is the most important thing you need to consider when designing a web page. You never want to direct a visitor’s attention away from where they should be looking and with proper background usage, we can actually point them in the correct direction. For instance, you’ll see a lot advertisements in magazines where something as subtle as lines in sand can be directing your eye attention to a specific phrase on the page. It is entirely possible to harness those same techniques on a website and you should definitely consider it if you are going to be using a background image.

Javascript
One final annoyance of mine is poor use of javascript effects. Not all javascript effects are bad, in fact if used correctly they are amazing and can add a real wow-factor to the UI. Some designers just don’t know how to use it correctly, though. I’ve been on a few projects where a substantial amount of good information is hidden from a user’s view for the sole purpose of using javascript fade ins/outs. The last thing we want to do is hide something we need the user to see from their eye line. Another downfall of hiding information is that there is a possibility that hiding enough will actually start to harm your search rankings. Because of this (and because some users have it turned off) there absolutely needs to be a no javascript backstop on the page where ever it is used.

If you are embedding more than two javascript files per document or more than one CSS file per document, sorry, but you’re doing it wrong.  It is much better to embed one 60K CSS or JS file than to embed three 20K files.  By doing so, you are making it easier for the browser to cache the files and you are reducing the number of HTTP requests your browser has to make on page load.

2. Minify javascript and css

If you are using jQuery or some other javascript framework they will have minified versions available.  Beyond that, you should only use what you need.  Do you really need every single effect that comes along with this framework?  Does this plugin really add anything to my interface?  K.I.S.S.  If you are writing your own javascript,  /packer/ is a great resource for minifying your javascript.

You should only minify your CSS file after you are done writing it (for quicker formatting on your end).  If you Google “Compress CSS” there are plenty of resources available, although CSS Drive has my favorite.  Remember to back up your CSS file beforehand, just in case a) something goes wrong or b) you plan on redesigning your pages in the future.

3. Compress your javascript/css/html files

I’ll admit, I was scared the first time I tried this.  The worst that can happen is you get a temporary 500 internal server error from your .htaccess file or php gzip compression just doesn’t work.  Not scary at all.  Also keep in mind that we’ll only want to compress plain text files such as php, css, html and javascript so as not to overload the CPU. The most important thing you’ll want to check before doing this is obviously if your server allows you to do so.  Unfortunately, different hosting companies offer different compression packages. Most, if not all, allow the basic PHP compression ob_gzhandler and a happy few allow mod_gzip and mod_deflate in Apache.

If your server uses Apache2, mod_gzip is out of the picture so we’ll use mod_deflate instead. Here is an example of basic compression with mod_deflate:

<IfModule mod_deflate.c>


SetOutputFilter DEFLATE


#We can't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
no-gzip dont-vary


#Don't compress executables
SetEnvIfNoCase Request_URI \
\.(?:exe|t?gz|zip|bz2|sit|rar)$ \
no-gzip dont-vary


#Don't compress pdf files
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary


</IfModule>


If we are able to use mod_gzip, we’ll use this:

<IfModule mod_gzip.c>


mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ #Compress plain text
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/.* #Exclude images
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


</IfModule>


The above two examples are really the easiest way to do this, since .htaccess will take care of everything automatically. If you are not allowed to implement either of the above, there is a php alternative. What you’ll want to do is create a file in your includes called gzip.php and add the following:

<?
if(isset($_SERVER['HTTP_ACCEPT_ENCODING']) && substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{
ob_start('ob_gzhandler');
}
else
{
ob_start();
}
?>


Add at the top of all of your main documents and then add the line to the bottom of each. This will compress your html. To compress your javascript files and css files there is slightly more work. You’ll want to turn each javascript file into a .php and at the top of each include:

<?
// start ob_gzhandler
include('path/to/gzip.php');


//set document type headers
header ("Content-Type: text/javascript; charset: UTF-8");


//set cache-control headers
header("Cache-Control: must-revalidate");
$addition = 60 * 60 * 24 * 365 ;
$expires = "expires: " . gmdate("D, d M Y H:i:s", time() + $addition) . " GMT";


//set expires headers to 1 year
header($expires);
?>


and again you’ll want to add the <? ob_flush(); > to the bottom of each of those documents. The above example is for javascript files, but you can use the same mold for CSS by changing Content-Type to text/css. Your embed for javascript files would then look like:

<script type="text/javascript" src="path/to/javascript.php<?='?v=' . filemtime($_SERVER['DOCUMENT_ROOT'].'/path/to/javascript.php');?>"></script>


4. Add expires headers, configure entity tags

Why do we want to do this? It is going to help the browser cache your files easier and the more files a browser caches of yours, the less HTTP requests the browser has to make. Load time will also decrease because your browser will have to download fewer files to load the page. To do this properly, simply add this to your .htaccess file:

<IfModule mod_headers.c>


#Revalidate in 1 hour
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=3600, must-revalidate"
</FilesMatch>


#Cache expires in 1 year
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
Header unset Pragma
Header unset Last-Modified
FileETag MTime Size
</FilesMatch>


#Never cache this, files are dynamic
<FilesMatch "\.(php)$">
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>


</IfModule>

Because we are setting the expiration on our javascript and css files to 1 year and we may edit them within that time frame, we’ll want to add a version number to each of them. To do this, simply change your embed code to resemble the following:

<script type="text/javascript" src="js/filename.js<?='?v='.filemtime($_SERVER['DOCUMENT_ROOT'].'/path/to/js/filename.js');?>"></script>

What the above code does is grab the file’s date of last modification (filemtime()) and appends it to the file name and what you end up with is something like this:

<script type="text/javascript" src="js/filename.js?v=1256944181"></script>

You can use this same method for your CSS files, as well. Images that are updated may require renaming depending on which browser a visitor is using.

5. Cool it with the images

This is a simple one.  Don’t be an idiot – if the image isn’t adding to the content/design or making it easier for a user to navigate the site, chances are you don’t need it.  The truth is, you can do a lot with CSS and you can make it look just as hot as you can with images. You should also try to use png’s instead of jpg’s or gif’s whenever possible. PNG’s provide the best quality in almost every situation and have generally have smaller file sizes.

6. Use CSS Sprites for background images

This is especially important for things like rounded corners and menus that require more than 1 image to complete.  You can make a full menu with hovers included in one image.  CSS Tricks has a great article on how to use CSS Sprites to your benefit. They use jpg’s which, as you now know, I am totally against. So just imagine that post including png’s and you should be all good.

This is YouTube’s master PNG file used for all background images

7. Download YSlow + Firebug or use some other free website optimization analyzer

You can download YSlow and Firebug here: http://developer.yahoo.com/yslow/

There you have it, these are some simple steps you can take to get the most out of your website.  Feel free to ask any questions in comments or if you’re one of those types, call me an idiot. To learn more about website performance and optimization, visit Yahoo Developer Network