Analyze and Optimize your website with Google Chrome.

If you’ve also fallen in love with Google Chrome, wait, there’s something more to celebrate. For web developers Google Chrome is a perfect tool to analyze and optimize your website for better performance. Not only that, you can also compare other websites to know which one performs better under given conditions.

Analyze

To inspect your or any other website right click on it and select “Inspect Element” from the context menu. You can also open Javascript Console from Developer Options. This will open up a new window showing you the source of the page as well as all the styles, metrics and other properties associated with it. It’ll also highlight the selected element on taking the cursor on the top of it in the source.

As you can see below, on selecting the topright div tag it got highlighted as well as metrics and style boxes shows up the CSS code and layout of the selected div tag which is pretty cool for web developers. If you are familiar with Firebug extension in Firefox then this is not exactly what it does but still very useful.

Optimize for Performance

And now another very cool stuff by which you can see what resources are consuming how much space and time they take to load on synchronous or even asynchronous web 2.0 calls (if any). This can even give you an idea of when did the object start loading and when did it end. So you can actually know what all objects on your website are making it too slow to load..

Click on the Resources Tab on the above shown window and then reload your website or do some asynchronous AJAX operation on the website you want to test. You will instantly be shown all the resources that were updated as well as their size and time they took to load.

Different color here specifies the type of files for your convenience so that you can easily make out that how much time does css files are taking and how much does the javascript files .js are taking to load. The very cool thing about this is that it can also tell you what percentage of time images are taking to load and what percentage actual scripts are taking  which you can figure out by looking at the multi-colored rod at the top.

The errors will also be displayed which you can see by showing the console window by clicking on the small button on the bottom left as shown above. This will show you all kind of errors such as html validation or javascript errors along with the warnings too.

Similarly you can see the size of different resources on the web page by clicking on the size option

Please note that again that this will work when you either inspect some element or open a “Javascript Console” window first and then reload your page. For asynchronous AJAX calls the console will show the stats instantaneously.

So now with this, apart from your website you can also see how other websites load and steps they take to improve their performance. Actually try any good web 2.0 website such as Google Maps which has heavy AJAX implementation and you will be surprised for sure!

Liked this article ? You can get your daily technology delivered fresh in your Email or you can subscribe to our RSS Feeds too.