Website speed is an important criterion for determining search engine rankings. Google has officially incorporated website speed as a factor to determine search engine rankings. By reducing both the size of your web page and the load time can help to improve the website’s performance for primarily users, but more importantly for search engines.
A simple reason why Google has included site speed to its ranking algorithm is because they consider the user’s experience. It is quite clear that visitors lose interest in a website which doesn’t load quickly and would spend less time on these websites as compared to those which load faster.
How to improve website speed:
The following parameters can be used to improve your web site speed:
1. Minimize the number of HTTP Requests:
You can minimize the number of HTTP Requests by:
b. Combine all the CSS files into two files, again a Style sheet that will have all the styling that can be used globally and a second file that will have both styling and image sprites for the page.
c. Allow all images to called as sprites from stylesheets
Therefore any given page will make 4 HTTP requests 2 for styling and two for logic.
Reducing the number of HTTP requests made to the server is critical in improving the page load time.
2. Use a Content Delivery Network (CDN):
Use CDN to deliver content to the users from a server of their nearest location. By deploying your static content to various servers located geographically helps to speed up the loading speed for the page. The server that is selected for delivering content to a particular user is usually the one that has the quickest response time. YSlow actually provides a function to add components to a CDN to improve speed performance:
3. Add an Expires or a Cache-Control Header
Approximately 40% of website visitors have an empty cache; which means that a first time visitor to your page has to make all HTTP requests to download content of the page. To improve the page load time on subsequent page views, we can use expiry headers to make the components cacheable. This will help to avoid unnecessary HTTP requests to the server.
- Guidelines for adding expiry or Cache-Control Headers: Use ’Never expire’ or ‘Far Future Date’ as Expires header for static content
- For dynamic components: use an appropriate Cache-Control header
4. Use Gzip Components
Use Gzip compression to reduce the server response time. This can be done by reducing the size of the HTTP response.
Add the following Accept-Encoding header to compress the HTTP request.
# BEGIN Gzip
# END Gzip
For IIS Gzip can be configured through the control panel.
5. Put Stylesheets at the Top
The HTML specification by W3C clearly states that stylesheets are to be included in the <HEAD> section of the page. This helps the browser to display whatever content it has as soon as possible. When the web browser loads the page progressively; ‘the header’, ‘the navigation bar’, ‘the logo at the top’, etc. together serve as a ‘visual’ feedback for the user, while he is waiting for the page to load. This will improve the overall user’s experience.
6. Put Scripts at the Bottom
As browsers cannot download more than two components in parallel per hostname at the same time; place scripts at the bottom of the page to avoid any delay in loading the page. Serve your images from multiple hostnames to get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
8. Avoid Redirects
Avoid all unnecessary redirects on the page and wherever possible link them directly to a page to reduce the page load time.
9. Configure ETags
Entity tags (ETags) refer to those mechanisms that are used by web servers and browsers to determine whether the component in the browser's cache match the one on the original server. (An ’entity’ refers to another word, a ’component’: images, scripts, stylesheets, etc.) ETags have been added to provide a mechanism for validating entities that are more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The original server specifies the component's ETag using the ETag response header.
The ETag code should look like:
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
10.Reduce the Number of Document Object Model (DOM) Elements
By marking-up your page properly, you can avoid unnecessary <div> and nested tables; which in turn help to reduce the number of DOM elements on the page.
You can refer to the following Yahoo and Google resources for more detailed information: