fix(storefront): BCTHEME-991 Cornerstone performance optimizations: blocking scripts delaying DomContentLoaded.

Author: “bc-yevhenii-buliuk”

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)

assets/js/theme/common/font.js

@@ -0,0 +1,8 @@
+const WebFont = require('webfontloader');
+
+WebFont.load({
+    custom: {
+        families: ['Karla', 'Roboto', 'Source Sans Pro', 'Volkhov', 'Montserrat', 'Open Sans']
+    },
+    classes: false
+});

package-lock.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": {

package.json

@@ -26,16 +26,7 @@
         </script>
         <script async src="{{cdn 'assets/dist/theme-bundle.head_async.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>
+        <script src="{{cdn 'assets/dist/theme-bundle.font.js'}}"></script>
 
         {{ getFontsCollection }}
         {{{stylesheet '/assets/css/theme.css'}}}
@@ -67,11 +58,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 defer src="{{cdn 'assets/dist/theme-bundle.main.js'}}" onload="onThemeBundleMain()"></script>
 
         {{{footer.scripts}}}
     </body>

templates/layout/base.html

@@ -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: {