{"id":13518949,"url":"https://github.com/micmro/performance-bookmarklet","last_synced_at":"2025-05-16T12:07:06.828Z","repository":{"id":21511159,"uuid":"24830227","full_name":"micmro/performance-bookmarklet","owner":"micmro","description":"Performance-Bookmarklet helps to analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - requests by type, domain, load times, marks and more. Sort of a light live WebPageTest.","archived":false,"fork":false,"pushed_at":"2023-03-03T11:28:45.000Z","size":4490,"stargazers_count":1147,"open_issues_count":15,"forks_count":86,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-04-02T05:57:44.382Z","etag":null,"topics":["analyzer","bookmarklet","browser-extension","navigation-timing","performance","performance-metrics","requests","resource-timing","user-timing","waterfall","webperf"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/micmro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2014-10-06T00:57:17.000Z","updated_at":"2025-03-12T08:36:33.000Z","dependencies_parsed_at":"2024-01-31T20:57:47.759Z","dependency_job_id":null,"html_url":"https://github.com/micmro/performance-bookmarklet","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2Fperformance-bookmarklet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2Fperformance-bookmarklet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2Fperformance-bookmarklet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2Fperformance-bookmarklet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micmro","download_url":"https://codeload.github.com/micmro/performance-bookmarklet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994119,"owners_count":21030050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analyzer","bookmarklet","browser-extension","navigation-timing","performance","performance-metrics","requests","resource-timing","user-timing","waterfall","webperf"],"created_at":"2024-08-01T05:01:51.197Z","updated_at":"2025-04-09T07:04:44.380Z","avatar_url":"https://github.com/micmro.png","language":"JavaScript","readme":"Performance-Bookmarklet\n=======================\n\nBookmarklet, [Chrome Extension](https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf) and [Firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/performance-analyser/) to analyze the current page through the [Resource Timing API](http://www.w3.org/TR/resource-timing), [Navigation Timing API](http://www.w3.org/TR/navigation-timing) and [User-Timing](http://www.w3.org/TR/user-timing/) - requests by type, domain, load times, marks and more - sort of a light live WebPageTest.\n\n\nJust add this into the URL section of a new bookmark:\n\n```\njavascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert(\"Looks like the Content Security Policy directive is blocking the use of bookmarklets\\n\\nYou can copy and paste the content of:\\n\\n\\\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\\\"\\n\\ninto your console instead\\n\\n(link is in console already)\");console.log(\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\");};document.getElementsByTagName('body')[0].appendChild(el);})();\n```\n\nYou can use the Performance-Bookmarklet (renamed as Performance-Analyser since it's not a Bookmarklet) as [Chrome Extension](https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf) or [Firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/performance-analyser/).\n\n\u003ca href=\"https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/perfbook-full.png\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/perfbook-full.png\" alt=\"screenshot showing the whole bookmarklet on http://google.com\" height=\"500\" /\u003e\u003c/a\u003e\n\n\nBookmarklet Output in Detail\n----------------------------\n\n### Navigation Timing Waterfall\n\n![alt text](https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/perfbook-navigation-timing-waterfall.png \"screenshot of navigation timing API waterfall output of bookmarklet on http://walmart.ca/en\")\n\n- It also displays markers and measures if you're setting marks with the [User Timing API](http://www.w3.org/TR/user-timing) (`performance.mark` and `performance.measure`)\n- Hover over the bars to see a tooltip with the exact Milliseconds/duration\n\n\u003cfigure\u003e\n  \u003cfigcaption\u003e\u003cstrong\u003eNavigation Timing API Details\u003c/strong\u003e\u003c/figcaption\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/navigation-timing-overview.svg\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/navigation-timing-overview.png\" alt=\"Diagram of the Navigation Timing API as seen on W3C site\" /\u003e\u003c/a\u003e\n\u003c/figure\u003e\n\n\n### Domain/Resource analysis\n\n![alt text](https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/perfbook-requests-pie-charts.png \"screenshot of pie graph output of bookmarklet on http://velocityconf.com/velocityny2014\")\n\n- Requests by domain:\n  - How many requests are added by 3rd parties - green wedges represent the current TLD and subdomains\n  - Avg. Duration: the mean of all request of this domain\n  - Duration Parallel: actual time a domain spends on the wire - de-duping parallel request duration\n  - Duration Sum: simple sum of the duration of all requests of this domain\n  - Percentage: the percentage of all requests coming from this domain\n- Requests by Initiator Type\n- Requests by Type - what content type is accountable for the majority of requests\n- Internal / extenal comparison charts  \n  *external is currently everything except the current host - exluding sub domains*\n\n\n### Resource Timing Waterfall with Markers\n\n![alt text](https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/perfbook-resources-timing-waterfall.png \"screenshot of resource timing API waterfall output of bookmarklet on http://stylify.me\")\n\n- The small bars inside the resource bar represent the different stages of the request (redirect, domainLookup, connect, secureConnect, requestToResponseStart, response), but are mostly unavailable for cross-domain requests.\n- The resource bar colours indicates the initiatorType\n- You can filter the waterfall chart by domain\n\n\u003cfigure\u003e\n  \u003cfigcaption\u003e\u003cstrong\u003eResource Timing API Details\u003c/strong\u003e\u003c/figcaption\u003e\n  \u003cbr/\u003e\u003cbr/\u003e\n  \u003ca href=\"https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/resource-timing-overview.svg\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/resource-timing-overview.png\" alt=\"Diagram of the Resource Timing API as seen on W3C site\" /\u003e\u003c/a\u003e\n\u003c/figure\u003e\n\n\nConsole Output\n--------------\n\nThe bookmarklet also outputs various console tables ([where supported](https://developer.mozilla.org/en-US/docs/Web/API/Console/table)) to analyze the data in detail.\n\n![alt text](https://raw.githubusercontent.com/micmro/resourceTable/gh-pages/readme-assets/perfbook-tables-resources.png \"tabular output in console of all resources in the page\")\n\nVarious page metrics can be persisted between page refreshes and later displayed in the console, when ticking the `Persist Data?` checkbox.\n\n\nHow to use this snippet\n-----------------------\n\nYou can use it as bookmarklet. Mozilla has a [step by step description](https://support.mozilla.org/en-US/kb/bookmarklets-perform-common-web-page-tasks#w_how-do-i-install-a-bookmarklet) on how to add a bookmarklet.\n\n```\njavascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert(\"Looks like the Content Security Policy directive is blocking the use of bookmarklets\\n\\nYou can copy and paste the content of:\\n\\n\\\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\\\"\\n\\ninto your console instead\\n\\n(link is in console already)\");console.log(\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\");};document.getElementsByTagName('body')[0].appendChild(el);})();\n```\n\nOr alternatifly just copy and paste the content of [performanceBookmarklet.js](https://raw.githubusercontent.com/micmro/performance-bookmarklet/master/dist/performanceBookmarklet.js) to your browser console.\n\n**You need to fall back to the browser extension or the copy and paste version for sites that block external scripts in their Content Security Policy directives.**\n\nBrowser Extensions\n------------------\nperformance-bookmarklet can also be used as [Chrome Extension](https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf) and [Firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/performance-analyser/). It uses the same code, but has some usability advantages, e.g. you don't need to worry about the Content Security Policy directives.\n\n\nRead more\n-----------\n- [Introduction to Resource Timing API](http://googledevelopers.blogspot.ca/2013/12/measuring-network-performance-with.html)\n- [Resource Timing API Browser Support](http://caniuse.com/#feat=resource-timing)\n- [HTML5 Rocks: Measuring Page Load Speed with Navigation Timing](http://www.html5rocks.com/en/tutorials/webperformance/basics)\n","funding_links":[],"categories":["JavaScript","Bookmarklets"],"sub_categories":["Meetups"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicmro%2Fperformance-bookmarklet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicmro%2Fperformance-bookmarklet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicmro%2Fperformance-bookmarklet/lists"}