> Reduce the amount of <iframe> tags. There are 1 iframe elements on the page.
1 iframe isn't bad. This shouldn't even be worthy of a tip.
> Reduce the amount of tags that use the style attribute, replacing it with external CSS definitions. There are 1 nodes that use the style attribute.
1 style isn't bad either. They use it on their own page.
> Found 116 <script> tags on page. Try to reduce the amount of script tags.
This shouldn't be just a normal warn. 100+ script tags should be a major warning.
> Nesting depth is very high. Some of the nodes are nested more than 15 levels deep (these are marked with a dashed red border).
> Nesting depth is a little high. Reducing it might increase performance.
Both of these are shown on HN. Only one should be shown.
> Some nodes use transparency. To improve rendering performance, try not to use the CSS opacity property (found 2 nodes, marked with a dashed blue border).
It would be awesome if it could highlight these nodes somehow. Actually, would be awesome if it could highlight all visibile nodes that match any warning/tip. They already do that with nodes at 15+ nesting depth.
Reduce the amount of tags that use the style attribute, replacing it with external CSS definitions.
Is this supposed to be for performance or are they just suggesting "good practices"? If it's performance, I'd like to see some evidence that style attributes slow down the DOM. I don't know of any, and it would be significant.
This is basically advising you to create small pure HTML pages without any JavaScript circa 1995. Just try it on Google Documents, the whole screen turns red. Deeply nested HTML Elements, lots of DOM elements are problematic?
I guess we shouldn't make fancy web pages, full desktop apps in the browser as browsers can't handle it. ^_
Not true at all. I design heavily interactive apps and my husband, Thomas, wrote the first OSS JavaScript animation library (Scriptaculous). We consistently push boundaries. It's what we do :)
Yep, making heavily interactive, heavy graphical web apps is a trade-off. That's why you have to know every single little thing that can slow things down, and then you have to make the decision which you can get away with and which you can't.
Well what do you think would score better given your tool, a page with basic HTML or google docs? Ok that's not a fair question, but the problem is with the suggestions, it suggests you to move toward a blank page. With nothing on it.
With the exception of maybe letsfreckle, those apps you mentioned are shiny and have some dynamicism, but they are not heavy client side apps. I can't see how letsfreckle performs on your tool given it has a paywall and there's no demo.
Having said that, I do want to read your book. I'll check it out.
So, what you're saying is, if our tool says your web app is "fat" and to "lose weight" -- so you plan to implement that suggestion by cutting off a leg?
Measurements exist for a reason. You have to use your own judgment to interpret them.
Why is serialized DOM size important? There is not a single circumstance where you should ever be serializing DOM to a string or parsing it from a string (innerHTML).
> Reduce the amount of <iframe> tags. There are 1 iframe elements on the page.
1 iframe isn't bad. This shouldn't even be worthy of a tip.
> Reduce the amount of tags that use the style attribute, replacing it with external CSS definitions. There are 1 nodes that use the style attribute.
1 style isn't bad either. They use it on their own page.
> Found 116 <script> tags on page. Try to reduce the amount of script tags.
This shouldn't be just a normal warn. 100+ script tags should be a major warning.
> Nesting depth is very high. Some of the nodes are nested more than 15 levels deep (these are marked with a dashed red border). > Nesting depth is a little high. Reducing it might increase performance.
Both of these are shown on HN. Only one should be shown.
> Some nodes use transparency. To improve rendering performance, try not to use the CSS opacity property (found 2 nodes, marked with a dashed blue border).
It would be awesome if it could highlight these nodes somehow. Actually, would be awesome if it could highlight all visibile nodes that match any warning/tip. They already do that with nodes at 15+ nesting depth.