Seems Like There's Effectively No Difference Parsing Minified CSS vs. Non - Minified

I ran a few samples pulling timing data for page loads in an attempt to tell if there was a difference between page load times with Minified vs. Non - Minified CSS. I wasn't able to identify one with my limited data run.

Based on > this Constructing the Object Model > https : //web.dev/articles/critical - rendering - path/constructing - the - object - model > post it looks like the only difference between the two would be lexing the characters into tokens. Someone with more resources will have to dig further into the weeds to see difference there.

Notes And Methodology

This is an attempt to see if there's a difference between the parsing times of a minified vs non - minified CSS file
It's tough to figure out exactly what to look for. The data I'm using is "domLoading", "domInteractive", "domContentLoaded", and "domComplete" from my Vivaldi browser's Navigation Timing API
My hypothesis based on the diagram on the > MDN Navigation and resource timings page > https : //developer.mozilla.org/en - US/docs/Web/Performance/Navigation _ and _ resource _ timings page > is that the CSS processing and creating of the > CSS Object Model > https : //developer.mozilla.org/en - US/docs/Web/Performance/Critical _ rendering _ path#css _ object _ model > is that the creation of the CSSOM happens in - between domLoading and domInteractive (along with a bunch of other stuff)
All this work happens after the file is received which should mean network times are taken out of it. I'm taking this approach to limit things to one variable at a time
Times have a resolution of milliseconds via the > DOMHighResTimeStamp > https : //developer.mozilla.org/en - US/docs/Web/API/Performance _ API/High _ precision _ timing#domhighrestimestamp >
This is only 5 runs per file type. That's not much. It was all manual and I don't have a non - trivial way to do a bigger run. Take it for what it's worth
The test files used were the [TODO: Code shorthand span ] and [TODO: Code shorthand span ] file which weigh in at 245,486 bytes and 207,302 bytes respectively
I'm not using any of the styles from the CSS, but based off this > Constructing the Object Model > https : //web.dev/articles/critical - rendering - path/constructing - the - object - model > post I expect that is effectively irrelevant. According to that page, by the time rendering happens everything has been converted into object
That page also points to the idea only real difference in timing would be lexing from the characters to the tokens
I ran the HTML file off localhost and called the CSS files externally in order to use a server that compressed them with brotli
The raw (non - minified) version of the file had domLoading to domInteractive times between 224 and 333ms. The minified version was 241 to 279ms
That makes me think that for my human level of processing any difference would be washed out by jitter across the rest of the system.
The raw is up top if you want to play with it. The results are below the data and code

The Data And Results

import json 

data = json.loads("""{
  "raw": [
    {
      "connectStart": 1703880386425,
      "navigationStart": 1703880386424,
      "secureConnectionStart": 0,
      "fetchStart": 1703880386424,
      "domContentLoadedEventStart": 1703880386700,
      "responseStart": 1703880386427,
      "domInteractive": 1703880386700,
      "domainLookupEnd": 1703880386425,
      "responseEnd": 1703880386427,
      "redirectStart": 0,
      "requestStart": 1703880386426,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880386434,
      "domComplete": 1703880386708,
      "domainLookupStart": 1703880386425,
      "loadEventStart": 1703880386708,
      "domContentLoadedEventEnd": 1703880386700,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880386426
    },

    {
      "connectStart": 1703880427334,
      "navigationStart": 1703880427331,
      "secureConnectionStart": 0,
      "fetchStart": 1703880427332,
      "domContentLoadedEventStart": 1703880427562,
      "responseStart": 1703880427335,
      "domInteractive": 1703880427561,
      "domainLookupEnd": 1703880427334,
      "responseEnd": 1703880427335,
      "redirectStart": 0,
      "requestStart": 1703880427334,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880427337,
      "domComplete": 1703880427571,
      "domainLookupStart": 1703880427334,
      "loadEventStart": 1703880427571,
      "domContentLoadedEventEnd": 1703880427562,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880427334
    },

    {
      "connectStart": 1703880465546,
      "navigationStart": 1703880465544,
      "secureConnectionStart": 0,
      "fetchStart": 1703880465544,
      "domContentLoadedEventStart": 1703880465887,
      "responseStart": 1703880465547,
      "domInteractive": 1703880465886,
      "domainLookupEnd": 1703880465546,
      "responseEnd": 1703880465548,
      "redirectStart": 0,
      "requestStart": 1703880465547,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880465553,
      "domComplete": 1703880465897,
      "domainLookupStart": 1703880465546,
      "loadEventStart": 1703880465897,
      "domContentLoadedEventEnd": 1703880465887,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880465547
    },

    {
      "connectStart": 1703880502035,
      "navigationStart": 1703880502030,
      "secureConnectionStart": 0,
      "fetchStart": 1703880502030,
      "domContentLoadedEventStart": 1703880502272,
      "responseStart": 1703880502036,
      "domInteractive": 1703880502271,
      "domainLookupEnd": 1703880502035,
      "responseEnd": 1703880502037,
      "redirectStart": 0,
      "requestStart": 1703880502035,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880502040,
      "domComplete": 1703880502280,
      "domainLookupStart": 1703880502035,
      "loadEventStart": 1703880502280,
      "domContentLoadedEventEnd": 1703880502272,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880502035
    },

    {
      "connectStart": 1703880545372,
      "navigationStart": 1703880545370,
      "secureConnectionStart": 0,
      "fetchStart": 1703880545370,
      "domContentLoadedEventStart": 1703880545694,
      "responseStart": 1703880545373,
      "domInteractive": 1703880545693,
      "domainLookupEnd": 1703880545372,
      "responseEnd": 1703880545375,
      "redirectStart": 0,
      "requestStart": 1703880545373,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880545377,
      "domComplete": 1703880545705,
      "domainLookupStart": 1703880545372,
      "loadEventStart": 1703880545705,
      "domContentLoadedEventEnd": 1703880545694,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880545373
    }
  ],
  "minified": [
    {
      "connectStart": 1703880594601,
      "navigationStart": 1703880594600,
      "secureConnectionStart": 0,
      "fetchStart": 1703880594600,
      "domContentLoadedEventStart": 1703880594855,
      "responseStart": 1703880594603,
      "domInteractive": 1703880594854,
      "domainLookupEnd": 1703880594601,
      "responseEnd": 1703880594603,
      "redirectStart": 0,
      "requestStart": 1703880594602,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880594604,
      "domComplete": 1703880594864,
      "domainLookupStart": 1703880594601,
      "loadEventStart": 1703880594865,
      "domContentLoadedEventEnd": 1703880594855,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880594602
    },

    {
      "connectStart": 1703880644884,
      "navigationStart": 1703880644882,
      "secureConnectionStart": 0,
      "fetchStart": 1703880644882,
      "domContentLoadedEventStart": 1703880645151,
      "responseStart": 1703880644885,
      "domInteractive": 1703880645151,
      "domainLookupEnd": 1703880644884,
      "responseEnd": 1703880644885,
      "redirectStart": 0,
      "requestStart": 1703880644884,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880644886,
      "domComplete": 1703880645161,
      "domainLookupStart": 1703880644884,
      "loadEventStart": 1703880645161,
      "domContentLoadedEventEnd": 1703880645151,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880644884
    },

    {
      "connectStart": 1703880714914,
      "navigationStart": 1703880714913,
      "secureConnectionStart": 0,
      "fetchStart": 1703880714913,
      "domContentLoadedEventStart": 1703880715160,
      "responseStart": 1703880714915,
      "domInteractive": 1703880715160,
      "domainLookupEnd": 1703880714914,
      "responseEnd": 1703880714916,
      "redirectStart": 0,
      "requestStart": 1703880714915,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880714919,
      "domComplete": 1703880715171,
      "domainLookupStart": 1703880714914,
      "loadEventStart": 1703880715171,
      "domContentLoadedEventEnd": 1703880715160,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880714915
    },

    {
      "connectStart": 1703880780962,
      "navigationStart": 1703880780959,
      "secureConnectionStart": 0,
      "fetchStart": 1703880780960,
      "domContentLoadedEventStart": 1703880781245,
      "responseStart": 1703880780963,
      "domInteractive": 1703880781244,
      "domainLookupEnd": 1703880780962,
      "responseEnd": 1703880780964,
      "redirectStart": 0,
      "requestStart": 1703880780962,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880780965,
      "domComplete": 1703880781255,
      "domainLookupStart": 1703880780962,
      "loadEventStart": 1703880781255,
      "domContentLoadedEventEnd": 1703880781245,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880780962
    },

    {
      "connectStart": 1703880820470,
      "navigationStart": 1703880820467,
      "secureConnectionStart": 0,
      "fetchStart": 1703880820468,
      "domContentLoadedEventStart": 1703880820745,
      "responseStart": 1703880820471,
      "domInteractive": 1703880820745,
      "domainLookupEnd": 1703880820470,
      "responseEnd": 1703880820471,
      "redirectStart": 0,
      "requestStart": 1703880820470,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880820475,
      "domComplete": 1703880820755,
      "domainLookupStart": 1703880820470,
      "loadEventStart": 1703880820755,
      "domContentLoadedEventEnd": 1703880820746,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880820470
    }
  ]
}""")

for content in ["raw", "minified"]:
  print(content)
  for num, run in enumerate(data[content]):
    li = run["domInteractive"] - run["domLoading"]
    icl = run["domContentLoadedEventStart"] - run["domInteractive"]
    clc = run["domComplete"] - run["domContentLoadedEventStart"]

    print(f"- Run, {num}, L-I, {li}, I-CL, {icl}, CL-C {clc}")
    print(run["domLoading"])
  print()

results start

Legend

L - I = domLoading to domInteractive
I - CL = domInteractive to domContentLoadedEventStart
CL - C = domContentLoadedEventStart to domComplete

~ fin ~

Seems Like There's Effectively No Difference Parsing Minified CSS vs. Non - Minified

Notes And Methodology

The Data And Results

Legend

References