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.
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:
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.
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.
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
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
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.
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.