Forked from PaulKinlan/criticalcss-bookmarklet-devtool-snippet.js
Last active
December 22, 2015 11:58
-
-
Save drewwells/6468751 to your computer and use it in GitHub Desktop.
Add reporting at the end. I build the original CSS from webkit's parser. The original CSS will be larger than this if no minification is used.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
var CSSCriticalPath = function(w, d, opts) { | |
var opt = opts || {}; | |
var css = {}; | |
var pushCSS = function(r) { | |
if(!!css[r.selectorText] === false) css[r.selectorText] = {}; | |
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/); | |
for(var i = 0; i < styles.length; i++) { | |
if(!!styles[i] === false) continue; | |
var pair = styles[i].split(": "); | |
pair[0] = pair[0].trim(); | |
pair[1] = pair[1].trim(); | |
css[r.selectorText][pair[0]] = pair[1]; | |
} | |
}; | |
var parseTree = function() { | |
// Get a list of all the elements in the view. | |
var height = w.innerHeight; | |
var walker = d.createTreeWalker(d, NodeFilter.SHOW_ELEMENT, function(node) { return NodeFilter.FILTER_ACCEPT; }, true); | |
while(walker.nextNode()) { | |
var node = walker.currentNode; | |
var rect = node.getBoundingClientRect(); | |
if(rect.top < height || opt.scanFullPage) { | |
var rules = w.getMatchedCSSRules(node); | |
if(!!rules) { | |
for(var r = 0; r < rules.length; r++) { | |
pushCSS(rules[r]); | |
} | |
} | |
} | |
} | |
}; | |
this.generateCSS = function() { | |
var finalCSS = ""; | |
for(var k in css) { | |
finalCSS += k + " { "; | |
for(var j in css[k]) { | |
finalCSS += j + ": " + css[k][j] + "; "; | |
} | |
finalCSS += "}\n"; | |
} | |
return finalCSS; | |
}; | |
parseTree(); | |
}; | |
var cp = new CSSCriticalPath(window, document); | |
var css = cp.generateCSS(); | |
var originalCSS = Array.prototype.slice.call(document.styleSheets[0].rules).map(function(n){ return n.cssText; }).join(''); | |
console.log('Critical CSS Length', css.length); | |
console.log('Original CSS Length', originalCSS.length); | |
return 'Efficiency Index ' + (Math.floor(css.length/originalCSS.length * 10000)/100) + '%'; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment