nucliweb / webperf-snippets Goto Github PK

View Code? Open in Web Editor NEW

1.3K 24.0 72.0 367 KB

⚡️ 💾 Web Performance Snippets

Home Page: https://webperf-snippets.nucliweb.net

License: MIT License

JavaScript 19.17% MDX 80.83%

performance performance-analysis performance-metrics snippets webperf webperformance webvitals

webperf-snippets's Introduction

Star History

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

Add snippet to Chrome DevTools

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

Video

Snippet.mp4

Snippets

Visit webperf-snippets

webperf-snippets's People

Contributors

Stargazers

Watchers

webperf-snippets's Issues

Check the script by @paulcalvano

https://github.com/paulcalvano/webfont-usage-analyzer

3rd party script timing failing

This is failing if the info script returns undefined.

.map will fail and halt the rest of the script.

Example of apple.com, they have no third party scripts.

Will fix this and raise PR.

[Markdown] An option to highlight a "Note" and "Warning" using blockquote

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Export/import snippets

First of all, thanks @nucliweb for sharing and the great work! 😍

Would it make sense to have a file ready to be imported in DevTools? I found this: https://levelup.gitconnected.com/snippets-in-google-chrome-62636236b766#910f

LCP Snippet not working

I just copied and pasted the LCP script from the site, and I get this error message :

Uncaught EvalError: Identifier 'dedupe' cannot be declared with 'var' in current evaluation scope, consider trying 'let' instead
at eval (LCP:1:1)
at JSON.parse ()
at h (default~~live-chat-app~~live-stream-app.ad98fe07.js:2:130276)
at h (default~~live-chat-app~~live-stream-app.ad98fe07.js:2:130269)
at default~~live-chat-app~~live-stream-app.ad98fe07.js:2:130385

Log wrong interactions.

webperf-snippets/pages/Interaction/Interactions.mdx

Line 26 in 080be73

.filter((entry) => !entry.interactionId)) {

Please check the snippet for interaction:

I see that this snippet logs interaction only with interactionId = 0, and it seems to be wrong, according to documentation and example here: https://web.dev/articles/diagnose-slow-interactions-in-the-lab?hl=pl#use_a_javascript_snippet

We should log with interactionId > 0.

Mac/iOS Perf Shortcuts

Hey Joan, how should we handle this? Some shortcuts relate, some don't, some rely on third party apps as well. Should it just be a markdown file with a description and icloud link?