https://github.com/gokulcodes/lattize
A Chrome DevTools extension that shows overall performance metrics of any website.
https://github.com/gokulcodes/lattize
chrome-extension html metrics performance tree-visualization
Last synced: about 1 month ago
JSON representation
A Chrome DevTools extension that shows overall performance metrics of any website.
- Host: GitHub
- URL: https://github.com/gokulcodes/lattize
- Owner: gokulcodes
- Created: 2025-04-02T03:27:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-11T16:43:55.000Z (9 months ago)
- Last Synced: 2025-12-30T23:59:47.286Z (5 months ago)
- Topics: chrome-extension, html, metrics, performance, tree-visualization
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# lattize
A Chrome DevTools extension that shows overall performance metrics of any website.
## Requirements
- Total number of nodes rendered
- Total memory consumed for rendering [RAM]
- System Specs [cores, CPU, model]
- Visualizer for DOM Tree and it’s dependent CSS and API calls attached to it.
- Maximum depth of DOM tree
- Total time for HTML[DOM] and CSS[CSSOM] parsing
- Time taken to render each children in DOM Tree
- Average FPS on Repaint [Calculate Realtime]
- First Content Full Paint, Largest ContentFull paint, Blocking Time
- Simultaneous Visualization for APIs - Listen to all network made by the app during rendering.
- Detailed description of each API, time taken, is it blocking call etc?
- Tag cached response for each request for html download, images, JSON etc
- Total data consumed for downloading resources and also specify size for each downloads
- Security violations
- Accessibility recommendations
- Show how this like is view across different apps like whatsapp, facebook, linkedIn, twitter while sharing. As these SEO tags like OG:title,OG:description, OG:image etc. are used for getting the information about the HTML page. Refer [https://ogp.me/]
- Total call stack operations performed so far.
- Feed all these mistakes to q/a model and show’s results. Don’t upload any sensitive information about the website
## Chrome APIs
* These are the API used to develop Lattize extension
- chrome.processes
- chrome.system
- chrome.webRequests
- chrome.dom
- chrome.events
- chrome.performance
- chrome.recorder
- chrome.power
- chrome.idle
- chrome.search
- chrome.storage
- chrome.topSites
- chrome.tts
- chrome.omnibox
- chrome.pageCapture
- chrome.tabCapture
- chrome.history
- chrome.cookies
- chrome.contextMenus
- chrome.runtime
## Get Started
- After cloning the repo, Run the following command:
```
npm install
npm run build
```
- dist/ folder will be generated in the root path
* Go to chrome, enable developer mode
* Click on Load Unpacked
* Point the dist/ folder in the folder picker
* Lattize will be accessible from devtools
Previews:
