fix(storefront): BCTHEME-991 Cornerstone performance optimizations: b…

…locking scripts delaying DomContentLoaded.
bigcommerce · Jan 27, 2022 · a535a91 · a535a91
1 parent 0e132e8
commit a535a91
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 13 deletions.
diff --git 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
@@ -0,0 +1,8 @@
+const WebFont = require('webfontloader');
+
+WebFont.load({
+    custom: {
+        families: ['Karla', 'Roboto', 'Source Sans Pro', 'Volkhov', 'Montserrat', 'Open Sans'],
+    },
+    classes: false,
+});
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -26,18 +26,9 @@
         </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 src="{{cdn 'assets/dist/theme-bundle.font.js'}}"></script>
 
-        <script>
-            WebFont.load({
-                custom: {
-                    families: ['Karla', 'Roboto', 'Source Sans Pro']
-                },
-                classes: false
-            });
-        </script>
-
-        {{ getFontsCollection }}
+        {{ getFontsCollection font-display='block' }}
         {{{stylesheet '/assets/css/theme.css'}}}
 
         {{{head.scripts}}}
@@ -58,6 +49,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 +61,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
@@ -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: {