From 3b11ac517cd1c7f275f5410ac06608def2760036 Mon Sep 17 00:00:00 2001 From: Yury Bondarenko Date: Wed, 1 Feb 2023 13:10:37 +0100 Subject: [PATCH 1/2] Add configuration option to disable inlined CSS in SSR HTML When inlining CSS, Angular Universal needs to extract critical styles. This seems to take up a significant chunk of processing time. However, loading may appear less smooth when this feature is disabled. Added to the configuration to make it easier to A/B test this without a full re-build. (cherry picked from commit 38a058d7af6e43eb27bb3b8ce34472a0235085fd) --- server.ts | 1 + src/config/universal-config.interface.ts | 9 +++++++++ src/environments/environment.production.ts | 3 ++- src/environments/environment.ts | 3 ++- 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/server.ts b/server.ts index da085f372f..93f3e86876 100644 --- a/server.ts +++ b/server.ts @@ -131,6 +131,7 @@ export function app() { server.engine('html', (_, options, callback) => ngExpressEngine({ bootstrap: ServerAppModule, + inlineCriticalCss: environment.universal.inlineCriticalCss, providers: [ { provide: REQUEST, diff --git a/src/config/universal-config.interface.ts b/src/config/universal-config.interface.ts index c088dcd657..3ff68fea66 100644 --- a/src/config/universal-config.interface.ts +++ b/src/config/universal-config.interface.ts @@ -4,4 +4,13 @@ export interface UniversalConfig extends Config { preboot: boolean; async: boolean; time: boolean; + + /** + * Whether to inline "critical" styles into the server-side rendered HTML. + * + * Determining which styles are critical is a relatively expensive operation; + * this option can be disabled to boost server performance at the expense of + * loading smoothness. + */ + inlineCriticalCss?; } diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts index 09b5f19ade..7dd9bd2aa3 100644 --- a/src/environments/environment.production.ts +++ b/src/environments/environment.production.ts @@ -7,6 +7,7 @@ export const environment: Partial = { universal: { preboot: true, async: true, - time: false + time: false, + inlineCriticalCss: true, } }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index dc0e808be0..10f71618e1 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -12,7 +12,8 @@ export const environment: Partial = { universal: { preboot: false, async: true, - time: false + time: false, + inlineCriticalCss: true, } }; From fd10fbe2a81556c77b69222a73465b0958a4d22a Mon Sep 17 00:00:00 2001 From: Yury Bondarenko Date: Fri, 22 Mar 2024 16:23:09 +0100 Subject: [PATCH 2/2] Add to config.example.yml (cherry picked from commit 4a39f33006e07da2286551010839ba32d5175a41) --- config/config.example.yml | 7 +++++++ src/config/universal-config.interface.ts | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/config/config.example.yml b/config/config.example.yml index 76d73a2693..e87ad1f89f 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -17,6 +17,13 @@ ui: # Trust X-FORWARDED-* headers from proxies (default = true) useProxies: true +universal: + # Whether to inline "critical" styles into the server-side rendered HTML. + # Determining which styles are critical is a relatively expensive operation; + # this option can be disabled to boost server performance at the expense of + # loading smoothness. + inlineCriticalCss: true + # The REST API server settings # NOTE: these settings define which (publicly available) REST API to use. They are usually # 'synced' with the 'dspace.server.url' setting in your backend's local.cfg. diff --git a/src/config/universal-config.interface.ts b/src/config/universal-config.interface.ts index 3ff68fea66..eb89264e37 100644 --- a/src/config/universal-config.interface.ts +++ b/src/config/universal-config.interface.ts @@ -12,5 +12,5 @@ export interface UniversalConfig extends Config { * this option can be disabled to boost server performance at the expense of * loading smoothness. */ - inlineCriticalCss?; + inlineCriticalCss?: boolean; }