# ๐ KanmiPerf
> Real-time in-browser Core Web Vitals diagnostics โ no setup, just insights.
[](https://www.npmjs.com/package/kanmi-perf)
[](https://konfirmed.github.io/KanmiPerf/)
**KanmiPerf** helps developers **identify**, **understand**, and **fix** web performance issues directly in the browser console.
---
## ๐ธ Visual Output
```txt
[KanmiPerf ๐] โ ๏ธ LCP
- Largest Contentful Paint: 2300ms
- Element: IMG
โ Optimize images, text, and video content for faster loading
```
---
## ๐ฆ Installation
**CDN (IIFE)**
```html
```
**ESM Module**
```js
import KanmiPerf from "https://cdn.jsdelivr.net/npm/kanmi-perf@0.2.0/dist/kanmi-perf.esm.js";
KanmiPerf.init();
```
**NPM**
```bash
npm install kanmi-perf
```
```js
import KanmiPerf from 'kanmi-perf';
KanmiPerf.init();
```
---
## ๐งช Usage
- Use `.init()` to auto-run on load.
- Or call `.run()` manually for immediate analysis.
```js
KanmiPerf.run();
console.log(KanmiPerf.metrics);
console.log(KanmiPerf.issues);
```
---
## ๐ฌ What It Detects
- ๐ผ๏ธ Images missing dimensions (CLS)
- ๐ฆ Blocking `