Google Chrome DevTools Extension for analyzing DOM size
Dom Size Analyzer Extension
According to (https://developers.google.com/web/tools/lighthouse/audits/dom-size), an optimal DOM tree has the following properties:
-Has less than 1500 nodes total.
-Has a maximum depth of 32 nodes.
-Has no parent node with more than 60 child nodes.
We can use this devtool to analyze a page's DOM to easily find out which parts of the page are adding weight to it.
****NEW*****
Scrolling the DOM element into view and highlighting it when hovered in this devtool.
Read more
-Has less than 1500 nodes total.
-Has a maximum depth of 32 nodes.
-Has no parent node with more than 60 child nodes.
We can use this devtool to analyze a page's DOM to easily find out which parts of the page are adding weight to it.
****NEW*****
Scrolling the DOM element into view and highlighting it when hovered in this devtool.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Dom Size Analyzer", "description": "Google Chrome DevTools Extension for analyzing DOM size", "version": "1.25", "permissions": ["*://*/*"], "devtools_page": "devtools.html", "web_accessible_resources": ["injectable.js"], "content_scripts": [ { "matches": [""], "js": ["contentScript.js"] } ], "background": { "scripts": ["backgroundScript.js"], "persistent": false }}
Read more