Using our performance testing tool we have tested many websites and helped our customers improve the performance of their websites. In doing so, we have employed many methods that can be used to improve website performance. Here I will present some of the most effectively utilized techniques.
Image Optimization
Make sure that you have saved your images in the correct format to optimize size. PNG is usually the best format for solid colors and JPEG is usually the best format for photos. JPEG size is dependent on quality. Find your minimum quality threshold and save your JPEG images based on the minimum quality threshold to minimize file size. Moreover, make sure that your saved image has the same size as the displayed image. If your saved image is larger you are unnecessarily using more bytes to store the image.
Server Side Compression
Gzip and Deflate are the two compression methods that are available to minimize the file size that needs to be downloaded. Web pages are usually compressed quite well by these methods. A 1 MB HTML page could easily be reduced to a 200 KB or lower size by using these compression techniques.
HTTP Requests Minimization
Each HTTP request incurs an overhead. It always amazes me to see how many websites have web pages that are referencing resources (images, stylesheets etc) that do not exist resulting in a 404 error code. Most performance testing tools will immediately uncover such HTTP requests. Combining multiple images into a single image will also reduce the number of HTTP requests. Image Maps and CSS Sprites are some of the many techniques that can be used to combine multiple images into single images.
Avoid Redirects
Redirects are sometimes a simple way to active certain tasks. However, they do incur an overhead and they should be avoided. A very common mistake made by developers is to forget to add a forward slash / to the end of a URL (e.g. http://www.verisium.com/products is used instead of http://www.verisium.com/products/). This results in an additional 301 request that increases the page response time thus degrading website performance.
JavaScript & CSS (Stylesheet) Minification
After JavaScript and CSS resources are developed they are usually packed with characters such as spaces, tabs, code comments etc. These elements are useful in making the code readable. However, they increase the size of the files that need to be downloaded. A process called minification will strip these elements that are not needed by the browser to correctly interpret these files.
Avoid Inlining JavaScript & CSS
When resources are inlined, they will be downloaded each time they are needed. On the other hand, external JavaScript and CSS files will be cached by the browser and will not be downloaded each time they are referenced.
Regular Website performance Testing & profiling
Performance testing tools are important weapons in your arsenal to test website performance and discover the source of the various bottlenecks. Performance testing tools will reveal the areas that need immediate attention.
