Lesson 16 / 25
Chrome DevTools and Performance API
Use browser developer tools and Performance API to measure and debug performance issues.
DevTools Performance and Lighthouse tabs
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 and measurements
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 profiling tips
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.
Quick check
Quick check: What does DevTools Lighthouse audit?
- Performance, accessibility, SEO
- Only JavaScript errors
- Only CSS issues