Performance fundamentals

Having undertaken a brief analysis of a number of small but international businesses websites in my area. I was surprised just how many simple performance mistakes had been made. With internet connections getting faster by the day there is an unforgivable pattern of inefficiency creeping into web site design.

Common mistakes

Images

• Using images for styling where CSS can be used.

• Oversized images and use of CSS to resize in the browser.

For instance, one image was 5.4MB (4152 x 2504) in size but was used in several places scaled with CSS to 710x300 and 300x180. If the designer simply resized the image to “Resize 1” it would have been a fraction of the data to transfer.

Convert image size

Original - 4152 x 2504 (5.4MB)

Resize 1 - 710 x 300 (176 kB)

Resize 2 - 300 x 180.92 (66 kB)

• Use of TIF and PNG images rather than JPG.

PNG files allow you to retain extra detail but by simply converting them to JPG format you can drastically decrease the size of the image.

Convert PNG to JPG image size

Original - 1140 x 313 (787 kB)

JPG image - 1140 x 313 (180.9 kB)

• Image heavy pages where tens of images are used per page.

Excessive Javascript

• Overly complex embedded JavaScript in the page.

• Lack of decentralised JavaScript with common functions. So rather than one JS file that can be downloaded once and cached JS files for each specific page.

Inefficient Cascading Style Sheets & HTML

• Overly complex cascading style sheets which override behaviours.

• Use of excessive tags that are not required - inflating the page size.

• Missing page resources causing unnecessary HTTP server errors.

• Over use of animation or video.

Summary

Even when our connection speeds become increasingly faster, we should still always strive to keep the content optimal. Images are by far the worst offender on websites. Taking simple steps to resize and compress each image can increase transfer speed and also reduce the load on the web server.