From f45077787c715e53fe07ca396d2d5596e3296966 Mon Sep 17 00:00:00 2001
From: Seth Vargo <seth@sethvargo.com>
Date: Tue, 6 Apr 2021 12:43:28 -0400
Subject: [PATCH] Load javascript asyncronously (#1988)

---
 assets/server/admin/sms/show.html             |  4 +-
 assets/server/apikeys/show.html               |  2 +-
 assets/server/codes/bulk-issue.html           |  4 +-
 assets/server/codes/index.html                |  4 +-
 assets/server/codes/issue.html                |  4 +-
 assets/server/codes/show.html                 |  4 +-
 assets/server/firebase.html                   |  2 +-
 assets/server/header.html                     | 10 +--
 assets/server/login/_loginscripts.html        | 70 ++++++++++---------
 assets/server/login/change-password.html      |  4 +-
 assets/server/login/login.html                |  4 +-
 assets/server/login/register-phone.html       |  4 +-
 assets/server/login/select-password.html      |  4 +-
 assets/server/login/signout.html              |  2 +-
 assets/server/login/verify-email-check.html   | 56 +++++++--------
 assets/server/mobileapps/_app.html            |  4 +-
 .../realmadmin/_form_abuse_prevention.html    |  4 +-
 assets/server/realmadmin/_form_security.html  |  6 +-
 assets/server/realmadmin/_form_sms.html       |  4 +-
 assets/server/realmadmin/_stats_codes.html    | 28 ++++----
 .../realmadmin/_stats_external_issuers.html   |  2 +-
 .../server/realmadmin/_stats_keyserver.html   | 14 ++--
 assets/server/realmadmin/_stats_tokens.html   |  2 +-
 assets/server/realmadmin/_stats_users.html    |  2 +-
 assets/server/realmadmin/edit.html            |  4 +-
 assets/server/realmadmin/keys.html            |  2 +-
 assets/server/realmadmin/smskeys.html         |  2 +-
 assets/server/realmadmin/stats.html           | 38 +++++-----
 assets/server/static/js/application.js        |  2 +-
 assets/server/users/_form.html                |  4 +-
 assets/server/users/import.html               |  4 +-
 assets/server/users/index.html                |  4 +-
 assets/server/users/show.html                 |  2 +-
 33 files changed, 154 insertions(+), 152 deletions(-)

diff --git a/assets/server/admin/sms/show.html b/assets/server/admin/sms/show.html
index c69f21c3f..4b9771acf 100644
--- a/assets/server/admin/sms/show.html
+++ b/assets/server/admin/sms/show.html
@@ -95,8 +95,8 @@ <h1>System SMS config</h1>
     </div>
   </main>
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       let $container = $('#twilio-from-numbers-container');
       let $template = $('#twilio-from-number-template');
       let counter = 0;
diff --git a/assets/server/apikeys/show.html b/assets/server/apikeys/show.html
index 864662845..c9c0de665 100644
--- a/assets/server/apikeys/show.html
+++ b/assets/server/apikeys/show.html
@@ -125,7 +125,7 @@ <h5 class="modal-title">Statistics for {{$authApp.Name}}</h5>
     </div>
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     var chartData = [];
     $(() => redrawCharts(chartData, 300));
 
diff --git a/assets/server/codes/bulk-issue.html b/assets/server/codes/bulk-issue.html
index 408ce0ea3..e651771e3 100644
--- a/assets/server/codes/bulk-issue.html
+++ b/assets/server/codes/bulk-issue.html
@@ -168,7 +168,7 @@
     </div>
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     let total = 0;
     let totalErrs = 0;
 
@@ -205,7 +205,7 @@
     let tzOffset = new Date().getTimezoneOffset();
     let csrfToken = {{.csrfToken}};
 
-    $(function() {
+    window.addEventListener('load', (event) => {
       initBulkUploadUI();
 
       let randomString = getCookie("retryCode");
diff --git a/assets/server/codes/index.html b/assets/server/codes/index.html
index d8b0534f8..d5cde54be 100644
--- a/assets/server/codes/index.html
+++ b/assets/server/codes/index.html
@@ -62,8 +62,8 @@ <h1>Verification code status</h1>
     </div>
   </main>
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       let $form = $('#form-check-status');
       let $uuid = $('#uuid');
 
diff --git a/assets/server/codes/issue.html b/assets/server/codes/issue.html
index a517d5f37..1c1d20755 100644
--- a/assets/server/codes/issue.html
+++ b/assets/server/codes/issue.html
@@ -245,7 +245,7 @@ <h1>{{t $.locale "codes.issue.header"}}</h1>
     </div>
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     let $form;
       let $inputTestDate;
       let $inputSymptomDate;
@@ -268,7 +268,7 @@ <h1>{{t $.locale "codes.issue.header"}}</h1>
     let codeCountdown;
     let longCodeCountdown;
 
-    $(function() {
+    window.addEventListener('load', (event) => {
       $form = $('form#issue');
         $inputTestDate = $('input#test-date');
         $inputSymptomDate = $('input#symptom-date');
diff --git a/assets/server/codes/show.html b/assets/server/codes/show.html
index acc3bf982..bb1d12fe8 100644
--- a/assets/server/codes/show.html
+++ b/assets/server/codes/show.html
@@ -73,12 +73,12 @@ <h5 class="mb-1">SMS link expiry</h5>
   </main>
 
   {{if not .code.Claimed}}
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     let $buttonInvalidate = $('button#invalidate');
     let expires = {{ .code.Expires }};
     let longExpires = {{ .code.LongExpires }};
 
-    $(function() {
+    window.addEventListener('load', (event) => {
       let $codeExpiresAt = $('#code-expires-at');
       countdown($codeExpiresAt, expires);
 
diff --git a/assets/server/firebase.html b/assets/server/firebase.html
index 3716599a4..4ba5e292e 100644
--- a/assets/server/firebase.html
+++ b/assets/server/firebase.html
@@ -3,7 +3,7 @@
 <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-auth.js"></script>
 
-<script type="text/javascript">
+<script defer type="text/javascript">
   var firebaseConfig = {
     apiKey: "{{.firebase.APIKey}}",
     projectId: "{{.firebase.ProjectID}}",
diff --git a/assets/server/header.html b/assets/server/header.html
index cb451a9ce..5ce837a83 100644
--- a/assets/server/header.html
+++ b/assets/server/header.html
@@ -25,15 +25,15 @@
 <link rel="stylesheet"
   href="/static/css/application.css" crossorigin="anonymous" />
 
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"
+<script defer src="https://code.jquery.com/jquery-3.5.1.min.js"
   integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
+<script defer src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
   integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
+<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
   integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.js"
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.js"
   integrity="sha384-qqHEed+7J6B7s1PDZUg0ockDBmE8DsXphZqsNwV2pzkH5kXcNP7ZKRYLxbd5f/WL" crossorigin="anonymous"></script>
-<script src="/static/js/application.js?{{.buildID}}" crossorigin="anonymous"></script>
+<script defer src="/static/js/application.js?{{.buildID}}" crossorigin="anonymous"></script>
 
 <title>{{if .title}}{{.title}}{{else}}Exposure Notifications Verification Server{{end}}</title>
 {{end}}
diff --git a/assets/server/login/_loginscripts.html b/assets/server/login/_loginscripts.html
index c7fb10e02..d10c8b65f 100644
--- a/assets/server/login/_loginscripts.html
+++ b/assets/server/login/_loginscripts.html
@@ -1,40 +1,42 @@
 {{define "loginscripts"}}
-<script type="text/javascript">
-  firebase.auth().onAuthStateChanged(function(user) {
-    if (!user) {
-      return
+<script defer type="text/javascript">
+  window.addEventListener('load', (event) => {
+    firebase.auth().onAuthStateChanged(function(user) {
+      if (!user) {
+        return
+      }
+      setSession(user)
+    });
+
+    function setSession(user) {
+      user.getIdToken().then(idToken => {
+        $.ajax({
+          type: 'POST',
+          url: '/session',
+          data: {
+            idToken: idToken,
+          },
+          headers: { 'X-CSRF-Token': getCSRFToken() },
+          contentType: 'application/x-www-form-urlencoded',
+          {{if not .currentUser}}
+          success: function(returnData) {
+            // The user successfully signed in, redirect to realm selection.
+            window.location.assign('/login/select-realm');
+          },
+          {{end}}
+          error: function(xhr, status, e) {
+            // There was an error finding the user. Redirect to the
+            // sign-out page to clear the firebase cookie and any session
+            // data.
+            //
+            // The flash data may have more detailed error messages, which
+            // will be displayed on the signout page.
+            window.location.assign("/signout");
+          }
+        })
+      });
     }
-    setSession(user)
   });
-
-  function setSession(user) {
-    user.getIdToken().then(idToken => {
-      $.ajax({
-        type: 'POST',
-        url: '/session',
-        data: {
-          idToken: idToken,
-        },
-        headers: { 'X-CSRF-Token': getCSRFToken() },
-        contentType: 'application/x-www-form-urlencoded',
-        {{if not .currentUser}}
-        success: function(returnData) {
-          // The user successfully signed in, redirect to realm selection.
-          window.location.assign('/login/select-realm');
-        },
-        {{end}}
-        error: function(xhr, status, e) {
-          // There was an error finding the user. Redirect to the
-          // sign-out page to clear the firebase cookie and any session
-          // data.
-          //
-          // The flash data may have more detailed error messages, which
-          // will be displayed on the signout page.
-          window.location.assign("/signout");
-        }
-      })
-    });
-  }
 </script>
 {{end}}
 
diff --git a/assets/server/login/change-password.html b/assets/server/login/change-password.html
index 7084edd42..79dcb8e03 100644
--- a/assets/server/login/change-password.html
+++ b/assets/server/login/change-password.html
@@ -55,8 +55,8 @@
 
 {{template "loginscripts" .}}
 
-<script type="text/javascript">
-    $(function() {
+<script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       {{template "login/requirements" .}}
 
       let $form = $('#password-form');
diff --git a/assets/server/login/login.html b/assets/server/login/login.html
index 0af1af130..36250fd99 100644
--- a/assets/server/login/login.html
+++ b/assets/server/login/login.html
@@ -67,8 +67,8 @@
 
   {{template "loginscripts" .}}
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       let fn = function loginSuccess() {
         {{if .loginRedirect}}
           window.location.assign('{{.loginRedirect}}');
diff --git a/assets/server/login/register-phone.html b/assets/server/login/register-phone.html
index 32f5cbcfd..d21c4b911 100644
--- a/assets/server/login/register-phone.html
+++ b/assets/server/login/register-phone.html
@@ -78,8 +78,8 @@
     </div>
   </main>
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       let $registerDiv = $('#register-div');
       let $displayName = $('#display');
       let $submit = $('#submit-register');
diff --git a/assets/server/login/select-password.html b/assets/server/login/select-password.html
index 7622df55c..0ad022cf7 100644
--- a/assets/server/login/select-password.html
+++ b/assets/server/login/select-password.html
@@ -57,8 +57,8 @@
     </div>
   </main>
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       {{template "login/requirements" .}}
       let $form = $('#loginForm');
       let $submit = $('#submit');
diff --git a/assets/server/login/signout.html b/assets/server/login/signout.html
index f268c7bc1..6d4d7eb19 100644
--- a/assets/server/login/signout.html
+++ b/assets/server/login/signout.html
@@ -17,7 +17,7 @@
     </div>
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     window.addEventListener('load', function() {
       firebase.auth().signOut().then(function() {
         $('#signout').text("Redirecting to login...")
diff --git a/assets/server/login/verify-email-check.html b/assets/server/login/verify-email-check.html
index a80b5cc12..4fb76bffb 100644
--- a/assets/server/login/verify-email-check.html
+++ b/assets/server/login/verify-email-check.html
@@ -29,35 +29,35 @@
     </div>
   </main>
 
-  <script type="text/javascript">
-  $(function() {
-    let urlVars = getUrlVars();
-    let code = urlVars["oobCode"];
-    if (!code) {
-      code = "";
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
+      let urlVars = getUrlVars();
+      let code = urlVars["oobCode"];
+      if (!code) {
+        code = "";
+      }
+
+      firebase.auth().applyActionCode(code)
+        .then(function(resp) {
+          window.location.assign("/");
+        }).catch(function(error) {
+          flash.clear();
+          flash.error("Invalid email verification code. "
+            + "The code may be malformed, expired, or has already been used.");
+        });
+    });
+
+    function getUrlVars() {
+      let vars = [], hash;
+      let queryParams = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+      for (let i = 0; i < queryParams.length; i++) {
+        v = queryParams[i].split('=');
+        vars.push(v[0]);
+        vars[v[0]] = v[1];
+      }
+      return vars;
     }
-
-    firebase.auth().applyActionCode(code)
-      .then(function(resp) {
-        window.location.assign("/");
-      }).catch(function(error) {
-        flash.clear();
-        flash.error("Invalid email verification code. "
-          + "The code may be malformed, expired, or has already been used.");
-      });
-  });
-
-  function getUrlVars() {
-    let vars = [], hash;
-    let queryParams = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
-    for (let i = 0; i < queryParams.length; i++) {
-      v = queryParams[i].split('=');
-      vars.push(v[0]);
-      vars[v[0]] = v[1];
-    }
-    return vars;
-  }
-</script>
+  </script>
 </body>
 </html>
 {{end}}
diff --git a/assets/server/mobileapps/_app.html b/assets/server/mobileapps/_app.html
index a49e9b56a..173846734 100644
--- a/assets/server/mobileapps/_app.html
+++ b/assets/server/mobileapps/_app.html
@@ -90,8 +90,8 @@
   </small>
 </div>
 
-<script type="text/javascript">
-  $(function() {
+<script defer type="text/javascript">
+  window.addEventListener('load', (event) => {
     let $selectOS = $('select#os');
     let $appIDGroup = $('#app-id-group');
     let $appIDInput = $('#app-id');
diff --git a/assets/server/realmadmin/_form_abuse_prevention.html b/assets/server/realmadmin/_form_abuse_prevention.html
index cacc42f4a..5e25bbcd0 100644
--- a/assets/server/realmadmin/_form_abuse_prevention.html
+++ b/assets/server/realmadmin/_form_abuse_prevention.html
@@ -97,8 +97,8 @@
   </div>
 </form>
 
-<script type="text/javascript">
-  $(function() {
+<script defer type="text/javascript">
+  window.addEventListener('load', (event) => {
     let $abusePreventionLimit = $('#abuse-prevention-limit');
     let $abusePreventionLimitFactor = $('#abuse-prevention-limit-factor');
     let $abusePreventionEffectiveLimit = $('#abuse-prevention-effective-limit');
diff --git a/assets/server/realmadmin/_form_security.html b/assets/server/realmadmin/_form_security.html
index 8ef60ac2e..a55f89830 100644
--- a/assets/server/realmadmin/_form_security.html
+++ b/assets/server/realmadmin/_form_security.html
@@ -140,8 +140,8 @@
   </div>
 </form>
 
-<script type="text/javascript">
-  $(function(){
+<script defer type="text/javascript">
+  window.addEventListener('load', (event) => {
     let $grace = $('#mfa-grace-period');
     let $graceDiv = $('#grace-div');
     let $mfaMode = $('#mfa-mode');
@@ -156,6 +156,6 @@
       }
     });
   });
-  </script>
+</script>
 
 {{end}}
diff --git a/assets/server/realmadmin/_form_sms.html b/assets/server/realmadmin/_form_sms.html
index ee0a7ae94..29e366db4 100644
--- a/assets/server/realmadmin/_form_sms.html
+++ b/assets/server/realmadmin/_form_sms.html
@@ -289,7 +289,7 @@
   </div>
 </form>
 
-<script type="text/javascript">
+<script defer type="text/javascript">
   function removeTemplate(name) {
     $('#sms-template-0').trigger("click");
     $('#'+name).remove();
@@ -299,7 +299,7 @@
   //
   // SMS preview builder
   //
-  $(function() {
+  window.addEventListener('load', (event) => {
     function randShortCode(length) {
       const chars = '0123456789';
 
diff --git a/assets/server/realmadmin/_stats_codes.html b/assets/server/realmadmin/_stats_codes.html
index d4a4ddbe6..b4ec6a732 100644
--- a/assets/server/realmadmin/_stats_codes.html
+++ b/assets/server/realmadmin/_stats_codes.html
@@ -19,10 +19,10 @@
       <span class="mr-1">Export as:</span>
       {{if .hasKeyServerStats}}
       <a href="/stats/realm/composite.csv" class="mr-1">CSV</a>
-      <a href="/stats/realm/composite.json" target="_blank">JSON</a>  
+      <a href="/stats/realm/composite.json" target="_blank">JSON</a>
       {{else}}
       <a href="/stats/realm.csv" class="mr-1">CSV</a>
-      <a href="/stats/realm.json" target="_blank">JSON</a> 
+      <a href="/stats/realm.json" target="_blank">JSON</a>
       {{end}}
     </span>
   </small>
@@ -45,10 +45,10 @@
       <span class="mr-1">Export as:</span>
       {{if .hasKeyServerStats}}
       <a href="/stats/realm/composite.csv" class="mr-1">CSV</a>
-      <a href="/stats/realm/composite.json" target="_blank">JSON</a>  
+      <a href="/stats/realm/composite.json" target="_blank">JSON</a>
       {{else}}
       <a href="/stats/realm.csv" class="mr-1">CSV</a>
-      <a href="/stats/realm.json" target="_blank">JSON</a> 
+      <a href="/stats/realm.json" target="_blank">JSON</a>
       {{end}}
     </span>
   </small>
@@ -70,7 +70,7 @@
     <a href="#" data-toggle="modal" data-target="#realm-user-codes-modal">Learn more about this chart</a>
     <span>
       <a href="/stats/realm.csv" class="mr-1">CSV</a>
-      <a href="/stats/realm.json" target="_blank">JSON</a>       
+      <a href="/stats/realm.json" target="_blank">JSON</a>
     </span>
   </small>
 </div>
@@ -90,7 +90,7 @@
     <a href="#" data-toggle="modal" data-target="#comparison-codes-modal">Learn more about this chart</a>
     <span>
       <a href="/stats/realm.csv" class="mr-1">CSV</a>
-      <a href="/stats/realm.json" target="_blank">JSON</a>       
+      <a href="/stats/realm.json" target="_blank">JSON</a>
     </span>
   </small>
 </div>
@@ -176,7 +176,7 @@ <h5 class="modal-title">User report codes &amp; usage</h5>
       </div>
     </div>
   </div>
-</div>  
+</div>
 
 <div class="modal fade" id="invalid-modal" data-backdrop="static" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
@@ -195,7 +195,7 @@ <h5 class="modal-title">Invalid codes by OS</h5>
       </div>
     </div>
   </div>
-</div> 
+</div>
 
 <div class="modal fade" id="comparison-codes-modal" data-backdrop="static" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
@@ -215,7 +215,7 @@ <h5 class="modal-title">Manual / automated code issue &amp; user report</h5>
       </div>
     </div>
   </div>
-</div> 
+</div>
 
 <div class="modal fade" id="realm-codes-modal" data-backdrop="static" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
@@ -257,7 +257,7 @@ <h5 class="modal-title">Codes issued &amp; usage</h5>
           (typographical error) and codes that have expired.
         </p>
 
-       
+
         <strong>Tokens Claimed</strong>
         <p>
           This line tracks the total number of users that successfully
@@ -268,7 +268,7 @@ <h5 class="modal-title">Codes issued &amp; usage</h5>
         <strong>Publish Requests</strong>
         <p>
           The number of users that followed the flow all the way through
-          and successfully completed uploading of temporary exposure keys.          
+          and successfully completed uploading of temporary exposure keys.
         </p>
         {{end}}
 
@@ -347,7 +347,7 @@ <h5 class="modal-title">Mean time until code claimed</h5>
   </div>
 </div>
 
-<script type="text/javascript">
+<script defer type="text/javascript">
   let claimStats;
 
   google.charts.load('current', {
@@ -454,7 +454,7 @@ <h5 class="modal-title">Mean time until code claimed</h5>
         },
       }
     ]
-    
+
     if (!data.statistics) {
       for (i = 0; i < charts.length; i++) {
         $("#" + charts[i].chartDiv).find('p').text('No data yet.');
@@ -743,7 +743,7 @@ <h5 class="modal-title">Mean time until code claimed</h5>
     return dataTable;
   }
 
-  $(function() {
+  window.addEventListener('load', (event) => {
     $issueAgeSlider.on("input", function(event) {
       if (!claimStats) {
         return
diff --git a/assets/server/realmadmin/_stats_external_issuers.html b/assets/server/realmadmin/_stats_external_issuers.html
index 1b208acf1..681dc3c2e 100644
--- a/assets/server/realmadmin/_stats_external_issuers.html
+++ b/assets/server/realmadmin/_stats_external_issuers.html
@@ -58,7 +58,7 @@ <h5 class="modal-title">Codes issued by external issuers by day</h5>
   </div>
 </div>
 
-<script type="text/javascript">
+<script defer type="text/javascript">
   let $perExternalIssuerTable = $('#per_external_issuer_table');
 
   google.charts.load('current', {
diff --git a/assets/server/realmadmin/_stats_keyserver.html b/assets/server/realmadmin/_stats_keyserver.html
index 83c214a01..40e199d27 100644
--- a/assets/server/realmadmin/_stats_keyserver.html
+++ b/assets/server/realmadmin/_stats_keyserver.html
@@ -190,7 +190,7 @@ <h5 class="modal-title">Onset-to-upload distribution</h5>
 </div>
 
 
-<script type="text/javascript">
+<script defer type="text/javascript">
   let stats;
 
   google.charts.load('current', {
@@ -357,7 +357,7 @@ <h5 class="modal-title">Onset-to-upload distribution</h5>
     dataTable.addColumn('number', 'Android');
     dataTable.addColumn({type:'string', role:'tooltip', p: {html: true}});
     dataTable.addColumn('number', 'IOS');
-    dataTable.addColumn({type:'string', role:'tooltip', p: {html: true}});  
+    dataTable.addColumn({type:'string', role:'tooltip', p: {html: true}});
 
     stats.reverse().forEach(function(row) {
       let total = row.publish_requests.unknown + row.publish_requests.android + row.publish_requests.ios;
@@ -366,7 +366,7 @@ <h5 class="modal-title">Onset-to-upload distribution</h5>
       let iosCount = parseInt(row.publish_requests.ios);
 
       let data = [utcDate(row.day),
-        total,        
+        total,
          "<ul class='chart-tooltip'>"+
           "<li><strong>Total:</strong>" + total + "</li>"+
           "<li><strong>Android:</strong>" + androidCount + "</li>"+
@@ -375,7 +375,7 @@ <h5 class="modal-title">Onset-to-upload distribution</h5>
         row.requests_missing_onset_date];
       if (allowsUserReport) {
         data.push(row.requests_with_revisions);
-      }  
+      }
       data.push(
         row.publish_requests.unknown,
         "<ul class='chart-tooltip'><li><strong>Unknown:</strong></li>"+
@@ -388,7 +388,7 @@ <h5 class="modal-title">Onset-to-upload distribution</h5>
         row.publish_requests.ios,
         "<ul class='chart-tooltip'><li><strong>IOS:</strong></li>"+
           "<li>Count: " + iosCount + "</li>" +
-          "<li>Percent: " + (iosCount / total * 100).toPrecision(3)  + "%</li></ul>",        
+          "<li>Percent: " + (iosCount / total * 100).toPrecision(3)  + "%</li></ul>",
       );
 
 
@@ -446,7 +446,7 @@ <h5 class="modal-title">Onset-to-upload distribution</h5>
     colors.push('#6c757d', '#28a745', '#007bff');
     series = {
       0: {type: 'line'},
-      1: {type: 'line'},   
+      1: {type: 'line'},
     }
     if (allowsUserReport) {
       series["2"] = {type: 'line'}
@@ -711,7 +711,7 @@ <h5 class="modal-title">Onset-to-upload distribution</h5>
     return dataTable;
   }
 
-  $(function() {
+  window.addEventListener('load', (event) => {
     $slider.on("input", function(event) {
       if (!stats) {
         return
diff --git a/assets/server/realmadmin/_stats_tokens.html b/assets/server/realmadmin/_stats_tokens.html
index 77c3066e1..0a76ed9b1 100644
--- a/assets/server/realmadmin/_stats_tokens.html
+++ b/assets/server/realmadmin/_stats_tokens.html
@@ -61,7 +61,7 @@ <h5 class="modal-title">Tokens claimed &amp; invalid</h5>
   </div>
 </div>
 
-<script type="text/javascript">
+<script defer type="text/javascript">
   google.charts.load('current', {
     packages: ['corechart'],
     callback: drawRealmCharts,
diff --git a/assets/server/realmadmin/_stats_users.html b/assets/server/realmadmin/_stats_users.html
index 05e1c1796..1f2616325 100644
--- a/assets/server/realmadmin/_stats_users.html
+++ b/assets/server/realmadmin/_stats_users.html
@@ -52,7 +52,7 @@ <h5 class="modal-title">Codes issued by user by day</h5>
   </div>
 </div>
 
-<script type="text/javascript">
+<script defer type="text/javascript">
   google.charts.load('current', {
     packages: ['corechart'],
     callback: drawUsersTable,
diff --git a/assets/server/realmadmin/edit.html b/assets/server/realmadmin/edit.html
index 1d68a0f2d..754bdcab0 100644
--- a/assets/server/realmadmin/edit.html
+++ b/assets/server/realmadmin/edit.html
@@ -105,8 +105,8 @@ <h1>Realm settings</h1>
     {{end}}
   </main>
 
-  <script type="text/javascript">
-    $(function(){
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       {{if not $canWrite}}
         {{/*
 
diff --git a/assets/server/realmadmin/keys.html b/assets/server/realmadmin/keys.html
index 3d72fd639..8df99c004 100644
--- a/assets/server/realmadmin/keys.html
+++ b/assets/server/realmadmin/keys.html
@@ -337,7 +337,7 @@ <h1>Verification certificate key settings</h1>
     {{end}}
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     {{if not $canWrite}}
       {{/*
 
diff --git a/assets/server/realmadmin/smskeys.html b/assets/server/realmadmin/smskeys.html
index 259d67311..749cbbd6f 100644
--- a/assets/server/realmadmin/smskeys.html
+++ b/assets/server/realmadmin/smskeys.html
@@ -198,7 +198,7 @@ <h1>Authenticated SMS</h1>
     </div>
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     {{if not $canWrite}}
       {{/*
 
diff --git a/assets/server/realmadmin/stats.html b/assets/server/realmadmin/stats.html
index d6d661e4e..c04ebc55a 100644
--- a/assets/server/realmadmin/stats.html
+++ b/assets/server/realmadmin/stats.html
@@ -51,7 +51,7 @@ <h1>Realm stats</h1>
     {{end}}
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     var chartData = [];
     let smoothing = 7;
 
@@ -61,29 +61,29 @@ <h1>Realm stats</h1>
 
     $(() => redrawCharts(chartData, 300));
 
-    $(function() {
-    let $smoothDrop = $('#smooth-drop');
+    window.addEventListener('load', (event) => {
+      let $smoothDrop = $('#smooth-drop');
 
-    $smoothDrop.on("change", function(event) {
-      event.preventDefault();
-      smoothing = $smoothDrop.val();
-      $('.sum-title').text(`(${smoothing} day sum)`)
+      $smoothDrop.on("change", function(event) {
+        event.preventDefault();
+        smoothing = $smoothDrop.val();
+        $('.sum-title').text(`(${smoothing} day sum)`)
 
-      let max = $slider.attr('max');
-      $slider.attr('min', Math.min(smoothing, max));
-      $slider.val(max);
-      $slider.trigger("input");
+        let max = $slider.attr('max');
+        $slider.attr('min', Math.min(smoothing, max));
+        $slider.val(max);
+        $slider.trigger("input");
 
-      $onsetSlider.attr('min', Math.min(smoothing, max));
-      $onsetSlider.val(max);
-      $onsetSlider.trigger("input");
+        $onsetSlider.attr('min', Math.min(smoothing, max));
+        $onsetSlider.val(max);
+        $onsetSlider.trigger("input");
 
-      max = $issueAgeSlider.attr('max');
-      $issueAgeSlider.attr('min', Math.min(smoothing, max));
-      $issueAgeSlider.val(max);
-      $issueAgeSlider.trigger("input");
+        max = $issueAgeSlider.attr('max');
+        $issueAgeSlider.attr('min', Math.min(smoothing, max));
+        $issueAgeSlider.val(max);
+        $issueAgeSlider.trigger("input");
+      });
     });
-  });
   </script>
 </body>
 </html>
diff --git a/assets/server/static/js/application.js b/assets/server/static/js/application.js
index 0f89ec60a..27501757a 100644
--- a/assets/server/static/js/application.js
+++ b/assets/server/static/js/application.js
@@ -1,4 +1,4 @@
-$(function() {
+window.addEventListener('load', (event) => {
   // Add data-toogle="tooltop" to toggle tooltips!
   $('[data-toggle="tooltip"]').tooltip();
 
diff --git a/assets/server/users/_form.html b/assets/server/users/_form.html
index 9597ced07..0788471e7 100644
--- a/assets/server/users/_form.html
+++ b/assets/server/users/_form.html
@@ -122,8 +122,8 @@ <h5 class="modal-title">About permissions</h5>
     </button>
   </form>
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       let $permissionImpliedWarning = $('#permission-implied-warning');
 
       $('input[name=permissions]')
diff --git a/assets/server/users/import.html b/assets/server/users/import.html
index 28fe50bcd..77018475b 100644
--- a/assets/server/users/import.html
+++ b/assets/server/users/import.html
@@ -88,8 +88,8 @@ <h1>Import users</h1>
     <a class=" card-link" href="/realm/users">&larr; All users</a>
   </main>
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       let $form = $('#form');
       let $csv = $('#csv');
       let $fileLabel = $('#fileLabel');
diff --git a/assets/server/users/index.html b/assets/server/users/index.html
index 66d7a6725..dc8ef4dde 100644
--- a/assets/server/users/index.html
+++ b/assets/server/users/index.html
@@ -244,8 +244,8 @@ <h5 class="modal-title">Advanced search</h5>
     {{template "shared/pagination" .}}
   </main>
 
-  <script type="text/javascript">
-    $(function() {
+  <script defer type="text/javascript">
+    window.addEventListener('load', (event) => {
       let $selectUserAll = $('#select-user-all');
       let $addPermissionsButton = $('#add-permissions-button');
       let $addPermissionsSubmit = $('#add-permissions-submit');
diff --git a/assets/server/users/show.html b/assets/server/users/show.html
index b449b0278..604470f02 100644
--- a/assets/server/users/show.html
+++ b/assets/server/users/show.html
@@ -126,7 +126,7 @@ <h5 class="modal-title">Codes issued by {{$user.Name}}</h5>
     </div>
   </main>
 
-  <script type="text/javascript">
+  <script defer type="text/javascript">
     var chartData = [];
     $(() => redrawCharts(chartData, 300));