Improve Overlay Loading Speed (#641)

Improve Overlay Loading Speed The current answers overlay instructions waits until the page "load" event before loading the overlay.js script. This can slow down the loading of the overlay quite a bit since some sites may take several seconds before firing that event. We can improve the performance by loading the overlay script immediately. All of the other scripts and files that the overlay loads will load much faster. When doing this, we need to wait to initialize the overlay until the DOM is ready or else the overlay load will fail. This PR is compatible with the original overlay instructions. This PR allows the integration to be split into two scripts: One for the overlay script and another for the overlay settings. Add an overlay page for testing the overlay with the test site. The file is minified because the "build-test-site" command will minify it during each build. Checking in the html minified means that running the build command won't trigger a git diff. Z=388238 TEST=manual Test this code on the Yanswers overlay integration and observe the overlay script start loading much sooner (~80ms vs ~800ms). When using the chrome dev tools "Fast 3G" Throttle, observe the overlay appear after ~12 seconds compared to the previous time of ~16 seconds.
yext · May 6, 2021 · 1c9fa6d · 1c9fa6d
1 parent 04912af
commit 1c9fa6d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
diff --git a/static/js/overlay/parent-frame/yxtanswersoverlay.js b/static/js/overlay/parent-frame/yxtanswersoverlay.js
@@ -57,5 +57,11 @@ export default class YextAnswersOverlay {
 }
 
 if (!global.YxtAnswersOverlay) {
-  global.YxtAnswersOverlay = new YextAnswersOverlay(window.YxtAnswersOverlaySettings);
+  if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', (event) => {
+      global.YxtAnswersOverlay = new YextAnswersOverlay(window.YxtAnswersOverlaySettings);
+    });
+  } else {
+    global.YxtAnswersOverlay = new YextAnswersOverlay(window.YxtAnswersOverlaySettings);
+  }
 }
diff --git a/test-site/.gitignore b/test-site/.gitignore
@@ -3,6 +3,7 @@
 !config/index.json
 !pages/index.html.hbs
 !public/iframe_test.html
+!public/overlay.html
 public/
 config/
 pages/

diff --git a/test-site/jambo.json b/test-site/jambo.json
@@ -10,6 +10,7 @@
       "directanswercards"
     ],
     "preservedFiles": [
+      "public/overlay.html",
       "public/iframe_test.html"
     ]
   },

diff --git a/test-site/public/overlay.html b/test-site/public/overlay.html
@@ -0,0 +1,25 @@
+<html><head><script>window.YxtAnswersOverlaySettings = {
+domain: "http://localhost:5042",
+experiencePath: "index.html", // Needed if your “main page” is not named index.html
+button: {
+  text: 'Questions?',
+  color: {
+    background: '#D01F2F',
+    text: '#FFFFFF'
+  },
+},
+panel: {
+  header: "Get your next donut fix.",
+  subtitle: "Search for doughnuts, locations, careers and gift cards.",
+  icon: "https://www.krispykreme.com/App_Themes/krispykremenew/Content/images/logo.png",
+  color: {
+    background: '#006938',
+    text: '#FFFFFF'
+  },
+},
+prompts: [
+  { text: "Best Donuts", },
+  { text: "Do you have gift cards?", },
+  { text: "I want a snack now", },
+]
+};</script><script async src="./overlay.js"></script></head><body></body></html>