# Chrome DevTools और Performance API — वेब प्रदर्शन अनुकूलन

Source: https://www.geekswithgeeks.com/hi/web-performance/web-perf-16

> प्रदर्शन समस्याओं को मापने और डीबग करने के लिए ब्राउज़र डेवलपर उपकरण का उपयोग करें।

## DevTools Performance और Lighthouse टैब

Use Performance tab to record and analyze runtime behavior. Lighthouse tab audits performance, accessibility, SEO. Key views: CPU usage, frame rate, main thread activity. Identify bottlenecks and optimization opportunities.

## Performance API और माप

Use `performance.mark()`, `performance.measure()` to track custom metrics. `performance.getEntriesByType()` retrieves navigation, resource, paint, and user timing data. Collect Web Vitals: `web-vitals` library.

## DevTools प्रोफाइलिंग टिप्स

Throttle CPU 4x to simulate older devices. Test on real devices regularly. Clear cache between runs. Record multiple loads to find patterns. Look for long tasks (red bars) blocking main thread.

त्वरित जाँच

**Quiz:** DevTools Lighthouse क्या ऑडिट करता है?

- [ ] प्रदर्शन, पहुंचयोग्यता, SEO
- [ ] केवल JavaScript त्रुटियां
- [ ] केवल CSS समस्याएं