ZENVERSE » css

CSS & JavaScript: Increase Page Load Speed by Compressing Files

Brian Flores — Wed, 23 Mar 2011 02:18:34 +0000

As a website owner, you must pay attention to how quickly your website loads. In order to obtain high speed page loads across your website, compressing your CSS and JavaScript can do just the trick. You may have tried the conventional Gzip compression tools after you uploaded your files to your server, but you should also consider these tools that offer you better compression rates before you actually upload your files. This provides you with the convenience of uploading your heavy CSS and JavaScript files in a refined and compressed rate.

Do you really need to compress your files?

If you want to check out if your website needs loading improvement, the Site Load Tool offers you such convenience by monitoring the response rate of your website. Just paste your URL in the online tool interface provided so you can really check out if you need to compress your website’s files. Once you’re done with that, below are some of the top tools you should check out to compress your files.

Tools for Compressing Your Files

1. JS Compressor – Source code can contain characters that are not needed. These characters, primarily new line, comments, white space and so much more, add up to the file size. This tool removes these characters, giving you that boost in loading speed.

2. Packer – A very simple compression tool, paste your code in and the tool automatically compresses your source code for optimal performance.

3. Google Closure Compiler – This compiler efficiently condenses your code as well as checks for syntax errors and others that may hinder streamlined performance.

4. YUI Compressor – This compressor by Yahoo! integrates effective source code compression to provide you the needed improvement for your JavaScript files.

5. JSMin – Notable for reducing file size in half, this tool removes characters that are not necessary, increasing the loading speed for your files.

6. Minify – This three-in-one compressor that combines a “minifying” and caching tool, is useful for compressing your JavaScript and CSS files in order to increase page load speed.

7. SquishIt – This streamlined compression tool conveniently combines and compresses your JavaScript and CSS files.

With these important tools at hand, you can surely increase your page load speed, providing you with the convenience of easy access to your website. With this in mind, you’ll have a much better opportunity to increase your visitor traffic since visitors will not have to wait as long for the great content you have for them! So, always try to improve your page speed if you want your website to go a long way in the hustle and bustle of the internet.

Preload Images using CSS – For Smooth & Instant Rollover Effect

Zen — Tue, 30 Jun 2009 11:33:30 +0000

To improve your website’s design or user experience, you might need to preload some images for smooth hover or rollover. Instead of using javascript to preload the images, we can do that using CSS.

1. A container that hold the images to be preloaded

The HTML :

^?View Code HTML

....






...
...

The CSS:

^?View Code CSS

.preload {
position:absolute;
top:0px;
left:0px;
width:1px;
height:1px;
visibility:hidden;
overflow:hidden;
}

EXPLAINATION

We place the container after and assign an absolute position to it because usually there will not be anything at that position.
We make the container 1 pixel width and height so that visitors cannot see it.
Besides, we need to set its overflow to hidden so that the overflow wouldn’t be visible.
Lastly, change its visibility to hidden so that the container is invisible (but it is still there and most importantly it loads)

2. Demo & Rollover Code

Demo:

The Code:

^?View Code HTML

Create a Fancy Search Box using CSS

Zen — Mon, 08 Jun 2009 09:14:39 +0000

Nowadays, most websites come with a search box to improve surfing experience. To make your website looks good, beside having a nice looking theme, you would need a fancy search box to replace the classic ones.

Let’s start

1. Design your own search box

In this example, I will use this as my search box.

2. Crop it out

Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.

result:

3. Create a blank image as submit button

The picture above explained all.

4. HTML codes for the search box

^?View Code HTML

Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.

5. CSS codes for my search box

^?View Code CSS

#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(THE_SEARCH_BOX_IMAGE);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}

Basically what’s going on :
#searchwrapper wrap the whole search box, carrying the whole search box image as its background image.
.searchbox is the text area to enter search keyword, given a transparent background and no border.
.searchbox_submit is the submit button, also given a transparent background and no border.

NOTE:
Both .searchbox and .searchbox_submit have been given an absolute position, you should modify their position, width and height according to your own search box.

That’s it.

Hope this helps!