Monday, August 5, 2013

10 Tools that every web developer must know while developing a website


In this post I will cover the tools every web developer or webmaster must know for running a website. These tools & resources will help you to ensure that the users have a superior experience when they visit your website. Superior user experience is not just about the functionality or the cool User Interface, it's more than that. Functionality and UI will help get users for first time but it's the page performance that ensures that users actually spend time or come back again. Next, in case users like your website, how easily and effectively users can share it in their network. In today's world just sharing a url is not sufficient unless it shows the necessary preview info that most of the Social Networks (facebook, linkedin, Google+, twitter et. al) support.

Here are few points that I plan to cover in the rest of the post - 
  • Website Performance & Availability
  • Web Analytics
  • Social Media Sharing
  • Search Engine Optimization
  • Protection of Intellectual Property
1. Website Performance & Availability

There are two aspects of the performance measurement of a website 


a. Number of concurrent users it can support while ensuring an accepted level of response time 
b. Page latency or response time of the page.

Let's spend a minute trying to understand what each of these really means. Support of concurrent users can be interpreted as Throughput without deteriorating the SLA (i.e. Response Time). However, the definition Response Time itself is little fuzzy. First, it's not an absolute number, rather it's a range. Lower range is the time taken to receive the bare-bone HTML content. Once HTML content is loaded in browser's memory, it starts downloading other resources like js, css, images etc. "Page Load time" is the overall time taken to download all the resources that a particular page requires "in order to render it". You can understand it quickly by looking into "Chrome > Right click > Inspect Element > Click 'Network' in the lower panel > Load the website > Observe the results", you can do the same in Firefox as well. Typically the bare bone html is generated in your web server while other static resources are served by the CDN networks.

So, it's important that your webserver is able to scale and serve the base page really fast (~300 ms) even under high load and you make use of a good CDN service that can serve the static content blazing fast.

Coming to the tools, JMeter is a good choice for doing the load testing on the website. In fact, JMeter needs to be used even during the development phase to fix low hanging issues. However, for professional grade results, I will recommend a cloud based solution - LoadImpact. Here is a report generated on www.fanffair.com using loadimpact.com - goo.gl/MQK0R . Note both the tools measure the time taken to load the bare-bone HTML content. Two other tools that you may like to evaluate are - Anturis & Pingdom . They do a good job of monitoring the site performance (along with monitoring availability).


JMeter - http://jmeter.apache.org/
LoadImpact - http://loadimpact.com 

Anturis - https://anturis.com/
Pingdom - https://www.pingdom.com 

Now, how to measure the Page Loading Time or the latency to serve the page i.e. what your users finally experience. Google Page Speed is probably a good starting point to measure, use the service to get an overall score and a report with all the recommendations. Two other tools that would come handy are Chrome Developer Tool and Yahoo! Slow. It will take some time to act on all the recommendations but you will be able to bring noticeable difference in overall page load time by acting on all the recommendations.


Google Page Speed - https://developers.google.com/speed/pagespeed 
Yahoo! Slow - http://developer.yahoo.com/yslow/
Yahoo! Slow Performance rule - http://developer.yahoo.com/performance/rules.html
Chrome Developer Tool - https://developers.google.com/chrome-developer-tool

Next is Availability, it is far more important a factor than Website performance. However, it is probably more basic a problem to solve and most of the Data Centers and Cloud based computing environments (e.g. AWS, GAE, Azure etc) provide a very high rate of availability and today this has become more or less a non-issue. But nonetheless, it's always a good idea that you monitor your website for availability. Better to get an alert from a automated monitor than a user. Both Anturis & Pingdom do a pretty good job on that front as well.

Anturis - https://anturis.com/
Pingdom - https://www.pingdom.com 

Personally I would prefer Anturis over Pingdom.

2. Web Analytics


This is the most important measurement for your website. Based of number of users, usage, location of users, devices used and other demographic info, you may need to alter your website design or the content. Google Analytics is probably the most popular and widely used Web Analytics tool, it's available for free. Few other alternative would include Adobe Marketing Cloud (Omniture) (paid), Core Metrics from IBM(paid).


Google Analytics - http://www.google.com/analytics/
Adobe (Omniture) - http://www.adobe.com/solutions/digital-marketing.html
IBM (Coremetrics) -  http://www-01.ibm.com/software/marketing-solutions/coremetrics/


If your website is registered as a Facebook App then you can benefit a great deal from Facebook App Insight.

Facebook Insights - https://www.facebook.com/insights/
Facebook Insights Documentation -  https://developers.facebook.com/docs/insights/

3. Web Masters tool 

Web Masters tool allows the website owners to submit their websites to the Search engines and configure few other associated parameters. Obviously, of all Google's Web Masters Tool is the most important. However, there are more e.g. Bing's Webmaster's Toolbox

Google - https://www.google.com/webmasters/tools
Microsoft - http://www.bing.com/toolbox/webmaster 

In addition, you may like to submit the website url to various directory listing services 

Open Directory Project - http://www.dmoz.org/

Yahoo! Directory Listings - http://dir.yahoo.com/ 

They still have importance from Search Engine point of view.

4. Chrome Dev tools 

I am calling it out separately as Chrome Dev Tool deserves this. This is probably the one tool that will give you a holistic picture of your website's performance as seen by end users. It helps you to optimize the html, css, javascript, images contents of your website as well as improve the network and rendering performances. It has lot of debugging tools as well. It's a complete solution in itself.

Chrome Dev Tools - https://developers.google.com/chrome-developer-tools

A good alternative would be - https://developer.mozilla.org/en-US/docs/Tools 

5. Cross Browser Support

Testing your website for cross browser support is a long and often a tiring process. In fact, testing your website on multiple browsers across different versions and OS combinations is not going to be a simple task. And with every significant UI change, you need to repeat these testing. It may slow down your development speed as well as your ability to release the new versions significantly. But not any more once you know about these tools - http://browsershots.org 

Browser Shots - http://browsershots.org 
BrowserStack http://www.browserstack.com/


6. Obfuscate/Minify your Javascript

Last thing you want is your competition to copy your javascript code. So, go for obfuscation. Apart from protecting your intellectual property, it also helps you to "minify" (or reduce the size) the javascript content. Here are few -

Closure Complier: http://code.google.com/closure/compiler/
YUI Compressor: http://developer.yahoo.com/yui/compressor/
UglifyJS - http://marijnhaverbeke.nl/uglifyjs 
JSMin by Douglas Crockford - http://www.crockford.com/javascript/jsmin.html

Personally, I liked UglifyJS. 

7. Validate your Open Graph Parameters 

In this age, its important that you understand and ensure that the users & potential users see the right information when a url from your website is shared in popular social media. Managing this preview information is probably as important as your content if not more. This factor may become a make or break point for a website.
Open Graph parameters (Reference: http://ogp.me/) are the meta information about the page (similar to html header info) that goes into every page. Popular social media like Facebook et al, make use of this info to render the preview window when a url is shared.

You can test the OG meta info for a url here - http://developers.facebook.com/tools/debug 

8. SEO 

Search Engine Optimization helps websites to be more searchable and for achieving this, SEO involves implementing certain best practices e.g. setting the meta info of page. SEO is a subject and an industry by itself, here I am not going to cover what is SEO and how it is done. I will leave with certain resources that you may find useful. Webmaster's tools from Google and Bing are the starting points and here are some resources for serious business.

Google - Search Engine Optimization Starter Guide
SEOBook - http://www.seobook.com/ - tons of information available here.
Moz (SEOMoz) - http://moz.com/beginners-guide-to-seo 
Woorank - http://www.woorank.com - Get your website evaluated here and then work on the recommendations.
SEO WORKERS - http://www.seoworkers.com

You can use following two websites for quickly checking backlinks for your website
Majestic SEO - http://www.majesticseo.com
Open Site Explorer - http://www.opensiteexplorer.org


9. Social Media Integration 

Social Media Integration means instrumenting your website so that social sharing becomes easier for the users. A part of it is covered by implementing proper Open Graph parameters for the pages (urls). However, another significant part involves configuring your website for various popular Social Plugins from Facebook, Twitter, Linkedin, Google+, Pinterest etc. Depending on the nature of content and your target audience, you may choose not to integrate all of them but this requires careful thinking before you finalize which plugins should be integrated.

Facebook - http://developers.facebook.com/docs/plugins/ 
Linkedin - http://developer.linkedin.com/plugins
Twitter - https://twitter.com/about/resources/buttons
Google+ - https://developers.google.com/+/web/share/
Pinterest - http://business.pinterest.com/widget-builder/#do_pin_it_button


10. Alexa Account

Finally, as the adage goes, "if you cannot measure it you cannot improve it". Google Analytics gives you a very good insight into how your website is doing with or without all the changes. But that is in isolation, you need to measure how you are doing as compared to your peers and competition. And that's why configuring your web site for Alexa  is very important. 
Alexa measures the overall ranking of the websites based on website traffic. Once your website is configured, you can view the global and country specific ranking for your website. This will enable you to measure how your website is doing in terms of number of visitors and few other parameters and will highlight any change in ranking.

Alexa - http://www.alexa.com/


Although I had started with the plan to cover exactly top 10 tools from different categories but eventually I realized many of the tools are not mutually exclusive and complimentary in nature. So, decided to retain all the important tools and resources. Hope that makes sense.



No comments:

Post a Comment