import { CldVideoPlayer } from "next-cloudinary";
A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools.
<picture style={{ marginTop: "20px", display: "block" }}> <img style={{ aspectRatio: 342 / 214 }} sizes="85vw" srcSet="https://res.cloudinary.com/nucliweb/image/upload/c_scale,f_auto,q_auto,w_600/v1685735993/webperf-snippets/DevTools-Snippets.png 600w, https://res.cloudinary.com/nucliweb/image/upload/c_scale,f_auto,q_auto,w_1200/v1685735993/webperf-snippets/DevTools-Snippets.png 1200w" src="http://github.com/%3Ca%20href="https://res.cloudinary.com/nucliweb/image/upload/c_scale,f_auto,q_auto,w_342/v1685735993/webperf-snippets/DevTools-Snippets.png" rel="nofollow">https://res.cloudinary.com/nucliweb/image/upload/c_scale,f_auto,q_auto,w_342/v1685735993/webperf-snippets/DevTools-Snippets.png" loading="eager" decoding="sync" fetchpriority="high" alt="Chrome DevTools" />
All the snippets are tested in Google Chrome browser, so use this browser to garantize the correct funcionality.
You can copy any snippet and then paste in the browser console and run it to get the result
You can use the webperf-snippets as a Snippet in the Chrome DevTools Sources tab.
- Copy any of the WebPerf Snippets
- Open Chrome DevTools
- Select the Sources tab
- Select the Snippets sub tab
- Click New snippet button, e.g. LCP
- Write the snippet name, LCP
- Paste the copied code at the right area
- Run the snippet