This is the second article in the article series on how to maximize your website performance. I assume that you have also read the previous article which defines the basics of performance optimization.

After optimizing the time to the first byte received the next step is to decrease the load time of your website.

3. Decreasing Load Time

The less bytes are to be transferred the better. But you may also want to check your webhost first because if the connection to your server is very slow that might be the root of the problem – not necessarily the number of bytes to be transferred.

Checking Your Server Performance

To check this you should upload a large file to your server – maybe 10 megabytes at the very least – the larger the better. You should also ensure that your own internet connection does not suffer from any problems while you are testing. All downloads and other programs (like email clients) should be shutdown prior to testing.

Please note that this test only shows the maximum speed of both your server and your own internet connection combined. If your server is connected to the network with 100 Mbps but your internet connection is just 1 Mbps you will only be able to measure 1 Mbps as the maximum speed so depending on your connections it may not make sense to measure the speed.

Now you need to have a stopwatch ready as you need to measure the time from starting the download to the download being finished. Let’s say the file you have uploaded has a size of 2 MB. You now have to divide the file size by the number of seconds it took to download. If it took 10 seconds to download the file the connection speed is something like 2MB/10 seconds = 0.2 Mbps = 200k/s.

You may also use DownTester (freeware) to measure the download speed automatically.

To measure the performance of your internet connection I recommend using SpeedTest.

If you have found out that the server speed is indeed very low compared with what you would expect check back with your webhost.

Image Optimization

Now it’s time to review the images on your page. Select “Images” > “View Image Information” in your Web Developer Toolbar after you have opened your website again in your Firefox browser.

This will open a new tab which will list all of the images on your website including information on image dimensions, URL and file size. Have a careful look at the number of total image requests – the higher the more you can optimize.

While scrolling down always have a look at the file size for each image. There is not a rule of thumb regarding the file size of an image because it depends on the file type of the image and the dimensions.

Image Types – What’s Right And What’s Wrong

I am still amazed when I see how many web developers still do not know which image file formats to use for different kinds of images. There are only three main types of images used on the web (yes, I won’t talk about SVG and other formats here) and supported by all major browsers:

• GIF
  The GIF format should never ever be used to compress photos because it has been developed for images with a maximum of 256 colors and works best with images that contains a small number of colors and especially large chunks of pixels with the same color.
  This is the optimal format for screenshots of an application and for graphics with a small number of different colors.
  When compressing GIF images you can choose the maximum number of colors. Sometimes just 16 colors or even just two may be enough however in my opinion you should not invest hours to optimize images just to gain a total 10 KB out of it.
  Supports one color to be used as a transparent color. Supports animations as well.
• JPEG
  The JPEG format (the “P” actually stands for “photographic”) has been developed for true-color images, mostly for photos. It should never be used for screenshots beause it uses far more storage capacity (and therefore load time) than required.
  No support for a transparent color, no support for animations.
• PNG
  Nowadays PNG files – although originally developed to be used online – are seldom used for normal images on a website. From my experience it does not make sense to use PNG graphics most of the time except you want to use the so-called alpha transparency feature which in contrast to the GIF transparency offers a full 256 bits channel for transparency. This means that you cannot only pick one single color that is transparent but several grey scale values which are semi-transparent. This allows for seamless integration onto any background.
  Most of the time I am only using PNG images if I need alpha transparency.
  There are currently two formats implementing animations for PNG.

Sample Images – Learning By Seeing

Just have a look at the following images to see the differences in image types and compression. You should see very clearly when not to use JPEGs and prefer GIF images instead.

Photo (bad, saved as GIF, 32K)

Photo (good, saved as JPEG, 21K)

Screenshot (good, saved as GIF, 5K)

Screenshot (bad, saved as JPEG, 15K)

Screenshot (good, saved as GIF, 5K)

Screenshot (bad, saved as JPEG (90%), 8K)

Screenshot (good, saved as GIF (8 colors), 2K)

Screenshot (bad, saved as JPEG (20%), 3K, still larger than the GIF)

Screenshot (good, saves as PNG (truecolor), 4K)

You should have seen that GIF offers good quality and still requires less bytes for certain images.

After you have optimized your images (Corel PhotoImpact offers a very cool image optimization assistant for JPEG, GIF and PNG) now it’s time to look at your CSS and JS code on the page.

Optimizing CSS and JS code

Are you using Cascading Style Sheets (CSS) and JavaScript on your page? For this optimization it does not matter whether the code is embedded on your website or has been outsourced to an external file. Just look at your CSS and JavaScript code and remove unnecessary comments first.

Now it’s time to compress your CSS and JavaScript files. There are free online services available to compress CSS and JS code. I recommend using CSSDrive to compress your CSS code and JavaScriptCompressor.com to compress your JavaScript code.

You should save the compressed code to another file than your original file otherwise you won’t be able to edit the code later on unless you are a bot of course.
Just remember that you have to repeat this process every time you modify your CSS or JS code. In a later article I will show how you can automate this process completely with PHP.

Cleaning Up The HTML Code

Now have a closer look at your HTML code. Are there large chunks of code in comments? Remove the comments that are no longer useful.

Embedded Code From External Domains

Is there any popular website that doesn’t offer embeddable content? Yes, embeddable content can be quite cool but it may also slow down the loading time of your page especially if the code snippet you have inserted into your page uses JavaScript because your browser will stop rendering the page right where the JavaScript code has been embedded until it has been executed successfully. If an external source is unavailable or very slow your page will get stuck while loading.

I even had to remove some ad server code some months ago from one of my pages because the ad server was so slow that even after one minute my page was still showing just half of the page rendered. This is not an impressive or professional view. It makes you look like an amateur.

To find out which sources are slow you only have to look at the status bar of your browser to see what is currently happening. “Waiting for ….” is an indication.

Sometimes I also experience slower load times on my page because of the Google Friend Connect Widget embedded on the sidebar to the right. You should check the code one-by-one and decide if you really need this specific widget, snippet or feature.

There are many sites that allow you to embed buttons on your own website to link to your Twitter, Facebook, LinkedIn, MySpace etc. profile and just give you a JavaScript snippet to put onto your site. You should think about using static images to upload onto your server and link to the pages manually.

This concludes the second part of the article series. The next part will focus on how to minimize the number of requests on your page. Some of the optimizations discussed in this article will be revisited to further improve the performance of your website. Click to read the next part now.