7 Ways to Boost Your Page Load Time Using CSS and JavaScript

Posted in Tools, Web Design3 years ago • Written by 16 Comments

Everybody has less and less time today for surfing, chatting, spending time on social media or whatever they like to do on the internet. Slow loading speeds disappeared a long time ago and we don’t want to see blogs and web pages taking too much out of our already limited time. You can find many tools on the internet to help you improve your web pages’ loading speed and I took a look at many of them, so I am able to recommend you the following ones, which mainly work by eliminating the poorly written code.

1. Site Load Test

This one mainly works like a validator, but tells you more about each error you have. Although it has quite a few errors, 1stwebdesigner.com got a general loading time of 1.88 seconds, which is very good according to the standards, which say that a page should load within a maximum of four seconds.

Site Load Test will not do wonders for you, but will help you get rid of those tiny little errors you didn’t think about. It also helps you find errors regarding uploaded files, websites’ size and total objects to load, not only CSS and JavaScript mistakes you’ve made while coding. Note that this is not an application that will automatically remove the errors – you will have to do it yourself.

2. Packer

If you are a JavaScript developer or you want to use a JavaScript code in your webpage, Packer is what you need. It will not create the code for you, but it will compress it. This tools works very fast and very well. You only need to copy your original code into the top field and then click on “Pack”. Within a few seconds you will get the new code (which basically does the same as the original one), but in a different state. The compressed code will not generate errors and, as you all know, less code is less size and therefore faster loading time.

3. SquishIt 

SquishIt is a GitHub trademark and helps you a lot as well. When you have both CSS and JavaScript in your website (which is pretty much most of the time you code), this tool will “bundle” both of them into one file, making the number of files that need to load smaller. Although this tool might be a bit difficult to use due to the poor interface, once you play with it once or twice you will see it actually can be useful.

SquishIt can help with much more thanks to the Google Group and the discussion forum it features. You can talk about way more than CSS and JavaScript there, ask for advice and opinions and then code properly.

4. Minify 

Minify Logo and Description

This one is a PHP5 application that helps you with your CSS and JavaScript. What is does is that it combines several CSS and JavaScript files removing white space and comments and exports them with gzip encoding and optimal client-side cache headers.

Basically, if you have 5 JavaScript files, they will all become one after you use Minify. The app is easy to use, eliminates HTTP requests and reduces CSS/JavaScript bandwidth by 70%.

The app is integrated in other projects as well. If you run WordPress, there are two plugins which enjoy the same features: WP Minify and W3 Total Cache.

5. JSMin 

JavaScript Minifier works pretty much as Minify, only it does not combine multiple files together. The only thing it does is that it removes the white space and comments from a JavaScript page. The official website of the tool says the app helps reduce the file size by half and encourages a more expressive programming style. JavaScript Minifier does not modify anything else in your code and it will not ruin it, so that the script will run properly.

6. Google Closure Compiler

Google’s tool is another one that basically cleans your code to allow faster loading time. This tool, however, does efficiently correct and remove a wide range of common coding errors in JavaScript.

The Compiler includes a huge JavaScript library, tested on several browsers and computers, a style checker and fixer and a JS optimizer. Google’s tool is very powerful and works perfectly, tidying up each of your JavaScript pages until nothing else can be done to it.

7. YUI Compressor 

YUI Compressor Logo

Although Yahoo! has fallen behind lately, their developer network still does a bit of a good work. YUI Compressor is one of their products which, as the name says, compresses your files fast and safe. YUI works both with CSS and JavaScript and proclaims itself as being better than competitors such as Packer or JSMin (presented above). The goal of the application is to preserve the qualities of the code and to only modify what is not working properly.

With Yahoo’s tool we end the list of CSS/JavaScript compressors which help your page load faster. Most of them are very easy to use and you won’t even have to spend much time optimizing your page, but it is a good idea to do it before uploading the final version of the site. Don’t forget that loading time is very important for both you and the visitors and not being able to hold a high standard might not help you too much. Therefore you should try out each of these tools and see which one of them works better for you.

Further reading

Speed Up Your Page With Google Analytics on WebMonkey

5 Tools to Speed Up your Website on RackAid

Tools to Speed Up Your Site on SEO Gadget

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

16 Comments Best Comments First
  • Nora Reed

    Monday, October 10th, 2011 12:45

    1

    Nice Article! As a designer this would be useful! thanks :)

    0
  • Wayne

    Tuesday, October 11th, 2011 08:01

    6

    Christian Vasile thanks for suggest these tools…but can you suggest best page speed checker tools so we can easily check our page’s speed.

    0
  • Fred

    Tuesday, October 11th, 2011 11:49

    7

    Really nice tools and very helpful because sometimes it becomes to tedious to wait for the site loading.

    0
  • Andrew Groat

    Tuesday, October 11th, 2011 03:15

    5

    Thanks Christian,

    I’ve been exploring options for improving the efficiency of a webapp for a company, so these will be handy.

    It’s a large scale financial software with over 20 HTTP requests :-S Ouch!

    0
  • Ryan

    Tuesday, October 11th, 2011 06:31

    4

    My afterthought: JSLint code quality tool. Got triggered by the “Google Closure Compiler” ;)

    0
  • Luiz Felipe

    Monday, October 10th, 2011 16:16

    2

    Very good article.
    Thanks.

    PS.: Please, add share button on the page, like Twitter, Facebook and G+.

    0
  • Ryan

    Tuesday, October 11th, 2011 06:29

    3

    For the more .net inclined users on here I would recommend the Microsoft AJAX minifier. Minifies js and css. Beauty of it is you can integrate it into your build process. YUI min is my compressor of choice but if you are using .net I would certainly recommend Microsoft’s version.

    0
  • Francois

    Wednesday, October 12th, 2011 09:15

    8

    I like to use pingdomtools to see which element take long time to load and the detail of all element within a page. thanks for your list :)

    0
  • deadwin

    Thursday, October 13th, 2011 20:49

    9

    This is such a nice article i am using some of these stuff but now will try all of those.

    0
  • kate

    Tuesday, April 10th, 2012 04:18

    15

    cheers …..lovely ideas for inspiration

    0
  • Aqeel

    Sunday, May 13th, 2012 13:40

    16

    Minify is a good tool. You can also consider about the phptidy libray, which will cleanup the markup and reduce page size too.

    0
  • Dan

    Thursday, December 29th, 2011 04:44

    14

    Thanks for this post Christain! I need to try out Minify. Thanks for the recommendation!

    0
  • Igor

    Friday, October 28th, 2011 09:59

    10

    it really can help to boost page loading
    but also it is very important to make images to be smaller size

    0
    • Nettie

      Tuesday, December 13th, 2011 08:04

      13

      You’ve really ipremssed me with that answer!

      0
  • Abdullah

    Monday, November 7th, 2011 00:28

    11

    Thanks Christian, WP Minify and W3 Total Cache help me a ton to make my WordPress website loading speed fast.

    0
  • Amelia

    Monday, November 28th, 2011 04:11

    12

    Nice article.. I really like the site load test.

    Thanks for sharing!

    Cheers!

    0
  • Aqeel

    Sunday, May 13th, 2012 13:40

    16

    Minify is a good tool. You can also consider about the phptidy libray, which will cleanup the markup and reduce page size too.

    0
  • kate

    Tuesday, April 10th, 2012 04:18

    15

    cheers …..lovely ideas for inspiration

    0
  • Dan

    Thursday, December 29th, 2011 04:44

    14

    Thanks for this post Christain! I need to try out Minify. Thanks for the recommendation!

    0
  • Amelia

    Monday, November 28th, 2011 04:11

    12

    Nice article.. I really like the site load test.

    Thanks for sharing!

    Cheers!

    0
  • Abdullah

    Monday, November 7th, 2011 00:28

    11

    Thanks Christian, WP Minify and W3 Total Cache help me a ton to make my WordPress website loading speed fast.

    0
  • Igor

    Friday, October 28th, 2011 09:59

    10

    it really can help to boost page loading
    but also it is very important to make images to be smaller size

    0
    • Nettie

      Tuesday, December 13th, 2011 08:04

      13

      You’ve really ipremssed me with that answer!

      0
  • deadwin

    Thursday, October 13th, 2011 20:49

    9

    This is such a nice article i am using some of these stuff but now will try all of those.

    0
  • Francois

    Wednesday, October 12th, 2011 09:15

    8

    I like to use pingdomtools to see which element take long time to load and the detail of all element within a page. thanks for your list :)

    0
  • Fred

    Tuesday, October 11th, 2011 11:49

    7

    Really nice tools and very helpful because sometimes it becomes to tedious to wait for the site loading.

    0
  • Wayne

    Tuesday, October 11th, 2011 08:01

    6

    Christian Vasile thanks for suggest these tools…but can you suggest best page speed checker tools so we can easily check our page’s speed.

    0
  • Andrew Groat

    Tuesday, October 11th, 2011 03:15

    5

    Thanks Christian,

    I’ve been exploring options for improving the efficiency of a webapp for a company, so these will be handy.

    It’s a large scale financial software with over 20 HTTP requests :-S Ouch!

    0
  • Ryan

    Tuesday, October 11th, 2011 06:31

    4

    My afterthought: JSLint code quality tool. Got triggered by the “Google Closure Compiler” ;)

    0
  • Ryan

    Tuesday, October 11th, 2011 06:29

    3

    For the more .net inclined users on here I would recommend the Microsoft AJAX minifier. Minifies js and css. Beauty of it is you can integrate it into your build process. YUI min is my compressor of choice but if you are using .net I would certainly recommend Microsoft’s version.

    0
  • Luiz Felipe

    Monday, October 10th, 2011 16:16

    2

    Very good article.
    Thanks.

    PS.: Please, add share button on the page, like Twitter, Facebook and G+.

    0
  • Nora Reed

    Monday, October 10th, 2011 12:45

    1

    Nice Article! As a designer this would be useful! thanks :)

    0

Comments are closed.

54.204.127.191 - unknown - unknown - US