How to Increase Your Website Loading Speed by 400%

Usually if a site takes too long to load then it pushes a new user (or a potential client) away from the site as people do not have the time and patience to wait for a slow site to load. Nowadays, it is even more for a site to load fast because search engines are considering site loading time as an important factor for higher rankings.

Below are a few tips which will help you to optimize the speed of your site:

Enable Gzip or deflate Compression

Gzip or Deflate is a compression antilogarithm similar to zip. Compression can reduce size by about 70-80%. Gzip is most effective with raw text files like html, css and js. Don’t try to gzip images and pdf files as they are already compressed with their own compression method.

If you are using php then add one line at the top  <? ob_start(“ob_gzhandler”); ?> . This will add gzip compression.

Make Less http Request

The key to a faster web page is to reduce the number of http requests. 80% of the end user’s time is spent on downloading html, css, javscript, images, flash and other web components. Thus, more the number of http requests you make, more time it takes to download the content from the server.

One method of reducing http requests is to combine multiple files in a single file. Reducing the number of elements in turn reduces the number of http requests to render a webpage. So if you are having multiple css and js files try combining them into a single js and css file.

Minify Javascript and Css

Removing unnecessary characters from css and js is called minification. Minification can reduce the size of the document to upto 30 to 40 %.

Make Javascript and css external

One advantage of using extrernal js and css is that they can be easily cached to browser. Secondly as they are not inline so they don’t contribute to the document size and help in faster loading of the page.

Css Sprite

Css sprite is a technique to make a single image for all background images. Background images are then applied to the element with css properties in the background-image and background-position.

Put Css at top

Always put css in the head section. As the head section is always completely loaded before rendering the body,so all style definitions are instantaneously applied when an element is rendered to the screen.

Put js at bottom

User has to wait for the execution of js script before loading of page because js blocks the html rendering while downloading from the server. Therefore, js should be loaded after all html is loaded. A good place to put js is at the bottom of the page before closing the body tag so that it does not block html rendering and the user is able to see the response instantaneously.

Add expire header

Always add an expire header to the content. Expiry header tells the browser how long a content is cached on the browser and when to load new content from the website. Now subsequent requests for js ,css , images are taken from the browser’s cache and do not make http requests. Generally developers apply expiry header to images. But you should also include expiry header for css, js, html and flash files.

Reduce duplicate javascript and css

Don’t include duplicate js and css in the document.  It will double your http requests and the code in js and css will overwrite your previous code and will be executed twice, thereby slowing down your page loading speed.

Reduce DNS lookup

Domain Name System maps hostname to IP address. When you type website name in the browser, it resolves the DNS and it takes around 20 to 120 ms.

Avoid content from external sites because if there is more third party content, then more time is required to resolve DNS and hence will slow down the speed of your site. .

Use GET for AJAX request

Ajax is very common these days to show real time data. Always use GET method for fetching data from server as GET can be cached in browser while POST method is never cached in the browser.

By following these simple steps, you will be able to increase the speed of your site by approximately 400-500%.