From b21fb4dc8bb4d44a38c68289ad06bb057d9fd933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cbc-yevhenii-buliuk=E2=80=9D?=
 <“yevhenii.buliuk@bigcommerce.com”>
Date: Mon, 10 Jan 2022 18:03:00 +0200
Subject: [PATCH] fix(storefront): BCTHEME-991 Cornerstone performance
 optimizations: blocking scripts delaying DomContentLoaded.

---
 CHANGELOG.md                   |  1 +
 assets/js/theme/common/font.js | 13 +++++++++++++
 package-lock.json              |  5 +++++
 package.json                   |  1 +
 templates/layout/base.html     | 26 ++++++++++++--------------
 webpack.common.js              |  1 +
 6 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 assets/js/theme/common/font.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a72f273b90..ff41208f74 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Cornerstone performance optimizations: blocking scripts delaying DomContentLoaded. [#2158](https://github.com/bigcommerce/cornerstone/pull/2158)
 
 ## 6.2.0 (12-13-2021)
 - Fix tooltip on close button of modal is shifted. [#2148](https://github.com/bigcommerce/cornerstone/pull/2148)
diff --git a/assets/js/theme/common/font.js b/assets/js/theme/common/font.js
new file mode 100644
index 0000000000..0649314b8a
--- /dev/null
+++ b/assets/js/theme/common/font.js
@@ -0,0 +1,13 @@
+const WebFont = require('webfontloader');
+
+const linkEl = document.querySelector('link[href*="https://fonts.googleapis.com/css"]');
+const fontUrl = linkEl.getAttribute('href');
+const regexFontsCollection = /family=([^&]*)/gm;
+const families = regexFontsCollection.exec(fontUrl)[1].replace(/\+/gm, ' ').split('|');
+
+WebFont.load({
+    custom: {
+        families,
+    },
+    classes: false,
+});
diff --git a/package-lock.json b/package-lock.json
index b5b06e08ef..db93c4b284 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21330,6 +21330,11 @@
         }
       }
     },
+    "webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+    },
     "webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
diff --git a/package.json b/package.json
index 7335981432..7174764617 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "slick-carousel": "^1.8.1",
     "svg-injector": "^1.1.3",
     "sweetalert2": "^9.17.2",
+    "webfontloader": "^1.6.28",
     "whatwg-fetch": "^3.6.1"
   },
   "devDependencies": {
diff --git a/templates/layout/base.html b/templates/layout/base.html
index 9ce3d896f1..b2c78ec9a0 100644
--- a/templates/layout/base.html
+++ b/templates/layout/base.html
@@ -25,19 +25,12 @@
             window.lazySizesConfig.loadMode = 1;
         </script>
         <script async src="{{cdn 'assets/dist/theme-bundle.head_async.js'}}"></script>
+        
+        {{getFontsCollection font-display='block'}}
+        
+        <link rel="preload" href="{{cdn 'assets/dist/theme-bundle.font.js'}}" as="script">
+        <script async src="{{cdn 'assets/dist/theme-bundle.font.js'}}"></script>
 
-        <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
-
-        <script>
-            WebFont.load({
-                custom: {
-                    families: ['Karla', 'Roboto', 'Source Sans Pro']
-                },
-                classes: false
-            });
-        </script>
-
-        {{ getFontsCollection }}
         {{{stylesheet '/assets/css/theme.css'}}}
 
         {{{head.scripts}}}
@@ -58,6 +51,9 @@
         {{~inject 'carouselArrowAndDotAriaLabel' (lang 'carousel.arrow_and_dot_aria_label')}}
         {{~inject 'carouselActiveDotAriaLabel' (lang 'carousel.active_dot_aria_label')}}
         {{~inject 'carouselContentAnnounceMessage' (lang 'carousel.content_announce_message')}}
+
+        {{!-- Get this loading ASAP --}}
+        <link rel="preload" href="{{cdn 'assets/dist/theme-bundle.main.js'}}" as="script">
     </head>
     <body>
         <svg data-src="{{cdn 'img/icon-sprite.svg'}}" class="icons-svg-sprite"></svg>
@@ -67,11 +63,13 @@
         {{> components/common/footer }}
 
         <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
-        <script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
         <script>
             {{!-- Exported in app.js --}}
-            window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
+            function onThemeBundleMain() {
+                window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
+            }
         </script>
+        <script async defer src="{{cdn 'assets/dist/theme-bundle.main.js'}}" onload="onThemeBundleMain()"></script>
 
         {{{footer.scripts}}}
     </body>
diff --git a/webpack.common.js b/webpack.common.js
index 7603dff18b..28526b2312 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -11,6 +11,7 @@ module.exports = {
     entry: {
         main: './assets/js/app.js',
         head_async: ['lazysizes'],
+        font: './assets/js/theme/common/font.js',
         polyfills: './assets/js/polyfills.js',
     },
     module: {