Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

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

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

  • 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

  • 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 `bulma.css`` and `bulma.min.css`` 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

  • 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

Code

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

raw
- Run, 0, L-I, 266, I-CL, 0, CL-C 8
1703880386434
- Run, 1, L-I, 224, I-CL, 1, CL-C 9
1703880427337
- Run, 2, L-I, 333, I-CL, 1, CL-C 10
1703880465553
- Run, 3, L-I, 231, I-CL, 1, CL-C 8
1703880502040
- Run, 4, L-I, 316, I-CL, 1, CL-C 11
1703880545377

minified
- Run, 0, L-I, 250, I-CL, 1, CL-C 9
1703880594604
- Run, 1, L-I, 265, I-CL, 0, CL-C 10
1703880644886
- Run, 2, L-I, 241, I-CL, 0, CL-C 11
1703880714919
- Run, 3, L-I, 279, I-CL, 1, CL-C 10
1703880780965
- Run, 4, L-I, 270, I-CL, 0, CL-C 10
1703880820475

Legend

  • L-I = domLoading to domInteractive

  • I-CL = domInteractive to domContentLoadedEventStart

  • CL-C = domContentLoadedEventStart to domComplete

References