How to build fast websites

Published: August 24, 2009Posted in: Computing, Feature, ProgrammingTags: ,

In order the make the web pages to be fast downloaded, most engineers focus on the backend performance, such as compiler options, database indexes, memory management, etc. In fact, 80-90% of the response times are spent on the download of Javascript, CSS, image, Flash files etc. It’s most like a frontend issues rather than backend. If you’re looking for dramatically reducing the response times of your website, here are some tips you may follow:

Make fewer HTTP Requests

Again, most response times are spent on making HTTP requests for the components such as images, scripts, stylesheets, Flash, etc. Thus, a simple way to improve response time is to reduce the numbers of components, and you need to find the balance of the performance and the product design.

Use a content delivery network

If your company have all the servers in one location, when the audiences become large, you may need to consider to deploy the content across multiple , geographically dispersed servers.

Add an expires header

A first-time visitor to your website may have to make server HTTP requests, but by using a future Expires header, you can make most components cacheable. If you’re using Apache, the mod_expires module can give you configure the Expires header.

Put Stylesheets at the top

The problem with putting stylesheet near the bottom of the document us that it stops progressive rendering in many browsers.  The browser delays showing any visible components while it is waiting for the stylesheet at the bottom. So always keep the stylesheet links inside the <header>.

Put Scripts at the bottom

It is the opposite compared to the stylesheet, with scripts, progressive rendering is blocked for all contents below the script. Moving scripts lower in the page means more contents is rendered progressively.

Avoid CSS expressions

CSS expressions are powerful and dangerous, due to the frequency with which CSS expressions are evaluated is what makes them work, but also it is what makes them bad for performance.

Make Javascript and CSS external

If the HTML documents contain dynamic contents, which in most the cases are true, the inline Javascript and CSS is downloaded every time when the HTML document is requested. On the other hand, if the Javascript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

Minify Javascript

Minification is the practice of removing unnecessary characters from code to reduce its size, thus improving load times. You can also use Gzip to compress file, and dramatically decreases the file sizes.

Avoid redirects

There are different reasons for implementing redirects, including website redesign, tracking traffic flow, counting ad impressions, and creating shorter URLs, but the main thing to remember is that redirect make your pages slower.

Last by not least, use the Google Page Speed to evaluate your web pages. It helps to easily find out what elements can be optimised, and how.

See also,