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:
There are many parameters such as number of JavaScript’s, CSS files, Optimizing images and more to improve site speed. Free tools like Google Page Speed, Pingdom and Yahoo! YSlow help in identifying the parameters which can be optimized further to make the page load faster.
The following parameters can be used to improve your web site speed:
1. Minimize the number of HTTP Requests:
Most of the time it takes while downloading a page is tied up in downloading the different components of the page: images, JavaScript’s, Cascading Style Sheets (CSS) files, Flash, etc. Reducing the number of downloadable components of a page will help in reducing the number of HTTP requests required to render the page.
You can minimize the number of HTTP Requests by:
a. Combine all the JavaScript files into two files; a local file which carries the logic for the page and second file that carries the global logic for the site.
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.
Accept-Encoding: gzip
Gzip as many files as possible such as HTML Documents, JavaScripts and CSS files. Gzip compression can reduce the response size by 70%. Apache based servers can have Gzip configured through the ‘.htaccess’ file by adding the command line:
# BEGIN Gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>
# 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.
7. Make JavaScript and CSS External
Ensure that JavaScript and CSS files in an external file and call them in the front page. This will help to improve the website speed and result in a faster response time. Using external files generally improves the page load time because the JavaScript and CSS files are cached by the browser. Externalizing the JavaScript and CSS files reduces the size of the HTML document without increasing the number of HTTP requests.
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
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
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:
http://developer.yahoo.com/performance/rules.html
http://code.google.com/speed/articles/
http://www.pingdom.com