DOM Monster is a new cross-browser bookmarklet tool which analyzes your Document Object Model and other features of your HTML page. It reports valuable information about the number of elements, empty nodes, the content ratio and nesting depths. However, the most useful feature is an overall rating and a list of warnings and tips to help you optimize your code…
Click this DOM Monster link to view the results for this page or drag it to your bookmarks bar to create a permanent link.
While there are many code analyzers available, DOM Monster provides useful information I haven’t seen elsewhere. The results are reminiscent of the the YSlow add-in for Firebug but there’s more emphasis on optimizing the performance of the HTML document than analyzing network performance and file sizes.
There are some great tips such as:
- reducing the number of
- reporting excessive white space
- providing the content to HTML code ratio (over 50% is considered good).
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.