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.
python
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