Currently Browsing: Home » 4 Ways to Decrease Page Loading Time

4 Ways to Decrease Page Loading Time

Users love to move from one page to another at a fast rate. They can easily obtain more information and find what they are looking for. Unfortunately, not everything on the internet loads quickly. In this tutorial, I’ll show you 4 ways to decrease page loading time.

Let’s begin:

  1. Place JavaScript files at the end of your document

    JavaScript files load differently than other HTML elements. While a normal HTML element is loading, the rest of the page continues to download. On the other hand, a JavaScript element must fully load before the rest of the page can continue. In order to counter this problem, place JavaScript files at the end of a document. This ensures that the main content of a page has a low loading time.

  2. Reduce HTTP Requests

    Having over 5 JavaScript and CSS files that are referenced to puts a burden on your viewer. These excessive requests to files outside the document can increase page load time substantially. Combine your JavaScript/CSS together and place them in one large file. For those of you using WordPress, consider editing your theme if it has too many requests. It only takes a few minutes to complete this simple job (copy-paste) and decrease page loading time!

  3. Minify Large Files

    Some files are inherently large. Users will have trouble downloading long, documented code when visiting a website. A simple way to reduce file size is to minify your files. For example, the documented, uncompressed jQuery.js is about 120 KB. A minified version is only 19 KB and is perfect to decrease page loading time. The Yahoo! User Interface Library has a command-line compressor than can automate this process for you.

  4. GZip Your Files

    GZip is such an easy way to help both you and your user. It can compress most of your files so that users can download them faster. During this process, much of your bandwidth is also saved. With a method that both reduces the cost for your site and decreases page loading time, who could ask for more? Take a look at the Lateral Code GZip article for further information on this topic.

With these 4 simple methods, I hope that you can fortify a nice user experience on your website.

Make sure to check that you have correctly implemented these methods using YSlow! Good luck!

This entry was posted on Sunday, March 8th, 2009 at 10:30:30. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “4 Ways to Decrease Page Loading Time”

  1. Aren’t javascript and css files cached after the first load?

    You could also point the jquery reference to Google’s repository. This way, the user has browsed a site that also has this link, it can safely pull it from the cache.

    • @Steven: You make a nice point about Google’s repository. If you view the screencast on this page, I suggest exactly that.

      @Razvan: I concur. They have been out for a while. The main idea of this post is to express these ideas to those who do not know them.

  2. kovshenin says:

    Good tutorial. Loved the jQuery min part. Thank you!

  3. Razvan Pavel says:

    this are well known facts and have been around for a while: http://developer.yahoo.com/yslow/

  4. Matt says:

    Karthik – nice job. I tweeted about this article on Twitter. Also, although they have “been around for a while”, you’re right, not everyone knows about them. Just because something exists doesn’t mean that the entire community is aware that it exists. Plus, Yahoo’s information can be a bit daunting to newcomers.

  5. Jos Hirth says:

    >Aren’t javascript and css files cached after the first load?

    Yes, they are (unless you’re sending silly headers). However, most visitors won’t have a primed cache. Whenever you get a big traffic spike from social bookmarking sites most people will be first time visitors and usually they won’t check out your other articles.

    But even regulars will have to download these files over and over again. The reason for this is pretty simple: The caches are just way too small. Often it doesn’t even last for a single day.

    Basically caching only helps those visitors who read a few articles in one go. Apart from that there isn’t much of a difference. If you got a lot of regulars it maaaaaybe saves about 10%, but that’s about it.

    Gzip on the other hand can peel up to 50% of a given page. That’s a pretty big improvement – even more so if you get flooded by hits.

    @video

    Worst sound quality ever. It almost made my ears bleed. I’d to stop the video after a few seconds.

    • @Matt: I appreciate the great feedback. Thank you!

      @Joe: Thank you for the insight about cached files. For some reason, I don’t feel the video has bad sound quality. It sounds fine for me. Maybe it’s just my computer :P .

  6. Allen White says:

    Cheers some good points, you could also mod your HTaccess as seen here

    http://www.techieshelp.com/speed-up-your-website/

  1. Faster Page Generation in Wordpress

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.