Web Dandy Web Design Articles
Web Dandy Web Design Articles

10 Tips To Speed Up Your Website

by Web Dandy on July 23, 2012

Site Speed

Website developers are always looking for ways to improve website search engine optimisation. One of the ways to do this is to ensure your site loads as quickly as possible.

1. Minimise HTTP Requests

By combining all scripts into a single script, and by combining all CSS into a single stylesheet, you can minimize the number of HTTP requests required to render your page. Each unique HTTP request requires a round trip to a server, introducing delays. The more HTTP requests that your pages require, the slower and less consistent their response time will be.

2. Avoid Redirects

Redirects are accomplished using the 301 and 302 status codes. Here's an example of the HTTP headers in a 301 response:

HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html

Redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

3. Remove Duplicate Scripts

Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

4. Compress Your Images Even Further

Tools like Photoshop can compress images but compression can be taken even further without sacrificing quality.

The Yahoo Developer Network site Smush.It uses further optimisation techniques specific to image format to remove unnecessary bytes from image files. It is a "lossless" tool, which means it optimises images without changing their look or visual quality.

5. Don't Scale Images in HTML

When coding don't use a bigger image than you need just because you can set the width and height in HTML. It's best to actually resize your image to the size you want it to appear on your site e.g. if you need <img width="100" height="100" src="myimage.jpg" alt="My Image" /> then your image (myimage.jpg) should be 100x100px rather than a scaled down 500x500px image.

6. Stylesheets At the Top, Scripts At the Bottom

Putting stylesheets in the <head> allows the page to render progressively.

Placing scripts at the bottom of the page, next to the closing <body> tag can speed up your website. Most current browsers can download a maximum of two components in parallel. However, when downloading a script, no other downloads can occur. That download must finish before moving forward. So, when it's feasible, it makes sense to move JS files to the bottom of your document in order to allow the other components (images, CSS, etc) to load first.

7. Choose Over @import

CSS should be at the top in order to allow for progressive rendering. In IE <@import> behaves the same as using <link> at the bottom of the page, so it's best not to use it.

8. Make CSS and JS External and Compress Files

All of your CSS and Javascript should be removed from the page and placed in their own external files. Minify your CSS and Javascript files (remove unnecessary characters from the code).

There are a number of CSS Compression Services e.g. CSS Optimiser and CSS Compressor. Javascript Compression Services is also available at JS Compresso and Javascript Compressor.

9. Link to Google's Content Distribution Network (CDN)

Google hosts popular scripts such as jQuery. If you're using such a library, you should link to Google's CDN rather than using your own script.

10. Keep All Components Under 25K Where Possible

This restriction is related to the fact that iPhone won't cache components bigger than 25K.

Addendum

Google has introduced PageSpeed Insights to enable the analysis of website pages and to provide information on how to to make them faster for both mobile and desktop devices.

Scores are given between 0 and 100 points. A score of 85 or above indicates that the page is performing well. PageSpeed Insights is being continually improved therefore the score is likely to change as Google adds new rules and/or improves the analysis.

PageSpeed Insights measures how the page can improve its performance on:

  • time to above-the-fold load: Elapsed time from the moment a user requests a new page and to the moment the above-the-fold content is rendered by the browser.
  • time to full page load: Elapsed time from the moment a user requests a new page to the moment the page is fully rendered by the browser.

Visit PageSpeed Insights to test your web pages.