Four quick and easy ways to make your site load faster

1. Optimize your images

The biggest negative factor that can slow down your website page loading times is large image files. If not properly compress for web, they can be over 400 times larger in file size then they need to be!

If you simply open up your images in Adobe Photoshop or a free equivalent like GIMPshop, Windows MS Paint, Mac OSX Preview, or the awesome online tool Pixlr, you can very quickly and easily compress jpegs, gifs, and pngs into more web-friendly file sizes.

Here is a good starting point of settings for compression in Photoshop. After you have your image or PSD opened up in Photoshop, go to File->Save for Web and Devices and use these settings for a jpeg:

Photoshop save for web and devices settings for jpeg

Drag the quality slider around to the left and right (though you will very rarely ever go below 50 for quality) and make sure that the preview on the left displays an image with no noticeable artifacts or distortions.

If you notice in the bottom left, Photoshop will also estimate the file size of your jpeg, proving that this compression will postively impact your website loading times.

File size estimate (note: this is for an empty white image)

Once you are satisfied, press “Save” in the bottom right and then make sure to give your file a good descriptive name. And then repeat this process for every image you use on your site.

Congratulations! You have just dramatically improved your website performance in less then 5 minutes!

2. Compress your CSS and JS files using GZIP

Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip.

That means for every 9 out of 10 people that visit your site, you will see a size reduction of more than half! So a 100kb CSS file would be compressed down to less than 30kb – a huge difference!

3. Make fewer HTTP requests by combining files

While some people support the strange notion of creating multiple CSS files for each concern (one for layout, one for typography, one for colors, etc.), the usage of separate CSS files or the dreadful “@import” command is a huge hindrance on a web server and will slow down your page loading quite a bit.

While you don’t need to stop using your method of separate files, you do need to include them into your page differently in order to reduce page load times.

Likewise, with JavaScript files loading eight different scripts, regardless of actual file size, is a heavy weight that is unnecessary.

4. Put CSS file links at the top of the page

This is one very simple. Taking into consideration steps three and four to use GZIP and combining you files, placing your single (hopefully – but you can’t always be perfect!) CSS file in the actual <head> of the html document will give your website visitor the appearance of a page rendering progressively.

In other words, while your images, JavaScript, and Flash assets are still loading, the font, layout, and styling will almost immediately be in place as it is filled in with the larger files.