13

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?

Sergei Basharov
  • 51,276
  • 73
  • 200
  • 335
  • 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) – Aleksandar Misich Mar 23 '17 at 08:28
  • 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. – nashcheez Mar 23 '17 at 08:47
  • 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... – Kaiido Mar 23 '17 at 11:51

1 Answers1

0

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.

  • 4
    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. – Sergei Basharov Mar 23 '17 at 10:07
  • 1
    [Is this what you're looking then?](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction) If not then I don't fully understand what you're asking. –  Mar 23 '17 at 10:11
  • 5
    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? – Sergei Basharov Mar 23 '17 at 10:23