4 Ways to Decrease Page Loading Time
Posted by Karthik Viswanathan on Sun 8 March, 2009 at 10:30:30 · Tags: tutorial
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.
If you’d prefer to watch the tutorial, please follow along on the screencast below:
Let’s begin:
- 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.
- 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!
- 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.
- 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. A method that both reduces the cost for your site and decrease 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!
Steven Hambleton on Sun 8 March, 2009 says:
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.
kovshenin on Mon 9 March, 2009 says:
Good tutorial. Loved the jQuery min part. Thank you!
Razvan Pavel on Tue 10 March, 2009 says:
this are well known facts and have been around for a while: http://developer.yahoo.com/yslow/
Karthik Viswanathan on Tue 10 March, 2009 says:
@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.
Matt on Wed 11 March, 2009 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.
Jos Hirth on Wed 11 March, 2009 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.
Karthik Viswanathan on Wed 11 March, 2009 says:
@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
.