10 Tips To Speed Up Your Website
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
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
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.
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.