Skip to content

Want to share this article? Please use this short URL: http://1click.at/yEL6td

How To Boost The Loading Speed Of Your Website

This time I want to share my experiences with the following methods/techniques:

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

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.

compressor ebiene de 300x194 How To Boost The Loading Speed Of Your Website

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.

jsbeautifier org 300x171 How To Boost The Loading Speed Of Your Website

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 icon wink How To Boost The Loading Speed Of Your Website

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.

google page speed addon 300x66 How To Boost The Loading Speed Of Your Website

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 icon wink How To Boost The Loading Speed Of Your Website

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 icon smile How To Boost The Loading Speed Of Your Website

Have fun minifying and optimizing.

Categories: Optimization.

Tags: , , , , , , ,

Read more about Michael Pehl





Michael Pehl - info@cookielessdomain.com

Powered by Wordpress - © 2010 Michael Pehl, CookielessDomain