Defer JS to enhance performance (#4783)

mitodl · Feb 16, 2021 · 076d78e · 076d78e
1 parent b22b116
commit 076d78e
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 86 deletions.
diff --git a/cms/templates/cms/benefits_page.html b/cms/templates/cms/benefits_page.html
@@ -51,13 +51,15 @@ <h1 class="title">
       </div>
       {% if '/organizations/' in request.path %}
         <div class="mdl-cell mdl-cell--4-col sticky-top">
-          <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
+          <script defer charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
           <script>
-            hbspt.forms.create({
-              portalId: "{{ hubspot_portal_id | safe }}",
-              formId: "{{ hubspot_ogranizations_form_guid | safe }}"
+            document.addEventListener("DOMContentLoaded", function() {
+              hbspt.forms.create({
+                portalId: "{{ hubspot_portal_id | safe }}",
+                formId: "{{ hubspot_ogranizations_form_guid | safe }}"
+              });
             });
-          </script>
+        </script>
         </div>
       {% endif %}
     </div>
@@ -72,6 +74,6 @@ <h1 class="title">
   <!-- signup dialog React component injected here -->
 </div>
 {% load render_bundle %}
-{% render_bundle "public" %}
+{% render_bundle "public" "defer" %}
 <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
 {% endblock %}
diff --git a/cms/templates/cms/home_page.html b/cms/templates/cms/home_page.html
@@ -44,7 +44,7 @@
 {% block extrahead %}
   {{ block.super }}
   {# This is included separately because FancyBox isn't used anywhere else so putting into the styles bundle isn't optimal. #}
-  <link rel="stylesheet" type="text/css" href="{% static 'css/vendor/jquery.fancybox.min.css'%}">
+  <link rel="stylesheet" type="text/css" href="{% static 'css/vendor/jquery.fancybox.min.css'%}"  media="none" onload="if(media!='all')media='all'">
 {% endblock %}
 
 {% block content %}
@@ -76,7 +76,7 @@
           <h1>
             MITx MicroMasters Programs: Master Your Future
           </h1>
-          <a id="actionButton" class="btn btn-primary text-uppercase px-5 py-2 action-button" data-fancybox href="https://www.youtube.com/embed/7lVvOSJpFGY?autoplay=true">Watch Now</a>
+          <a id="actionButton" class="btn btn-primary text-uppercase px-5 py-2 action-button" data-fancybox href="https://www.youtube.com/embed/7lVvOSJpFGY?autoplay=true" rel="noopener noreferrer">Watch Now</a>
           <p class="video-container"></p>
         </div>
       </div>
@@ -235,7 +235,7 @@ <h3>Join Us at Our Free Online Events</h3>
           <div class="info">
             <span class="title">frequently asked questions</span>
             <span class="description">
-              <a href="https://mitx-micromasters.zendesk.com/hc/en-us">Find Answers</a> to Your Questions
+              <a target="_blank" href="https://mitx-micromasters.zendesk.com/hc/en-us" rel="noopener noreferrer">Find Answers</a> to Your Questions
             </span>
           </div>
         </div>
@@ -257,7 +257,7 @@ <h3>Join Us at Our Free Online Events</h3>
     </main>
   </div>
 
-  <script src="{% static 'js/vendor/jquery.fancybox.min.js' %}"></script>
+  <script defer src="{% static 'js/vendor/jquery.fancybox.min.js' %}"></script>
 
   {% if not DO_NOT_TRACK %}
     {% include "adwords.html" %}
@@ -269,11 +269,11 @@ <h3>Join Us at Our Free Online Events</h3>
 </div>
 
 {% load render_bundle %}
-{% render_bundle "public" %}
+{% render_bundle "public" "defer" %}
 </div>
 {% endblock %}
 
-$(document).ready(function($) {
+document.addEventListener("DOMContentLoaded", function() {
   $(".action-button").fancybox({
     caption: function() {
       return $(this)

diff --git a/cms/templates/cms/program_page.html b/cms/templates/cms/program_page.html
@@ -181,19 +181,21 @@ <h3 class="title">Instructors</h3>
   <!-- signup dialog React component injected here -->
 </div>
 {% load render_bundle %}
-{% render_bundle "public" %}
+{% render_bundle "public" "defer" %}
 <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
 <script type="text/javascript">
-  let iframes = document.querySelectorAll(".rich-text>div>iframe");
-  iframes.forEach(function(frame) {
-    frame.style.position = "absolute";
-    frame.style.top = 0;
-    frame.style.left = 0;
-    frame.style.width = "100%";
-    frame.style.height = "100%";
-    frame.parentElement.style.position = "relative";
-    frame.parentElement.style['padding-bottom'] = "56.25%";
-    frame.parentElement.style.height = 0;
+  document.addEventListener("DOMContentLoaded", function() {
+    let iframes = document.querySelectorAll(".rich-text>div>iframe");
+    iframes.forEach(function(frame) {
+      frame.style.position = "absolute";
+      frame.style.top = 0;
+      frame.style.left = 0;
+      frame.style.width = "100%";
+      frame.style.height = "100%";
+      frame.parentElement.style.position = "relative";
+      frame.parentElement.style['padding-bottom'] = "56.25%";
+      frame.parentElement.style.height = 0;
+    });
   });
 </script>
 {% endblock %}
diff --git a/static/js/entry/public.js b/static/js/entry/public.js
@@ -126,13 +126,6 @@ ReactDOM.render(
 /* =================================
 ===  MAILCHIMP                 ====
 =================================== */
-$(".mailchimp").ajaxChimp({
-  callback: mailchimpCallback,
-  //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside "".
-  url:
-    "//facebook.us6.list-manage.com/subscribe/post?u=ad81d725159c1f322a0c54837&amp;id=008aee5e78"
-})
-
 function mailchimpCallback(resp) {
   if (resp.result === "success") {
     $(".subscription-result.success")
@@ -146,32 +139,41 @@ function mailchimpCallback(resp) {
   }
 }
 
-$("#mce-MMERGE4").hide()
-$("#mce-MMERGE3").hide()
+document.addEventListener("DOMContentLoaded", function() {
+  $(".mailchimp").ajaxChimp({
+    callback: mailchimpCallback,
+    //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside "".
+    url:
+      "//facebook.us6.list-manage.com/subscribe/post?u=ad81d725159c1f322a0c54837&amp;id=008aee5e78"
+  })
 
-$("input[name=MMERGE2]").click(function() {
-  if ($("#university").prop("checked")) {
-    $("#mce-MMERGE3").show()
-    $("#mce-MMERGE4").hide()
-  }
-  if ($("#corporation").prop("checked")) {
-    $("#mce-MMERGE3").show()
-    $("#mce-MMERGE4").hide()
-  }
-  if ($("#learner").prop("checked")) {
-    $("#mce-MMERGE3").hide()
-    $("#mce-MMERGE4").hide()
-  }
-  if ($("#other").prop("checked")) {
-    $("#mce-MMERGE3").hide()
-    $("#mce-MMERGE4").show()
-  }
+  $("#mce-MMERGE4").hide()
+  $("#mce-MMERGE3").hide()
+
+  $("input[name=MMERGE2]").click(function() {
+    if ($("#university").prop("checked")) {
+      $("#mce-MMERGE3").show()
+      $("#mce-MMERGE4").hide()
+    }
+    if ($("#corporation").prop("checked")) {
+      $("#mce-MMERGE3").show()
+      $("#mce-MMERGE4").hide()
+    }
+    if ($("#learner").prop("checked")) {
+      $("#mce-MMERGE3").hide()
+      $("#mce-MMERGE4").hide()
+    }
+    if ($("#other").prop("checked")) {
+      $("#mce-MMERGE3").hide()
+      $("#mce-MMERGE4").show()
+    }
+  })
 })
 
 /**
  * Set social media sharing links
  */
-jQuery(document).ready(function($) {
+document.addEventListener("DOMContentLoaded", function() {
   const description =
     "MicroMasters is a " +
     "new digital credential for online learners. The MicroMasters " +
@@ -199,7 +201,7 @@ jQuery(document).ready(function($) {
 /**
  * FAQs accordion on the program page
  */
-$(document).ready(function($) {
+document.addEventListener("DOMContentLoaded", function() {
   $(".accordion")
     .find(".accordion-toggle")
     .click(function() {

diff --git a/static/js/entry/zendesk_widget.js b/static/js/entry/zendesk_widget.js
@@ -55,17 +55,19 @@ window.zEmbed ||
 // This will execute when Zendesk's Javascript is finished executing, and the
 // Web Widget API is available to be used. Zendesk's various iframes may *not*
 // have been inserted into the DOM yet.
-zE(function() {
-  // pre-populate feedback form
-  if (SETTINGS.user) {
-    const user = SETTINGS.user
-    const identity = {}
-    if (user.first_name && user.last_name) {
-      identity.name = `${user.first_name} ${user.last_name}`
+document.addEventListener("DOMContentLoaded", function() {
+  zE(function() {
+    // pre-populate feedback form
+    if (SETTINGS.user) {
+      const user = SETTINGS.user
+      const identity = {}
+      if (user.first_name && user.last_name) {
+        identity.name = `${user.first_name} ${user.last_name}`
+      }
+      if (user.email) {
+        identity.email = user.email
+      }
+      zE.identify(identity)
     }
-    if (user.email) {
-      identity.email = user.email
-    }
-    zE.identify(identity)
-  }
+  })
 })
diff --git a/ui/templates/adwords.html b/ui/templates/adwords.html
@@ -7,7 +7,7 @@
     /* ]]> */
   </script>
   <div style="background: rgb(0, 0, 0)">
-    <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
+    <script defer type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
   </div>
   <noscript>
     <div style="display:inline;">

diff --git a/ui/templates/base.html b/ui/templates/base.html
@@ -6,8 +6,8 @@
     {% load hijack_tags %}
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500,700" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500,700&display=swap" media="all" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" media="none" onload="if(media!='all') media='all'" />
     <link rel="stylesheet" type="text/css" href="{% url 'background-images-css' %}" />
     <link rel="stylesheet" type="text/css" href="{% static 'hijack/hijack-styles.css' %}" />
     <link rel="icon" href="{% static 'images/favicon.ico' %}" />

diff --git a/ui/templates/base_error.html b/ui/templates/base_error.html
@@ -34,5 +34,5 @@ <h2 class="mdl-card__title-text">
   <!-- signup dialog React component injected here -->
   </div>
   {% load render_bundle %}
-  {% render_bundle "public" %}
+  {% render_bundle "public" "defer" %}
 {% endblock %}
diff --git a/ui/templates/certificate.html b/ui/templates/certificate.html
@@ -2,7 +2,7 @@
 {% load i18n static wagtailimages_tags %}
 
 {% block extrahead %}
-<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600;" />
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600;&display=swap" />
 {% endblock %}
 
 {% block title %}{% trans "MITx MicroMasters" %}{% endblock %}

diff --git a/ui/templates/grade_record.html b/ui/templates/grade_record.html
@@ -5,7 +5,7 @@
 {% load wagtailuserbar %}
 
 {% block extrahead %}
-<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600;" />
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600;&display=swap" />
 {% endblock %}
 
 {% block title %}{% trans "MITx MicroMasters" %}{% endblock %}
@@ -89,7 +89,7 @@
   <div id="send-dialog"></div>
   </main>
 {% load render_bundle %}
-{% render_bundle "public" %}
+{% render_bundle "public" "defer" %}
 </div>
 
 {% include "footer.html" %}

diff --git a/ui/templates/header.html b/ui/templates/header.html
@@ -1,7 +1,7 @@
   <nav class="navbar" role="navigation">
       <div class="navbar-header">
         <div class="pull-left">
-          <a class="brand-logo" href="http://www.mit.edu"></a>
+          <a class="brand-logo" href="http://www.mit.edu" rel="noopener noreferrer"></a>
           <div class="divider-large">&nbsp;</div>
           <div class="header-page-name">
           <a class="micromasters-logo" href="/"></a>

diff --git a/ui/templates/social_buttons.html b/ui/templates/social_buttons.html
@@ -10,22 +10,22 @@
       </a>
     </li>
     <li class="rrssb-facebook">
-      <a href="" class="popup" aria-label="Share this page on Facebook">
+      <a href="" class="popup" aria-label="Share this page on Facebook" rel="noopener noreferrer">
         <span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
           <path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg></span>
         <span class="rrssb-text">facebook</span>
       </a>
     </li>
 
     <li class="rrssb-twitter">
-      <a href="" class="popup" aria-label="Share this page on Twitter">
+      <a href="" class="popup" aria-label="Share this page on Twitter" rel="noopener noreferrer">
         <span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
           <path d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z"/></svg></span>
         <span class="rrssb-text">twitter</span>
       </a>
     </li>
     <li class="rrssb-linkedin">
-      <a href="" class="popup" aria-label="Share this page on LinkedIn">
+      <a href="" class="popup" aria-label="Share this page on LinkedIn" rel="noopener noreferrer">
         <span class="rrssb-icon">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
             <path d="M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z"/></svg>

diff --git a/ui/templates/terms_of_service.html b/ui/templates/terms_of_service.html
@@ -128,6 +128,6 @@ <h4 class="title">
     <!-- signup dialog React component injected here -->
   </div>
   {% load render_bundle %}
-  {% render_bundle "public" %}
+  {% render_bundle "public" "defer" %}
   {% include "footer.html" %}
 {% endblock %}
diff --git a/ui/templatetags/render_bundle.py b/ui/templatetags/render_bundle.py
@@ -52,7 +52,7 @@ def _get_bundle(request, bundle_name):
 
 
 @register.simple_tag(takes_context=True)
-def render_bundle(context, bundle_name):
+def render_bundle(context, bundle_name, added_attrs=""):
     """
     Render the script tags for a Webpack bundle
 
@@ -63,25 +63,27 @@ def render_bundle(context, bundle_name):
     Args:
         context (dict): The context for rendering the template (includes request)
         bundle_name (str): The name of the bundle to render
+        added_attrs (str): Optional string of HTML attributes to add to the script/link tag
 
     Returns:
         django.utils.safestring.SafeText: The tags for JS and CSS
     """
     try:
         bundle = _get_bundle(context['request'], bundle_name)
-        return _render_tags(bundle)
+        return _render_tags(bundle, added_attrs)
     except OSError:
         # webpack-stats.json doesn't exist
         return mark_safe('')
 
 
-def _render_tags(bundle):
+def _render_tags(bundle, added_attrs=""):
     """
     Outputs tags for template rendering.
     Adapted from webpack_loader.utils.get_as_tags and webpack_loader.templatetags.webpack_loader.
 
     Args:
         bundle (iterable of dict): The information about a webpack bundle
+        added_attrs (str): Optional string of HTML attributes to add to the script/link tag
 
     Returns:
         django.utils.safestring.SafeText: HTML for rendering bundles
@@ -91,10 +93,10 @@ def _render_tags(bundle):
     for chunk in bundle:
         if chunk['name'].endswith(('.js', '.js.gz')):
             tags.append((
-                '<script type="text/javascript" src="{}" ></script>'
-            ).format(chunk['url']))
+                '<script type="text/javascript" src="{}" {} ></script>'
+            ).format(chunk['url'], added_attrs))
         elif chunk['name'].endswith(('.css', '.css.gz')):
             tags.append((
-                '<link type="text/css" href="{}" rel="stylesheet" />'
-            ).format(chunk['url']))
+                '<link type="text/css" href="{}" rel="stylesheet" {} />'
+            ).format(chunk['url'], added_attrs ))
     return mark_safe('\n'.join(tags))