How can I measure CSS parsing and rendering time in a browser?
01:51 23 Mar 2017

I have a large SPA with a single large CSS file which contains many rules. Some of them are outdated and should be refactored or removed. It is compiled from a set of SCSS source files.

I am now refactoring styles and wonder if there is a way to measure how long it takes to render the page using some specific CSS file.

Say, I am in the start point, where there are a lot of crap in CSS, and I can see that with current bloated style sheet it takes 2.234 seconds to render the application.

Then, I refactor it step by step, apply some "optimizations", and on each step I can see that with some changes render time decreases, becoming, say, 2.21 seconds, and with some other changes this time increases, say, 2.5 seconds.

Is there a way to get that metric?

html css google-chrome optimization browser