How to optimize a website | Performance of a website

30 tips to Increase website speed

Website speed can make or break your business. On one side it makes it easy for your web visitor to get the information quickly, on the other side it helps you gain those crucial points in SEO. Google gives preference to faster sites and may penalize you for having slow website.

Firstly to figure out whether your website is slow or not you need to use some of the online available tools. The tools that I like the most are following:

HTML Validator:  http://validator.w3.org/

It will validate your webpage and come up with possible suggestions on how to fix errors.  Its important that you don’t have errors in webpage.

Google Insight:  https://developers.google.com/speed/pagespeed/insights

Run it on your webpage and it will come up with all the suggestions that you can do to improve your website speed. Be it gzip, minify, caching etc; Google insight will check all those small points and tell you what you need to do reduce those extra bytes or minutes from your webpage.

Webpage Test:  http://www.webpagetest.org/

The only thing Google Insight doesnt do is to tell you how fast your page loads in terms of time. Different browser and different locations will load your same webpage in different time. www.webpagetest.org can load your page in different browsers from different locations and tell you how fast it will load in real scenario.  It also tells you how fast each of the component loads (java script, images, css etc).

Once you have figured these things out, you can get to actual task of understanding each aspect of website speed optimization. We will now cover most of the aspects of website speed.

1) Avoid CSS @import:

Always avoid using import of style sheet into your webpage. There are two ways to include a stylesheet in your web page.

You can use the LINK tag (Correct way):

<link rel=’stylesheet’ href=’saurabhsays.css’>

Or you can use the @import rule (Incorrect way):

<style>

@import url(‘saurabhsays.css’);

</style>

The reason for this is that browser is unable to download anything in parallel when “import” is used. Hence it results in higher page load time.

2) Avoid a character set in the meta tag

Pages are loaded by sending bytes to browser from webserver over internet. Browser try to understand the encoding using various algorithms and finally render the page. To reduce this effort always specify charset in response. You can do so by putting a line similar to the following line after <header> tag

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

It will give the information to browser which charset is being used and browser doesnt have to put effort in understanding the encoding.

3) Avoid bad requests

Request data from the location which doesn’t exist is waste of time and resources. You may be trying to access data from a site which results in 404 errors. Always avoid such situations.

4) Avoid landing page redirects

Thought there is no specific rule that stops you from doing redirects on pages, it is recommended that you dont put redirects which is expected to be a direct landing page from search engines.

5) Avoid long-running scripts

if you have a perl script that runs for 15 seconds, move it to background. You can always email results to user later rather than keeping him waiting in your browser window.

6) Inline Small CSS

There are two ways to incorporate CSS in your webpage

1) You can create a separate CSS and call it with in your webpage like following:

<link rel="stylesheet" href="css/saurabhgupta.css" type="text/css" media="saurabhgupta"> <script type="text/javascript" src="js/saurabhgupta.js"></script>

It will help browser cache your CSS and reduce the size of your webpage

2) Include it in your webpage itself. Please avoid it.

7) Minimize request size

Keep cookies and make request small so that it fits in single HTTP packet or as less as you can make.

 

8) Prefer asynchronous resources

If you have script in your page and browser wait for it before downloading any content which is written after the script. Hence page load time increases. With the use of async scripts browser can load script in the background and continue loading webpage content without delay.

9) Serve scaled images

Its childish but need to be adhered to. For example you want to display an image in 200X200 pixels and put a picture of 800X800 pixel size and restrict size using image width and image height. It will download unnecessary image content and delay loading of your website.

10) Specify a cache validator

By specifying a cache validator – a Last-Modified or Entity Tag header – you ensure that the validity of cached resources can efficiently be determined.

An ETag is an opaque identifier assigned by a web server to a specific version of a resource found at a URL. If the resource content at that URL ever changes, a new and different ETag is assigned

11) Combine images into CSS sprites

Assume you have 4 small gif images which you are serving on your webpage. What do you think is faster 4 small images served in 4 different requests or one file containing all four images mapped and served in one request. It has been proven it is better to keep multiple images in one image and serve with one request. It makes webpage loading much faster.

12) Leverage browser caching

Why do you want to serve same content to a visitor who has visited your site recently from your server. Leverage browser caching and let him/her use cached content in his browser. It will load page faster in browser and also reduce bandwidth usage for your server.

13) Enable compression

Very very important point. If you are not serving compressed pages from your server you are missing on website speed. Compression can increase your website loading speed multiple fold. Use following URL to check if your website is using gzip feature:

http://www.gidnetwork.com/tools/gzip-test.php

14) Defer parsing of JavaScript

Browser need to download and run the script before it can move to HTML code mentioned after the script in the page. Alternatively you can defer loading the script till the time it is actually required. For example assume you move all the functions which are not required before “onload” event to a file “saurbahsays.js” and use following code to let scripts get loaded lazily.

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "saurabhsays.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

 15) Serve resources from a consistent URL

Assume you are downloading a file “facebook.js” from http version of facebook and further accessing the same file from https version of facebook. Avoid doing it as it will waste precious resources as well as time.

16) Optimize the order of styles and scripts

This is what google says about this: Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them.

17) Minimize redirects

Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.

18) Minify CSS

Minification is the practice of removing unnecessary characters from code to reduce its size, removing unnecessary spacing, and optimizing the CSS code; thus improving load times.

19) Minify JavaScript

Just like minifying CSS, remove unnecessary characters from Javascript

20) Minify HTML

Just like minifying CSS and Javascripts, remove unnecessary characters from HTML

If you have a “?” in your URL string then most of the proxies wont be caching your page. Proxy will assume that it is an output for a query. If you are serving static pages, ensure you remove “?” from the URL string.

22) Specify a Vary: Accept-Encoding header

If you are serving compressed version, it will get stored in the proxy. However proxies are supposed to store both compressed and uncompressed version of the page. But due to some issues at times it doesnt happen and proxies will only have compressed versions. To ensure that proxies have compressed and uncompressed version of your page stored, use “ Vary: Accept-Encoding" in your page.

23) Reduce request serialization

If you can make your requests to various parallel, it will make your page load faster. There are tools for it for example

http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool/

24) Eliminate unnecessary reflows

Pretty good article about this is here: https://developers.google.com/speed/articles/reflow

25) Reduce DNS Lookups

Reduce DNS lookups in your page. If you are trying to access multiple resources from different domain names, try to bring resources to a single domain or if possible host it on your server itself.

26) Make Ajax Cacheable

Though Ajax makes querying database for us extremely faster in the browser, however user still need to wait for XML and PHP/Perl to respond. Lets take a case when you query your team members names through Ajax script, if the names were accessed by your earlier and hasn’t change (which you can verify the database by the time stamp) then its fastest to pick it up from local database. That’s what is recommended for web pages also.

27) Flush the Buffer Early

While user request a URL, it takes 200-300 for server to respond. During this time, browser sits idle. Instructing server to flush the buffer while browser waits for the data gives you a head start. In PHP you do it by

<?php flush(); ?>

Place it just after head tag before body tag.

28) Type of Image: Use the right type of image for right place

Playing with the quality of images will dramatically lower the sizes of them while they will still be looking good.

GIF is suitable for images with few colors like logos, text & line art. When saving a GIF file, make sure you use a small color pallette (learn more).

JPG is good for images with lots of colors & details like photographs. Decrease the quality of a JPG image before saving. It will still look good for a web image (learn more).

PNG, a format specially for websites, has great quality – both transparent & non-transparent – is specially functional when you’re in need of quality transparent images. Don’t forget that IE6 has problems in displaying them (learn more).

29) Use a CDN

CDN is content delivery network.  Assume you are serving your page to visitors in US, visitors in UK, visitors in Australia. Serving your page to all the users from one single location (assume singapore) will make it slow for them. Have a CDN network associated with your website and let the content get served from nearest location to the users.

30) Never stop improving