defering possible js and css files (#2072)

mitodl · Jan 21, 2021 · 3aaef79 · 3aaef79
1 parent 8412a03
commit 3aaef79
Show file tree

Hide file tree

Showing 17 changed files with 231 additions and 202 deletions.
diff --git a/cms/templates/home_page.html b/cms/templates/home_page.html
@@ -15,7 +15,7 @@
 
 {% block extrahead %}
   {{ block.super }}
-  <link href="{% static 'css/vendor/jquery.fancybox.min.css'%}" rel="stylesheet">
+  <link href="{% static 'css/vendor/jquery.fancybox.min.css'%}" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
 {% endblock %}
 
 {% block content %}

diff --git a/courses/templates/subscription.html b/courses/templates/subscription.html
@@ -4,14 +4,16 @@ <h1>WANT TO LEARN ABOUT NEW COURSES FROM {{ site_name }}?</h1>
         <!--[if lte IE 8]>
         <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
         <![endif]-->
-        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
-        <script>
-            if (typeof hbspt !== 'undefined') {
-                hbspt.forms.create({
-                    portalId: "{{ hubspot_portal_id | safe }}",
-                    formId: "{{ hubspot_new_courses_form_guid | safe }}"
-                });
-            }
+        <script defer charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
+        <script type="text/javascript">
+            document.addEventListener('DOMContentLoaded', function() {
+                if (typeof hbspt !== 'undefined') {
+                    hbspt.forms.create({
+                        portalId: "{{ hubspot_portal_id | safe }}",
+                        formId: "{{ hubspot_new_courses_form_guid | safe }}"
+                    });
+                }
+            });
         </script>
     </div>
 </div>
diff --git a/mail/templates/email_debugger.html b/mail/templates/email_debugger.html
@@ -48,7 +48,6 @@
               error.innerHTML = res.error;
             }
           });
-
         });
       });
     });

diff --git a/mitxpro/templates/base.html b/mitxpro/templates/base.html
@@ -35,7 +35,7 @@
     {% endblock %}
     {% endspaceless %}
       {% if zendesk_config.help_widget_enabled and not request.path|startswith:'/certificate/' %}
-          <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key={{zendesk_config.help_widget_key}}"> </script>
+          <script defer id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key={{zendesk_config.help_widget_key}}"> </script>
       {% endif %}
   </head>
   <body class="{% block bodyclass %}{% endblock %}">
@@ -58,22 +58,22 @@
     {% block footer %}
         {% include "footer.html" %}
     {% endblock %}
-    {% render_bundle 'third_party' %}
-    {% render_bundle 'django' %}
+    {% render_bundle 'third_party' added_attrs='defer' %}
+    {% render_bundle 'django' added_attrs='defer' %}
     {% block scripts %}
     {% endblock %}
     {% if zendesk_config.help_widget_enabled and not request.path|startswith:'/certificate/' %}
     <script type="text/javascript">
-        $(function() {
-            if (typeof zE !== 'undefined') {
-              zE('webWidget', 'prefill', {
-                name: {
-                    value: '{{user.name}}',
-                },
-                email: {
-                    value: '{{user.email}}',
-                }
-              });
+      document.addEventListener('DOMContentLoaded', function() {
+        if (typeof zE !== 'undefined') {
+          zE('webWidget', 'prefill', {
+            name: {
+                value: '{{user.name}}',
+            },
+            email: {
+                value: '{{user.email}}',
+            }
+          });
         }
       });
     </script>

diff --git a/mitxpro/templates/footer.html b/mitxpro/templates/footer.html
@@ -41,22 +41,26 @@ <h2>Contact Us</h2>
           <li><a href="/about-us/">About Us</a></li>
         </ul>
         <script
+          defer
           charset="utf-8"
           type="text/javascript"
           src="//js.hsforms.net/forms/v2-legacy.js"
         ></script>
         <script
+          defer
           charset="utf-8"
           type="text/javascript"
           src="//js.hsforms.net/forms/v2.js"
         ></script>
         <script>
-          if (typeof hbspt !== "undefined") {
-            hbspt.forms.create({
-              portalId: "{{ hubspot_portal_id }}",
-              formId: "{{ hubspot_footer_form_guid }}",
-            });
-          }
+          document.addEventListener('DOMContentLoaded', function() {
+            if (typeof hbspt !== "undefined") {
+              hbspt.forms.create({
+                portalId: "{{ hubspot_portal_id }}",
+                formId: "{{ hubspot_footer_form_guid }}",
+              });
+            }
+          });
         </script>
       </div>
     </div>

diff --git a/mitxpro/templatetags/render_bundle.py b/mitxpro/templatetags/render_bundle.py
@@ -51,7 +51,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
 
@@ -62,25 +62,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:
     """
     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
@@ -90,14 +92,14 @@ 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))
diff --git a/mitxpro/tests/render_bundle_test.py b/mitxpro/tests/render_bundle_test.py
@@ -40,7 +40,7 @@ def test_debug(settings, mocker):
         "mitxpro.templatetags.render_bundle.get_loader", return_value=loader
     )
     assert render_bundle(context, bundle_name) == (
-        '<script type="text/javascript" src="{base}/{filename}" >'
+        '<script type="text/javascript" src="{base}/{filename}"  >'
         "</script>".format(
             base=webpack_dev_server_url(request), filename=FAKE_COMMON_BUNDLE[0]["name"]
         )
@@ -69,7 +69,7 @@ def test_production(settings, mocker):
         "mitxpro.templatetags.render_bundle.get_loader", return_value=loader
     )
     assert render_bundle(context, bundle_name) == (
-        '<script type="text/javascript" src="{base}/{filename}" >'
+        '<script type="text/javascript" src="{base}/{filename}"  >'
         "</script>".format(
             base="/static/bundles", filename=FAKE_COMMON_BUNDLE[0]["name"]
         )

diff --git a/static/js/courseware_carousel.js b/static/js/courseware_carousel.js
@@ -1,38 +1,41 @@
 /*eslint-env jquery*/
 /*eslint semi: ["error", "always"]*/
-$(".course-slider").slick({
-  rows:           0,
-  slidesToShow:   3,
-  slidesToScroll: 1,
-  dots:           false,
-  infinite:       false,
-  autoplay:       false,
-  responsive:     [
-    {
-      breakpoint: 1024,
-      settings:   {
-        slidesToShow:   3,
-        slidesToScroll: 3
-      }
-    },
-    {
-      breakpoint: 992,
-      settings:   {
-        slidesToShow:   2,
-        slidesToScroll: 1
-      }
-    },
-    {
-      breakpoint: 767,
-      settings:   {
-        slidesToShow:   1,
-        slidesToScroll: 1
+
+export default function coursewareCarousel() {
+  $(".course-slider").slick({
+    rows:           0,
+    slidesToShow:   3,
+    slidesToScroll: 1,
+    dots:           false,
+    infinite:       false,
+    autoplay:       false,
+    responsive:     [
+      {
+        breakpoint: 1024,
+        settings:   {
+          slidesToShow:   3,
+          slidesToScroll: 3
+        }
+      },
+      {
+        breakpoint: 992,
+        settings:   {
+          slidesToShow:   2,
+          slidesToScroll: 1
+        }
+      },
+      {
+        breakpoint: 767,
+        settings:   {
+          slidesToShow:   1,
+          slidesToScroll: 1
+        }
       }
-    }
-  ]
-});
+    ]
+  });
 
-$(".course-slider .slide").on("click", function() {
-  const targetUrl = $(this).data("url");
-  window.location.href = targetUrl;
-});
+  $(".course-slider .slide").on("click", function() {
+    const targetUrl = $(this).data("url");
+    window.location.href = targetUrl;
+  });
+}
diff --git a/static/js/entry/django.js b/static/js/entry/django.js
@@ -1,8 +1,19 @@
-import "../notifications.js"
-import "../tooltip.js"
-import "../hero.js"
-import "../testimonials_carousel.js"
-import "../courseware_carousel.js"
-import "../text_video_section.js"
-import "../image_carousel.js"
-import "../faculty_carousel.js"
+import notifications from "../notifications.js"
+import tooltip from "../tooltip.js"
+import hero from "../hero.js"
+import testimonialsCarousel from "../testimonials_carousel.js"
+import coursewareCarousel from "../courseware_carousel.js"
+import textVideoSection from "../text_video_section.js"
+import imageCarousel from "../image_carousel.js"
+import facultyCarousel from "../faculty_carousel.js"
+
+document.addEventListener("DOMContentLoaded", function() {
+  notifications()
+  tooltip()
+  hero()
+  testimonialsCarousel()
+  coursewareCarousel()
+  textVideoSection()
+  imageCarousel()
+  facultyCarousel()
+})
diff --git a/static/js/entry/third-party.js b/static/js/entry/third-party.js
@@ -1,6 +1,6 @@
 import "jquery"
-import "popper.js"
 import "bootstrap"
+import "popper.js"
 import "slick-carousel"
 import "hls.js"
 import "@fancyapps/fancybox"
diff --git a/static/js/faculty_carousel.js b/static/js/faculty_carousel.js
@@ -1,38 +1,41 @@
 /*eslint-env jquery*/
 /*eslint semi: ["error", "always"]*/
-const numFacultySlides = $(".faculty-slider .slide").length;
 
-$(".faculty-slider").slick({
-  rows:           0,
-  slidesToShow:   3,
-  slidesToScroll: 1,
-  dots:           numFacultySlides > 3,
-  infinite:       false,
-  autoplay:       false,
-  responsive:     [
-    {
-      breakpoint: 1024,
-      settings:   {
-        slidesToShow:   3,
-        slidesToScroll: 3,
-        dots:           numFacultySlides > 3
-      }
-    },
-    {
-      breakpoint: 992,
-      settings:   {
-        slidesToShow:   2,
-        slidesToScroll: 1,
-        dots:           numFacultySlides > 2
-      }
-    },
-    {
-      breakpoint: 767,
-      settings:   {
-        slidesToShow:   1,
-        slidesToScroll: 1,
-        dots:           numFacultySlides > 1
+export default function facultyCarousel() {
+  const numFacultySlides = $(".faculty-slider .slide").length;
+
+  $(".faculty-slider").slick({
+    rows:           0,
+    slidesToShow:   3,
+    slidesToScroll: 1,
+    dots:           numFacultySlides > 3,
+    infinite:       false,
+    autoplay:       false,
+    responsive:     [
+      {
+        breakpoint: 1024,
+        settings:   {
+          slidesToShow:   3,
+          slidesToScroll: 3,
+          dots:           numFacultySlides > 3
+        }
+      },
+      {
+        breakpoint: 992,
+        settings:   {
+          slidesToShow:   2,
+          slidesToScroll: 1,
+          dots:           numFacultySlides > 2
+        }
+      },
+      {
+        breakpoint: 767,
+        settings:   {
+          slidesToShow:   1,
+          slidesToScroll: 1,
+          dots:           numFacultySlides > 1
+        }
       }
-    }
-  ]
-});
+    ]
+  });
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,6 @@ @@
                   error.innerHTML = res.error;
                 }
               });
             });
           });
         });
@@ Expand Down @@