https://github.com/pagespeed-pro/critical-css-widget

A browser widget to extract Critical CSS and Full CSS from a page. Can be used via the browser console.
https://github.com/pagespeed-pro/critical-css-widget

above-the-fold critical-css critical-path critical-rendering-path css extract javascript widget

Last synced: 7 days ago
JSON representation

A browser widget to extract Critical CSS and Full CSS from a page. Can be used via the browser console.

• Host: GitHub
• URL: https://github.com/pagespeed-pro/critical-css-widget
• Owner: pagespeed-pro
• Created: 2018-02-19T10:04:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T18:26:59.000Z (over 1 year ago)
• Last Synced: 2024-08-02T15:36:43.208Z (3 months ago)
• Topics: above-the-fold, critical-css, critical-path, critical-rendering-path, css, extract, javascript, widget
• Language: JavaScript
• Homepage: https://st.pagespeed.pro/
• Size: 1.82 MB
• Stars: 37
• Watchers: 4
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Critical CSS Widget [DEPRECATED]

**This widget is deprecated and may not work in newer browsers.**

Use our new widget: [https://github.com/pagespeed-pro/widget](https://github.com/pagespeed-pro/widget).

---

## About

A simple browser widget to extract Critical CSS and Full CSS from a page that can be used via the browser console.

The widget is based on a concept by Paul Kinlan, head of Chrome webdeveloper relations team.

https://gist.github.com/PaulKinlan/6284142

The 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`.

## Usage

Copy & paste the widget javascript code directly in the browser console (F12) and use the following methods with an optional callback to extract critical CSS.

### Extract Critical CSS

```javascript

// file download

critical.extract();

// callback

critical.extract('critical',function(css) {

   console.log('Extracted critical CSS:',css);

});

```

### Extract Full CSS

```javascript

// file download

critical.extract('full');

// callback

critical.extract('full',function(css) {

   console.log('Extracted Full CSS:',css);

});

```

### Copy & Paste Instant Extract

The following code will instantly start a Critical CSS download after pasting the code into the browser console.

```javascript

(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() {

   // critical css file download

   critical.extract();

});

```

The 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:

https://github.com/style-tools/critical-css-widget/blob/master/critical-css-widget.min.js