nucliweb / webperf-snippets

⚡️ 💾 Web Performance Snippets
https://webperf-snippets.nucliweb.net
MIT License
1.34k stars 72 forks source link
performance performance-analysis performance-metrics snippets webperf webperformance webvitals

Star History

A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools.

Chrome DevTools

Add snippet to Chrome DevTools

You can use the webperf-snippets as a Snippet in the Chrome DevTools Sources tab.

  1. Copy any of the WebPerf Snippets
  2. Open Chrome DevTools
  3. Select the Sources tab
  4. Select the Snippets sub tab
  5. Click New snippet button, e.g. LCP
  6. Write the snippet name, LCP
  7. Paste the copied code at the right area
  8. Run the snippet

Video

https://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8f6b-7b1e06b50040

Snippets

Visit webperf-snippets