{"id":13578083,"url":"https://github.com/pagespeed-pro/critical-css-widget","last_synced_at":"2025-12-28T22:07:13.539Z","repository":{"id":97109675,"uuid":"122044532","full_name":"pagespeed-pro/critical-css-widget","owner":"pagespeed-pro","description":"A browser widget to extract Critical CSS and Full CSS from a page. Can be used via the browser console.","archived":false,"fork":false,"pushed_at":"2023-03-05T18:26:59.000Z","size":1908,"stargazers_count":36,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-05T15:49:06.800Z","etag":null,"topics":["above-the-fold","critical-css","critical-path","critical-rendering-path","css","extract","javascript","widget"],"latest_commit_sha":null,"homepage":"https://st.pagespeed.pro/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pagespeed-pro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-19T10:04:01.000Z","updated_at":"2024-10-08T14:33:45.000Z","dependencies_parsed_at":"2023-03-12T05:01:06.327Z","dependency_job_id":null,"html_url":"https://github.com/pagespeed-pro/critical-css-widget","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagespeed-pro%2Fcritical-css-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagespeed-pro%2Fcritical-css-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagespeed-pro%2Fcritical-css-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagespeed-pro%2Fcritical-css-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pagespeed-pro","download_url":"https://codeload.github.com/pagespeed-pro/critical-css-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247359392,"owners_count":20926413,"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":["above-the-fold","critical-css","critical-path","critical-rendering-path","css","extract","javascript","widget"],"created_at":"2024-08-01T15:01:27.145Z","updated_at":"2025-12-28T22:07:13.475Z","avatar_url":"https://github.com/pagespeed-pro.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Critical CSS Widget [DEPRECATED]\n\n**This widget is deprecated and may not work in newer browsers.**\n\nUse our new widget: [https://github.com/pagespeed-pro/widget](https://github.com/pagespeed-pro/widget).\n\n---\n\n## About\n\nA simple browser widget to extract Critical CSS and Full CSS from a page that can be used via the browser console.\n\nThe widget is based on a concept by Paul Kinlan, head of Chrome webdeveloper relations team.\n\nhttps://gist.github.com/PaulKinlan/6284142\n\nThe snippet uses a Chrome innovation called `getMatchedCSSRules` which is deprecated and will be removed in Chrome 63. The Critical CSS Widget is made cross browser using a [polyfill](https://github.com/ovaldi/getMatchedCSSRules) for `getMatchedCSSRules`.\n\n## Usage\n\nCopy \u0026 paste the widget javascript code directly in the browser console (F12) and use the following methods with an optional callback to extract critical CSS.\n\n### Extract Critical CSS\n\n```javascript\n// file download\ncritical.extract();\n\n// callback\ncritical.extract('critical',function(css) {\n   console.log('Extracted critical CSS:',css);\n});\n```\n\n### Extract Full CSS\n\n```javascript\n// file download\ncritical.extract('full');\n\n// callback\ncritical.extract('full',function(css) {\n   console.log('Extracted Full CSS:',css);\n});\n```\n\n### Copy \u0026 Paste Instant Extract\n\nThe following code will instantly start a Critical CSS download after pasting the code into the browser console.\n\n```javascript\n(function(d,c,s) {s=d.createElement('script');s.async=true;s.onload=c;s.src='https://raw.githack.com/style-tools/critical-css-widget/master/critical-css-widget.min.js';d.head.appendChild(s);})(document,function() {\n   // critical css file download\n   critical.extract();\n});\n```\n\nThe snippet uses [raw.githack.com](https://raw.githack.com/). You can also directly copy the code from Github and insert it in the browser console:\n\nhttps://github.com/style-tools/critical-css-widget/blob/master/critical-css-widget.min.js","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpagespeed-pro%2Fcritical-css-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpagespeed-pro%2Fcritical-css-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpagespeed-pro%2Fcritical-css-widget/lists"}