How to measure CSS parsing and rendering time in a browser?

Question

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 stylesheet it takes 2.234 seconds to render the app.

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?

Autohypnosis

You could use a plugin like Page Load Time[In the Chrome plugins store] to give you detailed information, but to my knowledge the only metrics measured by time are the network times(in Chrome at least) – Prognostication

Just curious, but why a single bloated css file for your entire app? You can break your scss into modules per each component and that gets compiled for only the components that get rendered in the browser. – Rattly

Completely untested and I'm away from a keyboard, but what if you inline your stylsheet and then wrap your style element into script blocks, each calling performance.now() ? This should give you the parsing time. Now for the rendering time, it will be harder... – Herb

Answer 1

Use the Developers Tools panel which is built in to Google Chrome. It's also similar to that of Firefox and Safari with obvious minor changes here and there. That will tell you when the file is being loaded and also how long it's taking to load up as well.

Take a look at the documentation for Chrome.

You can open the Chrome DevTools by using the Alt + Cmd + I on macOS or Ctrl + Shift + I on Windows. It's a very comprehensive document with all the info there.

In case someone asks for the Firefox version, it's called The Waterfall. See here for more information. Again, it's very thorough.

Copyhold

I don't need to analyze how the file is loaded via network, I need to know how browser parses CSS file and renders the page with it. – Autohypnosis

Is this what you're looking then? If not then I don't fully understand what you're asking. – Copyhold

Say, I have two CSS files - one with 2 simple rules, another one with 20000 rules. First is parsed and applied to page in n seconds, and another one takes m seconds. How do I know that time and find correlation between my changes to a file and the time needed? – Autohypnosis

Answer 2

To measure CSS parsing and rendering time:

• Open DevTools (F12 or Ctrl+Shift+I/Cmd+Option+I).
• Go to the Performance tab.
• Record the performance by clicking the record button, then refresh or interact with the page.
• Stop recording and analyze the results for Style Recalculation and Layout times to see how CSS affects performance.

Cartoon

This specifically measures the CSS parsing and rendering time and nothing else? – Fluorescence

while this code might answer the question, adding some context and explanation would improve the quality of your answer – Hearts

Answer 3

use WebPageTest is a free online tool that provides detailed performance analysis, including CSS parsing and rendering times. https://www.webpagetest.org/ Configure Test Settings (Optional): You can configure various settings such as location, browser type, and connection speed. click Start the Test

Cowgill