Skip to content

Instantly share code, notes, and snippets.

@scottjehl
Last active August 24, 2022 10:39
Show Gist options
  • Save scottjehl/b6129da04733e4e0f9a4 to your computer and use it in GitHub Desktop.
Save scottjehl/b6129da04733e4e0f9a4 to your computer and use it in GitHub Desktop.
critical CSS
/*
criticalCSS by @scottjehl. Run this on your CSS, get the styles that are applicable in the viewport (critical). The url arg should be any part of the URL of the stylesheets you'd like to parse. So, 'all.css' or '/css/' would both work.
*/
function criticalCSS( url ){
var sheets = document.styleSheets,
maxTop = window.innerHeight,
critical = [];
function aboveFold( rule ){
if( !rule.selectorText ){
return false;
}
var selectors = rule.selectorText.split(","),
criticalSelectors = [];
if( selectors.length ){
for( var l in selectors ){
var elem;
try {
// webkit is really strict about standard selectors getting passed-in
elem = document.querySelector( selectors[ l ] );
}
catch(e) {}
if( elem && elem.offsetTop <= maxTop ){
criticalSelectors.push( selectors[ l ] );
}
}
}
if( criticalSelectors.length ){
return criticalSelectors.join(",") + rule.cssText.match( /\{.+/ );
}
else {
return false;
}
}
for( var i in sheets ){
var sheet = sheets[ i ],
href = sheet.href,
rules = sheet.cssRules,
valid = true;
if( url && href && href.indexOf( url ) > -1 ){
for( var j in rules ){
var media = rules[ j ].media,
matchingRules = [];
if( media ){
var innerRules = rules[ j ].cssRules;
for( var k in innerRules ){
var critCSSText = aboveFold( innerRules[ k ] );
if( critCSSText ){
matchingRules.push( critCSSText );
}
}
if( matchingRules.length ){
matchingRules.unshift( "@media " + media.mediaText + "{" );
matchingRules.push( "}" );
}
}
else if( !media ){
var critCSSText = aboveFold( rules[ j ] );
if( critCSSText ){
matchingRules.push( critCSSText );
}
}
critical.push( matchingRules.join( "\n" ) );
}
}
}
return critical.join( "\n" );
}
// you could run this from the browser console to copy to your clipboard like this.
// I'm specifying that it only parse files whose URL contains "all.css"
copy( criticalCSS( "all.css" ) );
@SeanHaddy
Copy link

I ran this in a Desktop viewport, and applied the style to my page on runtime, to differ load of not critical CSS to post initial load (to fix render blocking), but unfortunately the majority of styles on my page break regardless. Seems that the detection is not working properly for styles affected in current viewport.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment