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

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

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

## DevTools Performance और Lighthouse टैब

Runtime behavior record और analyze करने के लिए Performance tab इस्तेमाल करें। Lighthouse tab performance, accessibility और SEO audit करता है। मुख्य views: CPU usage, frame rate, main thread activity। Bottlenecks और optimization के मौके पहचानें।

## Performance API और माप

Custom metrics track करने के लिए `performance.mark()` और `performance.measure()` इस्तेमाल करें। `performance.getEntriesByType()` navigation, resource, paint और user timing data देता है। Web Vitals के लिए `web-vitals` library इस्तेमाल करें।

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

पुराने devices simulate करने के लिए CPU को 4x throttle करें। नियमित रूप से real devices पर test करें। Runs के बीच cache clear करें। Patterns पकड़ने के लिए कई बार load record करें। main thread को block करने वाले long tasks (red bars) देखें।

त्वरित जाँच

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

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

*Answer:* प्रदर्शन, पहुंचयोग्यता, SEO. Lighthouse performance, accessibility और SEO सहित कई categories audit करता है।