ImprovedSource - Making Web Pages Faster

Making Web Pages Faster
by idontknow 2005-09-08 Category: Web-Performance

Probably one of the biggest problems facing any website is keeping it performing well. So what optimization can be done? Well you can start from server software and work up all the way to the content. This could be mean tuning Apache, MySQL, and using some sort of PHP Cache solution. But what if you have already done all of these measures? What other ways can improve the performance of your website? In this articles I am examine methods you can use to optimize your website content which is another piece of the equation for performance. Of course this still is dependent on outside factors including bandwidth and server resources, but it will enable you to get more out of your current servers.

Optimizing Page Size
One way to improve performance is to reduce the size of your websites content. Reducing html page sizes and images sizes can do this. Some ways for doing this include using JavaScript crunchers to remove excess white spaces and comments from JavaScript files, use similar html crunchers to remove again white spaces and other wastes from your html, and to optimize compression settings and format use on images. This can help reduce the size of you website content.

Pre-Cache
Google is most famous for doing this. They very cleverly will use a hidden iframe to preload the first result of a web query so that the website loads faster when clicked. This method could be used inside an existing website too. For example when examining your web logs and traffic trends you may notice that a particular page is very popular so you may think about pre-caching that page using a hidden iframe. Of course this method only really works on newer web browsers. Some example code is below:

JavaScript Page Display
This is a method I came up on my own, do not know if Im the first to think of it [Probably not] but it does work. I call it JavaScript Page Display, we use it on the front page of ImprovedSource website. It basically has an escaped[] version of the html code tucked away in a JavaScript variable. When a visitor with a modern web browser is detected it switches all links over to a JavaScript function called loadView which when called unescapes[] the html code in the JavaScript variable and fills the table cell that our main content is in. It also sets the browser title to the article title. This additional html code increases the front page from about 17k to 33k in size, but results in near instant page loads of articles even when the server is dealing with peak traffic. The only additional information downloaded is any images that are referenced in the html of the article. As mentioned the trade off is initial download sizes, but once a user has download the front page the user perception of the site is dramatically impacted by near instant page loads.

Conclusion
I covered a few methods you can use to optimize your content. Of course there is always the limitation of bandwidth and server resources, but these methods can help get the most out of your current setup. Please check back for out next article.

Other ImprovedSource Articles:
PHP v5.2 vs PHP v5.1
Why we need a Javascript-Based Database?
Cool Example of Java and Javascript working together

[ Back ]