Massive Website Speed Improvement Guide

2011
Jun
07

I’ve written quite a few bits and pieces about website speed and speed optimization, but I decided I wanted to bring them all together into a website speed super article. My goal with this will be to cover as many aspects of improving website speed that I know about, along with how I utilize them.

I cover everything pretty thoroughly in this guide, but there’s always something I don’t know about yet. If you follow this list, your website should be pretty well off though. Of course, if you know anything I didn’t cover, please tell me in a comment at the end of the article. It will benefit the community, and I’ll probably come out with a part two of this guide with everything I’ve discovered after writing this.

Now, onto the list. If you’re ready, read on! Be sure you’re prepared though, it’s about six pages of awesome tips.

1) Use external CSS and Javascript files

Using external CSS and Javascript files usually allows for better browser caching. The trade off then is more requests being sent to your server on the initial load of a web page, compared to having the CSS or Javascript inline with the document. Though once everything is cached from the initial load, you will have less requests to the server, and a smaller HTML file size because it won’t have any inline styles or Javascript.

To help on the initial load time, you should consider merging CSS and Javascript files, which will limit the number of requests sent to the server. We detail just how to do that in steps 3 and 5.

2) Neaten up your CSS files

CSS files are often overlooked, and while optimizing them may not net you a ton of extra speed, with how easy it is to optimize them, you shouldn’t be skipping it. The most common problems with CSS files are unneeded line breaks, tabs, spaces, and trailing semi-colons. So how much size you take off your CSS file will depend on how efficiently you code to begin with.

You should try to turn something like this:

#menu-content {
	list-style: none;
}
#menu-content li {
	float: left;
	display: inline;
	margin: 13px;
}
#menu-content a {
	padding: 13px 10px 12px 10px;
	height: 100px;
	color: #fff;
	text-decoration: none;
}

Into something like this:

#menu-content{list-style:none}
#menu-content li{float:left;display:inline; margin:13px}
#menu-content a{
padding:13px 10px 12px 10px;
height: 100px;
color:#fff;
text-decoration:none
}

My personal preference is to have any style set with three or less styles on one line. In addition to that, you can remove spaces after colons, the last semi-colon in each style set, tabbed elements, and even line breaks in between style sets. What you personally do will depend a little on your preference, but I find these optimizations still keep things pretty readable.

You should also use CSS shorthand techniques whenever possible. That means instead of having something like this:

padding-top:5px
padding-left:10px
padding-right:20px
padding-bottom:15px

You should have:

padding:5px 20px 15px 10px

Here is a nice article on CSS shorthand techniques. Also, on any of the W3 Schools pages, you will generally find information on shorthand techniques, such as on the Margins page.

If you would like to automate the CSS optimization process pretty accurately (including the shorthand techniques), I recommend CleanCSS . Although, if you can code your stylesheet like this to begin with, that will always be the most accurate.

3) Merge any stylesheets you can

If you have several separate stylesheets that you’re using, merging them all together will mean less requests to your server when a page loads. If you need to separate them within a file, you can use large, commented “banners” to make the divisions more noticeable. This will add a little bit of size to the file, but it will still be an improvement over loading multiple files each time the page loads

Here is a large “banner” I often use in my stylesheets:

/*-----------------------------*/
/*-------------Section Title------------*/
/*-----------------------------*/

Of course, sometimes you have separate stylesheets for things like Internet Explorer, with their own call to load only for IE. Those you shouldn’t merge, or they will load with all of your other styles. Unless for some reason you have multiple stylesheets loading for IE, then you can merge all of those.

If you’re using WordPress with plugins, they may be loading stylesheets on their own. You can go through a long process to stop them from loading and put the styles in your own stylesheet, but that method will have to be redone every time you update the plugin. So instead, I recommend the WP Minify plugin. This plugin also works for merging Javascript files from WordPress plugins, as detailed below.

4) Use minimized Javascript files

If you’re working with Javascript (.js) files, you should look for a minimized version from the author. Usually minimized files end in .min.js. You should especially consider this for large libraries like jQuery, MooTools, and jQuery UI.

5) Merge your Javascript files

Just like with CSS, merging your Javascript files keeps the server from handling extra requests for multiple files. There is a handy service for merging all of the Javascript files on an existing website, called JMerge. If you would rather do it manually, it’s usually as easy as copying and pasting each of your Javascript files into a single file.

If you are running a WordPress blog with plugins, you may not have access to some of the files being loaded by them. To merge Javascript files in WordPress, again I recommend the WP Minify plugin.

6) Load Javascript files in the footer, or tell them to load last

Whenever possible, you should load any Javascript files from the bottom of your website. This is because whenever a browser comes to a Javascript file, it quits loading any other elements of the page. Normally, a browser will download a couple elements at the same time (such as two images), but that is not true with Javascript files. So putting as many of them at the bottom of the page as you can will allow your other elements to load up faster first.

Another technique to tell a browser to wait to load a Javascript file is the defer attribute. This can be used if, for some reason, you can’t take a Javascript file out of the header, or don’t want to. Not that FireFox does not support this attribute, and Internet Explorer has marginal support for it. So whenever possible just put your Javascript in the footer.

To use the defer attribute, simply add it to an existing script tag, like below.

<script type="text/javascript" defer="defer" src="http://www.example.com/js/somestuff.js></script>

Credit goes to this blog and article for finally laying the defer attribute out for me in a super simple manner: Using SCRIPT’s defer attribute

7) Compress images, or replace them with CSS

I don’t (yet) have any handy tools that will automatically compress images to an acceptable level without hurting their quality too noticeably, but that doesn’t mean it shouldn’t be done. This is especially true on gallery pages, or on websites with a lot of images as part of the layout.

I recommend opening your photo/image editing software of choice, and just playing around with the quality settings until you find a happy medium between quality and file size. For .jpg files this is usually around “High” quality, or 60. For .png files and .gif files, you can play around with the amount of colors included in each one (depending on the type of .png you’re using). This can sometimes reduce the file size more.

If you do have a website that has a lot of images as part of the layout, you should consider replacing as many of them as you can with CSS styles. The most common thing I see images used for that can usually be replaced with CSS, are simple menu rollovers.

Here is a simple menu with rollovers guide (they add an image at the end, but that can be avoided):
http://www.ssi-developer.net/css/menu-rollover-effect.shtml

And here is a more advanced menu with rollovers guide:
http://www.devinrolsen.com/pure-css-vertical-menu/

With CSS3 making its appearance, you have even more options with avoiding images. One of the big ones is with rounded corners.

Using the CSS Portal Round Corner Generator and the Border-Radius.htc file, you can get round corners in nearly every browser without using any images.

Another thing worth trying is gradients with the CSS Gradient Generator, which works in all of the latest browser versions for each browser, only requiring images for older ones and all Internet Explorer versions.

8) Make CSS image sprites

Chances are you’re using some images either way. So, consider using CSS image sprites. The basic idea is to combine several images into one file. Generally background or rollover images, something you have set as a background for a div or another element like it. Then, you position the background in each element using the background-position CSS variable, to make sure the correct background is shown from the file. This limits the number of requests made to your server, which can speed up load times.

It could be rather confusing to setup manually, so I recommend using SpriteMe. It puts relevant images together for you, gives you the combined image file, and what background position values to set to each of the affected elements. It’s very easy to use and makes this relatively quick.

9) Enable Gzip compression

If your server supports it, I recommend enabling Gzip compression. This is done through your .htacess file. If you don’t know what a .htaccess file is, it’s more or less a file on your hosting server that tells your server certain things to do (you can get more detailed info on the Wikipedia page for .htaccess). If you don’t know if you have one or how to get to it, ask your hosting provider, or I may possibly be able to help you in the comments below.

To enable compression, first create a backup of your current .htaccess file, and then open the non-backup in a text editor. Then, paste the following lines of code at the bottom of your .htaccess file (don’t overwrite anything that’s already in the file).

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>

After that, upload your .htaccess file back to your server. Now almost every type of eligible file served through your server will be compressed. You can test that your compression is working by using the Gzip compression testing tool.

10) Set cache expires headers

If you’ve been following this guide from the top, you now have all of these great optimized files. Now you need to leverage browser caching. Browser caching and expires headers tell browsers what types files from your website it should store, and for how long. This means if someone visits a page multiple times, or visits different pages with similar elements, instead of loading them from your server each time, the browser will load them from itself. This makes things a lot faster, and can even save you bandwidth each month.

To setup expires headers, you will again need access your .htaccess file. As always, create a backup of your file, and then past the following code into the non-backup version.

# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
ExpiresDefault "access plus 1 years"
</FilesMatch>
# 2 MONTHS
<FilesMatch "\.(jpg|jpeg|png|gif|swf|xml|txt|css|js|html|htm|php)$">
Header set Cache-Control "max-age=4838400, public"
ExpiresDefault "access plus 2 months"
</FilesMatch>

You can create new sections with different amounts of time if you wish. In each element, on the FilesMatch line, you have a list of all the file extensions for that length of time. Under it, you have two lines the define the length of time. The second line defines the length of time in seconds, and the third line defines it using the function “access plus LENGTH OF TIME.” For example, you can set it to 604800 seconds, and then “access plus 1 week” to set the expiration time to one week.

The minimum amount of time I see recommended by speed testing services is usually one week, though really you won’t hurt anything if you set it to shorter than a week. It’s usually best to set each file type to a length of time based on how often you update them, if you want to be extra safe. However, I have never had any problems with the settings above when I update something other than images or css styles. All it takes to get the new cache files is a fresh visit to the website, so even that isn’t too bad.

11) Disable ETags

From reading around different places, it is my understanding that ETags can and should be disabled if you aren’t explicitly using them for something. This could be false, but I have them disabled without any problems. ETags, according to Wikipedia, are used for cache validation. From what I gather, this is either no longer needed because it is outdated, or because I use Expires Headers, but if someone can enlighten me on this, I would appreciate it. I haven’t been able to find much about ETags other than things telling me to disable them if I’m not using them.

With that being said, in order to disable them, you will need to add the following lines to your .htaccess file.

Header unset ETag
FileETag None

12) Get a Content Delivery Network (CDN), or take advantage of ones you can

Unless you’re serving up hundreds of thousands of hits every month from around the world, you probably don’t -need- a Content Delivery Network. Really you probably won’t want to pay for one because you’ll see a marginal performance increase in any other situation. At least, that used to be my mentality. I recently came across a service called CloudFlare. It’s not a CDN in a traditional sense, but it is free, and it does nearly the same thing. In addition to acting as a CDN, it also provides another layer of security between you and any malicious visitors. So I highly recommend you check it out.

My explanation won’t do justice, so I recommend you go to their website and watch their videos. But, what CloudFlare does is cache your website on their servers, and then deliver your website to visitors from that cache. This allows your website to exist at different points around the world, on different servers, ensuring the fastest delivery possible to your visitors depending on where they are. It also means it won’t be your server on the receiving end of any attacks. From my experience, changes done to your website are instantly picked up by CloudFlare, so there isn’t any delay while their cache updates or anything like that.

This is definitely an amazing service, given I’ve seen CDNs that cost hundreds of dollars per month. While I don’t believe this counts as a technical CDN, it’s certainly just as good, if not better, given the free price tag.

Another CDN related recommendation is to load all of your Javascript-related libraries (like jQuery) from the Google Libraries API. By loading these files from Google, you not only get the advantages of parallel downloading from using another domain besides your own, but you will also take advantage of Google’s CDN. So it will vastly improve your load times of these files.

13) Checking your work

If you’re like me, you probably want hard evidence that what you’re doing is working. To test out most of what I’ve shown you in this guide, I use WebPageTest.org, and Google Page Speed. It’s also important to note that if you’re using CloudFlare, these tests won’t show you as using a CDN to deliver your content (from my experiences anyway). That doesn’t mean CloudFlare isn’t working, it just means CloudFlare isn’t acting as a traditional CDN to these services, so they aren’t picking it up.

You can also download Google Page Speed for FireFox or Google Chrome, if browser extensions are more your thing.

That’s everything! I hope you enjoyed this article and found the techniques in it useful. What things do you do to optimize your website, and did we miss something? Tell is in the comments, we want to hear!

Also, subscribe to our RSS feed to keep up to date with website optimization tips and tricks.

CTVVNR7S9ZJZ

Did you enjoy this article? Subscribe to our RSS feed, bookmark this post for later, and share it with your friends! Use these handy buttons...
RSS Feed Digg Reddit StumbleUpon Mixx Technorati Delicious Facebook Twitter ShareThis

About the Author



Visit Preston Dvorak's Website Follow Preston Dvorak on Twitter
Preston Dvorak

I've been working on website design and development since I was 12, and professionally for two years now. I continually work on learning the newest techniques and standards for web development, and enjoy the challenges that each website brings. This blog is my way of giving back to the community while sharing my ideas and knowledge that I pick up along the way. I hope to continue to improve on the articles I write and the topics I cover. Thank you for reading!

Posted in in Coding Tutorials, General Tips & Information, Search Engine Optimization

Want to be a guest poster on our blog? Find out how to submit your article and reap the benefits.

Related Posts

Move in chronological order instead...
  • http://dezayo.com/ http://dezayo.com/

    Thanks. It was interesting and helpful to read this article.

  • kavitha

    Its very useful to get better idea about Javascript and css.Thankyou for this post