Performance Optimization for Websites
File Optimizations
Give correct image dimensions in IMG tags
Don’t specify a dimension of different values to the image’s original dimension. This makes browsers scale the image and therefore takes longer to load the image. Besides, browser-scaled images do not look as good.
Reduce image file size
If image quality acceptable, save images in the 256-colour palette as many as possible. Smush.it of the YSlow Firefox add-on can analyze and shrink the image files automatically. You can download the shrunk image files in a zipped file.
Use image sprites
An image sprite is an image file that have multiple graphics for different purposes recorded on it. For example, a 20*200px image file can record 10 20*20px smiley faces that can be manipulated to show different faces using the CSS background-position property. This technique saves the number of HTTP requests that a page needs to make in order to get these ten images (one v.s. ten).
Further reading: www.smashingmagazine.com/?p=6319
Use Content Delivery Networks and Servers
Simply put, Content Delivery Networks (CDN) and servers are servers dedicated to the static content of a website and are located in proximity to the users. For this optimization to work, renting servers all over the world is required, so normally, only big companies have the budget for this kind of optimization.
Combine CSS and JavaScript files
Each external CSS or JavaScript call is an HTTP request that adds to the load time, so it makes perfect sense to combine all CSS and JavaScript files in a production site. Of course, in the development environment, everything can still remain separated.
CSS to the top; JavaScript to the bottom
Put CSS declaration in the <head> section of an HTML file so that the browser knows about the rules of displaying the page elements before the page loads. Put JavaScript at the bottom just right above </body> to prevent JavaScript from screwing around with page elements before the page is even properly loaded.
Minify CSS and JavaScript
Run your JavaScript code with JSLint first to make sure the JavaScript will minify well. To actually minify CSS and JavaScript, you can use the Minify service or YUICompressor from Yahoo!.
Make CSS and JavaScript external
Not using CSS and JavaScript inline is the standard practice of separating structure from style and behaviour. Putting CSS and JavaScript in external files also makes it easier to manage the files and reduces the HTML file size. Another advantage of such practice is caching, which also reduces HTTP requests.
Specify a document type
Specifying a document type doesn’t necessarily have a direct impact on the overall speed; however, giving the browser a clue of which set of rules it should follow to interpret HTML and CSS does give you the full potentiality of the specified document type.
Validate your pages
Validating your pages does not necessarily have a direct impact on your site performance; however, it does give a sense of trust because a successful validation against W3C’s validation service suggests your dedication to quality.
No CSS expressions
CSS expressions allow logic operations in CSS, which goes against the principle of separating logic from style. CSS expressions are slow in styling page elements when a page updates on the fly and therefore are not accepted by the web design community nor W3C. Microsoft, the inventor of CSS expression, also abandoned CSS expression in Internet Explorer 8.
Server Optimizations
Real techie:
- Set up expires header
- Set up ETags (entity tags)
- MySQL Tuning Primer
- Transparent compression
Avoid unnecessary redirects
Any unnecessary redirect mean the server is not fully optimized. Using Firebug (a Firefox add-on) can help in determining whether a page is redirecting its access. In Firebug, under the Net tab, anything that shows a 302 Found in its Status column is giving a redirect. Reduce the number of 302 Found if possible to increase performance.
Avoid dead links
A dead link includes an HTTP request to a non-existing external CSS, JavaScript, or image file. Web server is required to send a 404 header is a dead link is requested, which really does nothing but adds to the server load. Besides, web server logs all 404 incidents, and giving it the chance to log a 404 incident simply means that you are wasting your server space.
Other than YSlow
Google has also its own Firefox add-on for optimization check called Page Speed.
galearii
