Many different browsers are available for free.

I made some tests with the 5 major browsers and one oldie on my Windows XP Professional machine in the office.

The terms for the different browsers are:

AMD Phenom 9650 Quad Core CPU

4GB RAM

20MBit down- / 1MBit upstream Cable internet connection

What Is Affecting The Loading Time Of A Website?

We know that many different circumstances can affect the loading time of a website. No, they are affecting the loading time.

Let’s say you are at home and your wife/husband/boyfriend… let’s just say partner/kid/parents are listening to an online radio or surfing, voip, p2p, torrents, watching a youtube clip, …

This is affecting the download stream of everyone else using the same internet connection, and it is affecting the upload stream as well.

In the office are 7-9 people working with voip, email, online research,… the server is uploading/downloading emails, connecting to our webservers, …

Summary:

Every system/program connected to the internet sending/receiving traffic (slow or fast) is affecting the loading time of a website.

But there is something else that is affecting the loading time. Your ISP (Internet Service Provider) …

The routing from your computer to the website you want to open is also a factor that counts. If there is trouble with the routing you maybe can not open the website or it is really slow.

The distance from your computer to the webserver that is serving the site you want to open is affecting the loading time, too.

If you live in Germany and you are opening a website that is getting served from a german webserver you should be able to watch it very fast.

If you live in Germany and you are opening a website in Japan that is getting served from a japanese webserver you shoul be able to… wait some more time, if you are unlucky. Maybe only 1 second, maybe more.

There are several other things that can affect the loading time. One is the browser itself.

Every browser is rendering the site and executing the javascript (if there is any, the two sites I used for testing uses JavaScript) in it’s own way with their different browser engines. If you have plugins/extensions installed that are connecting to the internet (like most of the SEO related ones) then your browser will be even slower.

You can read some more about the different browsers and their engines at this Wikipedia site.

The Test

The test itself is not spectacular. I am running 2 different sites in a “website loading time comparing” script. It is a client-side script so it uses my own bandwidth.

This script can be run in “repeat mode” and that’s what I did. Repeat the loading of those two sites 24 times.

After completion it shows me the “Winner” and the average loading time for each website.

For the test I’ve chose the following sites:

- google.de

- a site we (my trainee and me) have coded

Okay, some stuff about the sites itself. I’ve chosen google.de because it is the main search engine we use at the office… and it’s pretty fast. The Google Page Speed score is 95/100.

You all know the google start pages… I don’t need to explain it, no?

The site we have coded has:

- a jQuery slider - this one from CoDrops and modified a bit

- CSS and JavaScript combined and minified (1 CSS file and 1 JavaScript file)

- more content then the google.de start page

- all static content (CSS/JavaScript/images) served from a cookieless domain, static content is served gziped

- Google Page Speed score 98/100

Now the time has come – Showdown

The Different Browsers And The Results Of The Tests

The following browsers were used for the test:

- Mozilla Firefox 3.6.10

- Google Chrome 6.0.472.63

- Internet Explorer 8 (used in 3 different modes)

- Safari for Windows 5.0 (Build 7533.16)

- Opera 10.62

- Netscape 9.0.0.6 (our oldie in this test)

Remember the terms, they are always the same, for every browser!

Check the pictures below (click it).

Winners And Losers Of A Tiny Test

As you can see the loading time’s differ. Modern browsers (I do not call IE 8 a modern browser) are much faster (except Firefox) then the older ones.

Firefox is the slowest in rendering the site and executing the JavaScript. Not only that, when I am starting Firefox I have to wait … and wait …

Google Chrome is the fastest browser, Internet Explorer 8 in IE8 Standards Mode is second (I did not expect that) followed by Opera.

What I did not expect is that our site is faster then the Google start page.

Which browser is the fastest in your environment? Just let me know.

Google, Yahoo and Amazon made tests that has shown the importance of performance.

In short:

- Google slowed down their page for 500ms – 20% drop in traffic

- Yahoo slowed down their page for 400ms – 5-9% drop in full-page traffic (users leaving before site finished loading)

- Amazon slowed down their page for 100ms – 1% drop in sales

20% of traffic lost for Google … immense drop.

How To Optimize The Front-End To Get The Maximum Loading Speed

Front-End Optimizing is optimizing a website with different techniques to achieve the fastest possible loading speed. In this case only the Front-End counts.

The Front-End is the part of the website that is transferred and executed/rendered to the client (browser) and contains at least the following four parts:

- HTML code
- CSS code
- JavaScript code
- Image files
(optional media files like .swf, .mov, .mp3,…)

How does Front-End Performance Optimizing Work?

The different parts of the optimizing process are:

1. Common HTML Programming Tasks

- Avoid HTML errors (W3C Validation)
- Delete comments from HTML document

2. Common CSS Programming Tasks

- Avoid CSS expressions

3. Optimizing HTML

- Optimize the order of styles and scripts
- Avoid usage of tables for website design
- Avoid usage of inline styles
- Avoid usage of inline JavaScript

4. Optimizing CSS

- Remove unused CSS

5. Optimizing JavaScript

- Remove unused JavaScript

6. Minimize HTTP Requests

- Combine external CSS
- Combine external JavaScript
- Use CSS Sprites to reduce the amount of images to download

7. Compressing CSS/JavaScript/image files

- Minify combined CSS
- Minify combined JavaScript
- Optimize image file size with tools like Yahoo SmushIt

8. Reduce download size and increment number of concurrent downloads

- Serve static content (CSS/JavaScript/image files) from a cookieless domain
- Parallelize downloads across hostnames

9. Server-Side Compression and Browser Caching

- Enable compression (mod_gzip/mod_deflate on Apache web server)
- Leverage browser caching (mod_expires on Apache web server)
- Specify a Vary: Accept-Encoding header (mod_headers on Apache web server)

These are the essential parts to get a really fast loading website.

The following online tools can help you to get the best results:

Combining and Minifying CSS/JavaScript files – Scriptalizer.com

Minifying JavaScript/CSS files – compressor.ebiene.de

Compress Graphic files – Yahoo! SmushIt

Minify CSS/JavaScript and Compress Graphic files with Google Page Speed for Firebug (Firefox addon)

Another tool to check the loading time:

Compare loading speeds of websites – faster.1click.at

I removed the subdomain because of this site is non-public yet, will be public next week.

As you can see (or just try out yourself on faster.1click.at) the site I developed has more content and is much faster then the Google site.

If you need some informations about cookieless domain then visit CookielessDomain.

If you want a technical review of your website feel free to register at my XHTML-Valid-Websites Forum and post into the Review section.

Thank you for reading.

One of the problems of a WordPress blog is – the more plugins you install the worse the loading speed will get.

To prevent loss of your blog’s loading speed you can use plugins that will help you combining and minifying your CSS and JavaScript.

If you are familiar with Firebug you could check the start page of the CookielessDomain blog.

This blog is optimized using the W3 Total Cache WordPress Plugin.

I must admit that this blog does not use any fully-loaded theme, it’s using the Carrington Text theme from the Carrington Framework.

A Kwicks slider, a scroll-to-top script, the header and the footer were added to the theme and some CSS modifications were done.

Okay, anyway… what I did after installing some plugins was thinking about how to achieve a high

Google Page Speed score.

ATTENTION: BACKUP YOUR FILES/DATABASE BEFORE CHANGING ANYTHING

Using The W3 Total Cache Plugin To Boost The Loading Speed

Using the W3 Total Cache plugin, a cookieless domain (in this case cldm.cookielessdomain.de) and the ability of W3TC to store the static content (CSS/images/JavaScript) via the self-hosted FTP option were the key to get a Google Page Speed score of 93/100 for the CookielessDomain blog.

So, here is basically what I had to do.

After installing and activating (maybe changing some settings, too) all the plugins you want for you blog, you should take a look at the source code of your blog to find out which CSS files and JavaScript are getting loaded.

It could look like this (I will take another blog as example because the CookielessDomain Blog is already optimized):

I have marked the CSS and JavaScript files that are located in the header.

We have 8 CSS files and 8 JavaScript files.

We all should know that loading JavaScript files in the header are slowing down the loading process and rendering the site correctly will slow down, too.

The best solution for loading JavaScript files is putting them to the bottom of your code. Read more about this at the Yahoo Developer Network.

ATTENTION!!! If the script uses document.writeto insert part of the page’s content, do not move it from the head.

Settings In The Browser Cache Section Of The W3 Total Cache Plugin

When the W3TC plugin is installed and in it’s default state there are some settings that need to be checked.

Since the Browser Cache settings are a lot you can just take a look at the picture to see the CookielessDomain blog settings.

Summary of the Browser Cache Settings (in case the picture is too big):

Set expires header, Set cache control header and Set entity tag (eTag) activated in all 4 sections.

Enable HTTP (gzip) compression activated in General and Media & Other Files sections.

That’s it. Save changes and deploy it.

W3 Total Cache And .htaccess Files

To get things working as you need it you have to get some .htaccess files and other “Tools” installed/configured.

Head over to the Install section of the W3TC plugin.

In this section everything is described well, so you should normally get no problems. In case you have any problems you can check with Google or post your problem at the WordPress forum.

Activating Minify And The Content Delivery Network Options

Now go to your W3 Total Cache General options and activate Minify and Content Delivery Network. Choose Self-hosted / File Transfer Protocol Upload for your CDN settings.

Save changes and move on to the next step.

Combining And Minifying CSS And JavaScript Files

First we should combine all CSS files to one file and get it minified.

I will show you the W3 Total Cache page from the CookielessDomain blog where you can see the CSS files that get combined and minified. Go to the Minify option of the W3 Total Cache plugin.

You can see that I have added all 5 CSS files that my blog is loading to the W3 Total Cache Minify CSS option.

Press Save changes and follow the instructions of W3 Total Cache. It’s really easy.

Okay, now we will get a combined and minified CSS file.

In the same W3 Total Cache plugin section (Minify) you can add your JavaScript files to get them combined and minified. It’s right above the Cascading Style Sheets option.

Take a look at the next graphic.

You can see that I have added every JavaScript the CookielessDomain blog is loading that I want to be combined and minified.

Save changes and again… follow the instructions of W3 Total Cache to get one combined and minified JavaScript file.

Now that you have only one CSS and one JavaScript file, that is at the bottom of your (X)HTML code, your blog should load a lot faster now.

Preparing The Content Delivery Network

Here you can see the settings I am using for the CDN option of W3 Total Cache.

Well, before you can use the CDN option you need to insert your FTP username and password, and if a path if you need.

In my case, since I am using a subdomain of cookielessdomain.de that goes into /cldm/ of the cookielessdomain.de account and I am connecting to the FTP with the main user, I need to set the path to /cldm/.

When you inserted your FTP username, FTP password and all other settings are correct you should press Test FTP server.

If everything went OK (Test passed) you can press Save changes.

Maybe you have to play with Passive Mode and/or SSL settings, if they are supported by your host/server.

Now, look again at the picture above. You see those 2 red arrows.

After the connection from your blog to the FTP server is working you need to click on importing attachments into the Media library (1 in the picture above) and then exporting media library to CDN (2 in the picture above).

Now a popup will open and you just need to press Start. The media library files will now get exported to your CDN.

Exporting The Combined And Minified And Other Files

In my settings I have checked the following in the General CDN Options:

• Host wp-includes/ files
• Host theme files
• Host minified CSS and JS files
• Host custom files

The custom files are defined in the Advanced settings, take a look at the picture.

You can see that I have added the folder wp-content/plugins/* to get the whole plugins directory exported to the FTP Server. I did that mainly because of the SexyBookmarks plugin.

Now it’s time to export the files.

In the picture below I have marked the buttons you need to click to get all needed files exported to your FTP Server.

Click on the button Upload includes files (1) and a popup will open. Click on Start to get the wp-include files exported.

Next is Upload theme files (2), then Upload minify files(3) and the last one is Upload custom files (4).

After exporting you should click deploy and then empty all caches.

The settings in the sections Database Cache, Object Cache and User Agent Groups were not changed by me.

Testing The Loading Speed Of Your Blog

Okay, time to test everything.

For me the process went smooth and well. The loading speed increased a lot and it was worth the time I had to spend to get it working like it is now. FAST.

Google has a very nice addon for Firefox called Google Page Speed.

Once installed you have a new tab in your Firebug bar.

Okay, let’s load a small website to look at the graphics we can optimize.

We will load this site: XHTML-Valid-Websites.com

After loading the site, with Firebug enabled, head to the Page Speed tab and press Analyze Performance.

Once the analyzing is finished you will see several subitems.

As you can see the Page Speed score is 90/100. That’s pretty good but there is still something to optimize.

We will focus now on the Optimize Images subitem.

Click on the subitem to open it.

As you can see here there is only the favicon image that could be optimized. On other websites there can be more files.

Let’s take this example here.

As you see in the graphic there are several graphics that can be optimized. In some cases it is worth the work, in others not.

You have to decide if you need to optimize your images to get a higher Google Page Speed score.

For a clients website (the start page itself) I optimized every graphic.

The result is…

… a Google Page Speed score of 94/100.

I also used a cookieless domain, combining/minifying CSS/JS files and CSS sprites as you can see in the CSS code below.

.slide-umzug{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1000px;}
.slide-buerohilfe{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1250px;}
.slide-nachhilfe{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -250px;}
.slide-computerservices{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1500px;}
.slide-sprachunterricht{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -500px;}
.slide-messepersonal{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px 0px;}
.slide-renovierung{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -750px;}
.slide-uebersetzungen{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -500px;}
.slide-diverse{float:right;margin:0 0 2px 10px;background-image:url('../images/slides-250x1750.jpg');background-repeat:no-repeat;width:250px;height:250px;background-position:0px -1500px;}

Tests has shown that the site is loading in about 672ms cached (217.40 KBytes, 35 requests) and 1167ms uncached (415.75 KBytes, 35 requests).

I think this is pretty good, no?
If you have any questions do not hesitate to contact me via email.

Good luck optimizing.

• minifying CSS and JavaScript files
• combining minified CSS and JavaScript files
• using Google Page Speed Addon to get crunched images

Tools we will use are:

• http://compressor.ebiene.de for minifying CSS and JavaScript files
• Notepad++ for combining the CSS and JavaScript files
• Firefox with Firebug and Google Page Speed Addon

Ok, let’s take an easy example like this:

http://www.xhtml-valid-websites.com/demos/simple-site-with-jquery-dropdown-menu/index.html

This site uses one external CSS file, 5 images and 2 JavaScript files (jQuery 1.4.2 and the script for the menu).

When you write your CSS (at least I do) you are maybe writing like this:

body {
margin:0;
padding:0;
background:#fff;
width:100%;
height:100%;
}

And maybe you have added some comments too so the CSS file gets bloated with not needed chars.

This is where the minifier from ebiene.de comes in.

Just copy your CSS code, insert it into the window with the number 1 and press basic or powerful compress.

Now you can click select in the window with the number 3 and copy it with CTRL+C.

Put it into your CSS file, press save and you are done. Your CSS is minified.

What if you have to change something in the CSS file?

I recommend the website http://jsbeautifier.org to beautify the code. This online-tool works for JavaScript and CSS files very well.

After you are done with the changes you can minify your code again.

Now let’s presume you have more then one CSS file like this:

• reset.css
• global.css
• css3.css

The files are loaded in the order mentioned above in your html file.

Now to minify and combine these 3 CSS files you just open a text-editor (I am using Notepad++) and paste your minified reset.css code into a new file.

You can call this file like you want. E.g. you can call it css-minified.css or css-min.css.

Now your minified reset.css code is the first part in the new CSS file you just built. Copy the content of global.css and minify it with the CSS minifier at http://compressor.ebiene.de.

Append this minified CSS code to your css-minified.css (or however you called this file).

Last but not least you do the same with the content of your css3.css file. Copy, minify, append it to your new minified css file.

Save your new minified CSS file to any location. Now change the link in your html file to your new CSS file, done.

This technique can be used for JavaScript files, too. Do not mix CSS and JavaScript files

In our “template” we have 2 jQuery scripts, or let’s say jQuery 1.4.2 and the code for the menu.

Well, you can already download a minified jQuery 1.4.2 version from the jQuery homepage.

Copy the code of the minified version to a new file.

Copy the jQuery code for the menu, paste it into the window number 1, click basic or powerful compress, copy the minified code and append it to the jQuery 1.4.2 code of your new JavaScript file.

Now save the file you just built and link to it in your html file. By the way, you can also move all your inline CSS and JavaScript to the external files.

Linking to your new jQuery minified file could look like this:

<script type="text/javascript" src="js/jQuery-package-min.js"></script>

Okay, let’s go to the next part.

Using the Google Page Speed Addon for Firefox to get the optimized images.

After opening your website just start Firebug. Click on the Page Speed tab and press Analyze Performance.

Now search for Optimize images and just click on it. The following suggestions will appear.

Optimizing the following images could reduce their size by 956B (5% reduction).

    * Losslessly compressing http://www.xhtml-valid-websites.com/xhtmlvalid-favicon.jpg could save 507B (26% reduction). See optimized version or Save as.
    * Losslessly compressing http://www.xhtml-valid-websites.com/demos/simple-site-with-jquery-dropdown-menu/images/pattern-64x25... could save 449B (3% reduction). See optimized version or Save as.

As you can see Google is doing the job of crunching the images for you. Now just click on “Save as”, rename the files (Google does not use your original file names) and use them.
Next time you use the Google Page Speed Addon Google will not tell you to optimize your images

I know, if you have a lot of images, that it can take some time (and maybe it gets annoying)… but I think it’s worth the time you have to spend.

Now all your CSS, JavaScript and image file should be moved to a cookieless domain and your website will load even more faster

Have fun minifying and optimizing.

This form does not have any graphics, just pure HTML. And of course some javascript (in this case jQuery).

What you normally do when you create a website is putting all files into folders. So your structure could look like this:

• The website’s main folder including the index.html and maybe the other .html files (or .php, .asp, .aspx,…)
• A folder for the graphics, let us say the folder is named images
• A folder for the CSS (Cascading Style Sheets) files called css
• A folder for the JavaScript files called js

All files that are needed for your website are located in those folders, they will be all loaded from this location.

Let’s take a look at the static content (CSS, JavaScript and image files).

Static content, such as images, JS and CSS files, don’t need to be accompanied by cookies, as there is no user interaction with these resources.

Click here for more information.

If you have your website and all files (JS, CSS and images) in one main folder, as described in my example above, every file you download to your browser will be accompanied by a cookie.

The result is that you are bloating your request headers with useless code.

Cookies are small, yes. But the useless code is slowing down the loading speed of a website.

Even requests for cached components that rely on the Last-Modified header are bloated with the cookie.

When the server sets a cookie, that cookie is attached to all future requests to the same domain (and often all subdomains as well).

So just doing a subdomain (like http://static.yourdomain.com) and moving all static content in there will not help.

Let’s take a look at my example again. Click here to open the form.

If you are familiar with Firebug, check the request headers for the files that are getting downloaded.

Compression of files is enabled on this server, just to let you know.

Google has some nice explanations, read them here.

Okay, let’s get a little bit more technical. Now we will use Firefox and the Firebug addon to take a look at the request-headers.

When you open the formular you are downloading 69KB to your computer (compressed by the webserver with gzip). The unpacked formular (html, 1 image, css files and javascript files) is 256KB. As you can see even enabling compression does speed up your website a lot.

This graphic shows you that the form website is making 13 requests.

Now let’s take a look at the requests from the file jquery-1.4.1.min.js in the next graphic.

I have marked the section with the cookie code.

This cookie code is getting downloaded with every file you download with this “technique”, which actually is none.

Okay, but how can we prevent those kind of requests?

This is where the cookieless domain, and some tweaking of the webserver (in this case an Apache), comes in!

Now, let’s just look at the main topic – the cookieless domain and it’s benefits.

All your static content should be served from a cookieless domain. Images, CSS (Cascading Style Sheets) files and JavaScript files. Flash files can be served from a cookieless domain, too.

Besides that, combining CSS and JavaScript files (and minifying them) will be covered in another post soon.

These techniques, together with optimized graphics, can also save a lot of bloated request-headers (depending on how many graphic files you have in your website).

Now let us just move all the JavaScript files that I use in the example form to the cookieless domain.

The files that we will now copy are:

jquery-1.4.1.min.js - 70KB
 formToWizard.js - 3KB
 jquery.validationEngine-en.js - 3KB
 jquery.validationEngine.js - 24KB
 jquery.pageslide.js - 7KB
 autoresize.jquery.js - 4KB
 jquery.timepicker.js - 9KB
ui.core.js - 14KB
 ui.datepicker.js - 69KB

We will copy the files from labs.cookielessdomain.com to a subdomain on cookielessdomain.de (this is our cookieless domain, the server is located in germany at hetzner.de).

9 files – 198KB uncompressed. Now let’s take a look at the requests.

As you can see we are still requesting 13 files, but there is difference.

The 9 JavaScript files are served from another domain, cldm.cookielessdomain.de instead of labs.cookielessdomain.com.

What is the difference you may ask? Take a look at the next graphic.

As you can see there is no cookie code anymore. No red marked cookie section, because there is none.

We saved 9 bloated requests.

Imagine you have 3 CSS files, 5 JavaScript files and about 20 graphics.

You would save 28 bloated requests and your website will load faster.

Another “benefit” is that the big G (Google) recommends serving static content from a cookieless domain. So you could say that this technique can improve your ranking, too.

Google says:

Read the Google Page Speed article