Various Frontend Performance and Usability Changes

* Removed old lighthouse test results. * Added most efficient way to load google fonts * Cleaned up font stack and font-family properties * Fixed navbar bug * Added native lazy loading in addition to script * Added email link content to appease lighthouse accessibility score
eddieferrer · Jul 16, 2020 · 816c6ae · 816c6ae
1 parent 336a625
commit 816c6ae
Show file tree

Hide file tree

Showing 21 changed files with 97 additions and 14,913 deletions.
diff --git a/frontend/lighthouse_reports/sizesquirrel.com-20190929T082559.json b/frontend/lighthouse_reports/sizesquirrel.com-20190929T082559.json
diff --git a/frontend/lighthouse_reports/sizesquirrel.com-20191107T210150.json b/frontend/lighthouse_reports/sizesquirrel.com-20191107T210150.json
diff --git a/frontend/lighthouse_reports/sizesquirrel.com-20191128T102710.json b/frontend/lighthouse_reports/sizesquirrel.com-20191128T102710.json
diff --git a/frontend/public/emails/email_base.html b/frontend/public/emails/email_base.html
@@ -110,7 +110,7 @@
 }
 h1{
   color:#202020;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:26px;
   font-style:normal;
   font-weight:bold;
@@ -120,7 +120,7 @@
 }
 h2{
   color:#202020;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:22px;
   font-style:normal;
   font-weight:bold;
@@ -130,7 +130,7 @@
 }
 h3{
   color:#202020;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:20px;
   font-style:normal;
   font-weight:bold;
@@ -140,7 +140,7 @@
 }
 h4{
   color:#202020;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:18px;
   font-style:normal;
   font-weight:bold;
@@ -157,7 +157,7 @@
 }
 #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
   color:#656565;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:11px;
   line-height:150%;
   text-align:left;
@@ -176,7 +176,7 @@
 }
 #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
   color:#202020;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:16px;
   line-height:150%;
   text-align:left;
@@ -195,7 +195,7 @@
 }
 #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
   color:#202020;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:16px;
   line-height:150%;
   text-align:left;
@@ -214,7 +214,7 @@
 }
 #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
   color:#656565;
-  font-family:Helvetica;
+  font-family:'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
   font-size:12px;
   line-height:150%;
   text-align:center;
@@ -588,7 +588,7 @@
                                                           <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnTextContentContainer">
                                                             <tbody><tr>
 
-                                                              <td valign="top" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #656565;font-family: Helvetica;font-size: 12px;line-height: 150%;text-align: center;">
+                                                              <td valign="top" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #656565;font-family: 'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;font-size: 12px;line-height: 150%;text-align: center;">
 
                                                                 <em>Copyright &copy; 2018 SizeSquirrel, All rights reserved.</em><br>
                                                                 You are receiving this email because you signed up for SizeSquirrel.<br>

diff --git a/frontend/public/emails/forgot_username.html b/frontend/public/emails/forgot_username.html
@@ -8,10 +8,10 @@
   <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnTextContentContainer">
     <tbody>
       <tr>
-      <td valign="top" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;">
+      <td valign="top" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: 'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;font-size: 16px;line-height: 150%;text-align: left;">
 
-        <h1 style="display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;">Your SizeSquirrel username is:</h1>
-        <p style="margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;">
+        <h1 style="display: block;margin: 0;padding: 0;color: #202020;font-family: 'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;">Your SizeSquirrel username is:</h1>
+        <p style="margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: 'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;font-size: 16px;line-height: 150%;text-align: left;">
           <h3>{{ username }}</h3>
           <a href="https://sizesquirrel.com/login/">Log In to SizeSquirrel</a>
           <br><br>

diff --git a/frontend/public/emails/reset_password.html b/frontend/public/emails/reset_password.html
@@ -8,10 +8,10 @@
   <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnTextContentContainer">
     <tbody>
       <tr>
-      <td valign="top" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;">
+      <td valign="top" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: 'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;font-size: 16px;line-height: 150%;text-align: left;">
 
-        <h1 style="display: block;margin: 0;padding: 0;color: #202020;font-family: Helvetica;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;">Reset Your Password</h1>
-        <p style="margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: Helvetica;font-size: 16px;line-height: 150%;text-align: left;">Please us the link below to reset your password:<br><br>
+        <h1 style="display: block;margin: 0;padding: 0;color: #202020;font-family: 'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;font-size: 26px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: normal;text-align: left;">Reset Your Password</h1>
+        <p style="margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #202020;font-family: 'Segoe UI', 'Source Sans Pro', Calibri, Candara, Arial, sans-serif;font-size: 16px;line-height: 150%;text-align: left;">Please us the link below to reset your password:<br><br>
           <a href="https://sizesquirrel.com/reset_password?token={{token}}">https://sizesquirrel.com/reset_password?token={{token}}</a>
           <br><br>
         </p>

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -54,6 +54,61 @@
     </script>
     <!-- icons for bulma, not used yet -->
     <!-- <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> -->
+
+
+    <!-- Efficiently Load Google Fonts -->
+    <!-- https://csswizardry.com/2020/05/the-fastest-google-fonts/ -->
+    <!--
+      - 1. Preemptively warm up the fonts’ origin.
+      -
+      - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
+      -    most modern browsers.
+      -
+      - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
+      -    only after it’s arrived. Works in all browsers with JavaScript enabled.
+      -
+      - 4. In the unlikely event that a visitor has intentionally disabled
+      -    JavaScript, fall back to the original method. The good news is that,
+      -    although this is a render-blocking request, it can still make use of the
+      -    preconnect which makes it marginally faster than the default.
+      -->
+
+    <!-- [1] -->
+    <link rel="preconnect"
+    href="https://fonts.gstatic.com"
+    crossorigin />
+
+    <!-- [2] -->
+    <link rel="preload"
+    as="style"
+    href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" />
+    <link rel="preload"
+    as="style"
+    href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" />
+    <link rel="preload"
+    as="style"
+    href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" />
+
+    <!-- [3] -->
+    <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap"
+    media="print" onload="this.media='all'" />
+    <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap"
+    media="print" onload="this.media='all'" />
+    <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap"
+    media="print" onload="this.media='all'" />
+
+    <!-- [4] -->
+    <noscript>
+      <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" />
+      <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" />
+      <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" />
+    </noscript>
   </head>
   <body>
     <noscript>

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -92,7 +92,8 @@
                   href="#"
                   class="cryptedmail"
                   onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld"
-                ></a>
+                  >email</a
+                >
               </p>
             </div>
           </div>

diff --git a/frontend/src/components/AffiliatePriceBlock.vue b/frontend/src/components/AffiliatePriceBlock.vue
@@ -87,7 +87,7 @@ export default {
   }
 
   .sales_retailer_price {
-    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+    font-family: Lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
     font-weight: bold;
     width: 76px;
     text-align: left;
@@ -105,7 +105,7 @@ export default {
       border-right: 20px solid $amazon_red;
       margin-left: -20px;
     }
-    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+    font-family: Lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
     width: 58px;
     text-align: left;
     color: $white;

diff --git a/frontend/src/components/FindMySizeBlock.vue b/frontend/src/components/FindMySizeBlock.vue
@@ -6,6 +6,7 @@
           <span>
             <img
               class="lazyload"
+              loading="lazy"
               :src="'/static/images/placeholder_' + shoe.type + '.png'"
               :data-src="shoe.shoe_image"
               :alt="shoe.brand.name + shoe.model"

diff --git a/frontend/src/components/MatchResult.vue b/frontend/src/components/MatchResult.vue
@@ -60,6 +60,7 @@
               <span>
                 <img
                   class="lazyload"
+                  loading="lazy"
                   :src="'/static/images/placeholder_' + targetItem.type + '.png'"
                   :data-src="targetItem.shoe_image"
                   :alt="targetItem.brand['name'] + ' ' + targetItem.model"

diff --git a/frontend/src/components/MultiSelectItems.vue b/frontend/src/components/MultiSelectItems.vue
@@ -26,6 +26,7 @@
           <div class="option_img">
             <img
               class="lazyload"
+              loading="lazy"
               :src="'/static/images/placeholder_' + props.option.type + '.png'"
               :data-src="props.option.shoe_image"
               :alt="props.option.brand['name'] + ' ' + props.option.model"

diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
@@ -26,8 +26,8 @@
 
     <div id="navbarBasic" class="navbar-menu" :class="{ 'is-active': isActive }">
       <div class="navbar-start">
-        <span v-if="!isActive" class="navbar-item navbar-item-brand">SizeSquirrel</span>
-        <span v-if="isActive" class="navbar-item navbar-item-brand">&nbsp;</span>
+        <span class="navbar-item navbar-item-brand is-hidden-touch">SizeSquirrel</span>
+        <span class="navbar-item navbar-item-brand is-hidden-desktop pt-2">&nbsp;</span>
         <RouterLink class="navbar-item" to="/" @click.native="isActive = !isActive"
           >Home</RouterLink
         >
@@ -121,11 +121,11 @@ $squirrelDarkGray: #131313;
   background-color: $ss-transparent-gray;
 }
 .navbar-item-brand {
-  font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
-  font-weight: 800;
+  font-family: Lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+  font-weight: 900;
   font-variant: small-caps;
   letter-spacing: 0.05em;
-  font-size: 1.2rem;
+  font-size: 1.3rem;
 }
 .navbar-item.brandlogo {
   overflow: visible;
@@ -148,4 +148,7 @@ $squirrelDarkGray: #131313;
 a.navbar-item:hover {
   color: $white;
 }
+.pt-2 {
+  padding-top: 2rem;
+}
 </style>
diff --git a/frontend/src/components/ProfileItems.vue b/frontend/src/components/ProfileItems.vue
@@ -35,6 +35,7 @@
                       <span>
                         <img
                           class="lazyload"
+                          loading="lazy"
                           :src="
                             '/static/images/placeholder_' + user_item.user_item.item.type + '.png'
                           "

diff --git a/frontend/src/components/RecommendationsByShape.vue b/frontend/src/components/RecommendationsByShape.vue
@@ -25,6 +25,7 @@
                   <span>
                     <img
                       class="lazyload"
+                      loading="lazy"
                       :src="'/static/images/placeholder_' + recommendation.item.type + '.png'"
                       :data-src="recommendation.item.shoe_image"
                       :alt="recommendation.item.brand['name'] + ' ' + recommendation.item.model"

diff --git a/frontend/src/components/RecommendedShoesCards.vue b/frontend/src/components/RecommendedShoesCards.vue
@@ -14,6 +14,7 @@
                     <span>
                       <img
                         class="lazyload"
+                        loading="lazy"
                         :src="'/static/images/placeholder_' + shoe.type + '.png'"
                         :data-src="shoe.shoe_image"
                         :alt="shoe.brand.name + shoe.model"
@@ -170,6 +171,7 @@
                     <span>
                       <img
                         class="lazyload"
+                        loading="lazy"
                         :src="'/static/images/placeholder_' + shoe.type + '.png'"
                         :data-src="shoe.shoe_image"
                         :alt="shoe.brand.name + shoe.model"

diff --git a/frontend/src/scss/cosmo_overrides.scss b/frontend/src/scss/cosmo_overrides.scss
@@ -1,6 +1,3 @@
-@if $bulmaswatch-import-font {
-  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300, 400, 700');
-}
 .button,
 .control.has-icons-left .icon,
 .control.has-icons-right .icon,

diff --git a/frontend/src/scss/custom_bulma.scss b/frontend/src/scss/custom_bulma.scss
@@ -1,8 +1,5 @@
 @charset "utf-8";
 
-// Import a Google Font
-@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
-
 // BulmaSwatch Theme
 ////////////////////////////////////////////////
 // COSMO
@@ -110,7 +107,3 @@ $navbar-item-img-max-height: 38px;
 // Bulma divider extension
 // https://wikiki.github.io/layout/divider/
 @import 'bulma-divider/dist/css/bulma-divider.sass';
-
-@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
-@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,900');
diff --git a/frontend/src/views/Faq.vue b/frontend/src/views/Faq.vue
@@ -16,7 +16,8 @@
           href="#"
           class="cryptedmail"
           onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld"
-        ></a>
+          >email</a
+        >
         and we will add the shoe to the site.
       </p>
 
@@ -58,7 +59,8 @@
           href="#"
           class="cryptedmail"
           onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld"
-        ></a>
+          >email</a
+        >
       </p>
     </div>
   </div>

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
@@ -64,7 +64,8 @@
               href="#"
               class="cryptedmail"
               onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld"
-            ></a>
+              >email</a
+            >
           </p>
         </div>
       </div>

diff --git a/maintenance_off.html b/maintenance_off.html
@@ -77,9 +77,6 @@
     <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
     </style>
-    <style type="text/css">
-    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,900);
-    </style>
     <style type="text/css">
 
       .dismiss[data-v-29ce9aa7] {
@@ -107,8 +104,8 @@
       }
 
       .navbar-item-brand[data-v-4295d220] {
-        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-        font-weight: 800;
+        font-family: Lato, Roboto, Arial, sans-serif;
+        font-weight: 900;
         font-variant: small-caps;
         letter-spacing: 0.05em;
         font-size: 1.2rem;
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ @@
                           <span>
                             <img
                               class="lazyload"
+                              loading="lazy"
                               :src="
                                 '/static/images/placeholder_' + user_item.user_item.item.type + '.png'
                               "
@@ Expand Down @@