Pressplaymedia’s Blog

A page’s loading speed is affected by 4 major things, server-side processing, client to server communication, size of data to be downloaded and rendering time.
This article will focus on the latter two – minimizing the data to be loaded and reducing browser rendering time. Here are some great tips and tricks:

1. Analyze your site’s performance

First of all use this free online tool to analyze the performance of your page. It will provide you with some performance analytics and offer advice on how to improve your page’s loading time.

Web Page Analyzer at WebsiteOptimization.com

2. Some obvious performance optimizations

These solutions are so old or obvious they are becoming overlooked by newcomers, so I thought I’d mention them upfront:

Remove anything you don’t necessarily need
The mother of all optimization – remove those silly widgets , backgrounds, cursors, scripts and content you do not actually need from your website. Observe miraculous improvement!

Use external files for reusable code
If you are using any JavaScript or CSS code on more than one page, pack that into a separate external file and include it in all of the pages that depend on them. These external files can then be cached by your browser instead of read each time for each different page that uses it.

Do not rely on public web hosts for content hosting
Public web hosts can get really bogged down, especially during high-traffic hours and can add to loading time significantly. Avoid using external hosting services for images, scripts and widgets, instead try to host as much content on your own dedicated server. If you absolutely need those, you can use source ordering to position the source code of those items further to the bottom of the page’s source code. Some widget providers (like Google) openly endorse this for better user experience.

3. Use CSS and produce valid XHTML code

Avoid nested and full-page tables
This is probably the tip that will give you the most significant boost in browser rendering time. In order to render a table correctly, browsers must usually read the complete data of the table from start to end, thus large tables with lots of data will increase the perceived loading time of a page. The biggest bottleneck is if your whole web page layout in a single full-page table, which is forcing the browser to read through your complete page before it is able to render it correctly. You can eliminate the use of tables by designing tableless layouts with CSS, or at least eliminating full-page tables and breaking up large tables into smaller ones. This will not only optimize the page loading time for web visitors, but for mobile devices and other readers as well.

Source ordered content
Source ordering the content (or SOC for short) is a very useful and at the same time simple technique involving placing more important content to the top and less important content to the bottom of the source code and then laying it out using CSS. This will ensure that useful content (e.g. text and navigation) will load and display first, leaving the less important content (ads, footers) for last. Another benefit of this technique is that pages are more accessible to non-conventional readers and it is also reported that this technique adds to a page being more optimized for search bots and even producing better rankings.

Write valid code
Having all of your HTML code valid by W3C standards will eliminate the need for browser error-correction and thus speed up rendering time. You can use the W3C validator to check your site for any code formatting errors. No need to get obsessed with this though, there will always remain a few errors (external scripts, etc), however do try to keep your code as clean and valid as possible.

4. Speed up image loading time

1. Minimize the number of images on your pages
– First of all, try to exclude from your page any images you don’t necessarily need. This is a pretty obvious tip, but many times the hardest thing to do 🙂
– Using CSS techniques like CSS sprites enables you to use only one big image which contains all of your navigation’s icons and backgrounds for example. This means only one request call must be made to the server to load a dozen of images!

2. Reduce the size of images on your pages
The most obvious ways to reduce the size of images is to reduce the actual width and height of the image files and use image compression, both methods producing smaller files for the client to download.

3. Use Height and Width tags
Specifying the width and height attributes of each image used on your page is vital in helping the browser render images faster (no need for the browser to read each image’s data and determine its size). Another benefit is that the page’s layout won’t change as the images load.

5. Compress Your Code

Just like any other data, CSS stylesheets and JavaScript code can eat up your bandwidth, especially on complex sites. Compressing and optimizing code will reduce it’s size by up to around 75%, which can be a great performance boost. However, make sure you always keep the original files archived and intact, because most compression tools are one-way solutions. These online tools will do the job in a simple and effective manner:

• CSS and JavaScript Compressor by Sergej Müller
  This compressor will reduce the size of both your CSS and JavaScript code down to 60%. It’s also extremely simple to use, just paste the code and select “basic” or “powerful” compression and it will output the optimized code, copy-paste ready.
• CSS Compressor by CSS Drive
  This nifty little utility is very simple to use and can compress your CSS files by around 30%. It gives you a bit more control on how it compresses the code.
• CSS Formatter by teenage.cz
  Similar tool to CSS Compressor, however it provides additional compression options, optimizing CSS code by up to 40%.
• PHP CSS Compressor by iBloomStudios
  If you would like to keep your CSS files untouched and compress them on the fly at server-side, this little script will do just that.
• ShrinkSafe by DojoToolkit
  This tool provides a safe way to compress your JavaScript code, based on Mozilla’s Rhino interpreter. Compresses the size by around one third of original.
• JavaScript Compressor by Creativyst
• JS Minifier by Franck Marcia
  Provides a Minimal, Conservative and Agressive option and compresses code by around 45%.

Further reading:

• Site optimization tutorial at WebMonkey
  A great tutorial covering most of the above and more, a must read!
• Ten ways to speed up the download time of your web pages at TheCodeProject
  A great tutorial expanding on the subjects in this article
• 5 Ways to speed up your site by Paul Stamatiou
  Another nice article on simple speed optimization

Thanks for reading, please leave any questions or suggestions in the comments below!