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

…locking scripts delaying DomContentLoaded. (#2158)
bigcommerce · Feb 18, 2022 · 60909e2 · 60909e2
1 parent 7e2ccfb
commit 60909e2
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 14 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)
 - Cornerstone performance optimizations: remove unused fonts. [#2176](https://github.com/bigcommerce/cornerstone/pull/2176)
 - Update stencil-utils package. [#2157](https://github.com/bigcommerce/cornerstone/pull/2157)
 

diff --git a/assets/js/theme/common/font.js 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
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
@@ -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
@@ -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: {