NCEAS / metacatui

MetacatUI: A client-side web interface for DataONE data repositories
https://nceas.github.io/metacatui
Apache License 2.0
42 stars 24 forks source link

Investigate the loading impact of the standardizing the location of `config.js` for Helm-Based Kubernetes deployments #2453

Open robyngit opened 2 weeks ago

robyngit commented 2 weeks ago

For deployments of MetacatUI using Helm on Kubernetes, we propose standardizing the location of the config.js file to config/config.js. Currently, in some deployments, we are manually editing the index.html to adjust the path defined by var appConfigPath = "/config/config.js"; to point to a theme-specific configuration at var appConfigPath = "/js/themes/THEMENAME/config.js";.

This adjustment is necessary for deployments utilizing a theme config file which contains all base theme configurations, in contrast to the usual config/config.js that contains overrides. We hypothesize that requiring metacatui to load two separate config files might increase loading times, particularly first contentful paint time. This theory needs empirical verification.

This issue will serve as a platform to share insights on the performance implications of this configuration setup.

See also: #2027

robyngit commented 2 weeks ago

TL;DR:

➡️ The performance implications of using config/config.js vs /js/themes/arctic/config.js are negligible. ⬅️

Test setup:


Test 1: Using /config/config.js

index.html:

var appConfigPath = "/config/config.js";

config/config.js:

MetacatUI.AppConfig = {
  root: "/",
  theme: "arctic"
};

Results:

First Contentful Paint: 0.2 s Total Blocking Time: 24,280 ms Largest Contentful Paint: 5.2 s

Full report

test1

Repeated metrics:

Full report

First Contentful Paint 0.2 s Total Blocking Time 26,450 ms Largest Contentful Paint 5.2 s


Test 2: Using /js/themes/arctic/config.js

index.html:

var appConfigPath = "/js/themes/arctic/config.js";

no loading of config/config.js

Results:

First Contentful Paint: 0.2 s Total Blocking Time: 23,860 ms Largest Contentful Paint: 5.8 s

Full report

test2

Repeated metrics:

Full report

First Contentful Paint 0.2 s Total Blocking Time 18,270 ms Largest Contentful Paint 3.7 s


Conclusion: