Improve lighthouse score

- Use a minified mux.js and awesomplete.js - Add rel=noopener to offsite target=_blank links for security - Improve contrast on selected nav button and footer text - Add empty alt attributes to asset images, since these are not necessary to understand the page Change-Id: I253c7354243aaa0fe98e1f075dae304ddad4a3e2
Pavelas · May 2, 2019 · 269b53b · 269b53b
1 parent d7e2501
commit 269b53b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 23 deletions.
diff --git a/demo/asset_card.js b/demo/asset_card.js
@@ -54,8 +54,9 @@ class AssetCard {
     titleDiv.appendChild(titleText);
 
     if (asset.iconUri) {
-      const img = document.createElement('IMG');
+      const img = document.createElement('img');
       img.src = asset.iconUri;
+      img.alt = '';  // Not necessary to understand the page
       this.card_.appendChild(img);
     }
 

diff --git a/demo/custom.js b/demo/custom.js
@@ -227,17 +227,19 @@ class ShakaDemoCustom {
     const iconSetup = (input, container) => {
       if (assetInProgress.iconUri) {
         input.value = assetInProgress.iconUri;
-        const img = document.createElement('IMG');
+        const img = document.createElement('img');
         img.src = input.value;
+        img.alt = '';  // Not necessary to understand the page
         iconDiv.appendChild(img);
       }
     };
     const iconOnChange = (input) => {
       shaka.ui.Utils.removeAllChildren(iconDiv);
       assetInProgress.iconUri = input.value;
       if (input.value) {
-        const img = document.createElement('IMG');
+        const img = document.createElement('img');
         img.src = input.value;
+        img.alt = '';  // Not necessary to understand the page
         iconDiv.appendChild(img);
       }
     };

diff --git a/demo/demo.less b/demo/demo.less
@@ -17,8 +17,14 @@
 @accent-background-color: #ddf;
 @error-color: #d84a38;
 @drawer-width: 550px;
-@footer-link-color: #9e9e9e;  /* copied from MDL stylesheet */
-@footer-link-color-disabled: darken(@footer-link-color, 20%);
+
+@mdl-footer-link-color: #9e9e9e;  /* copied from MDL stylesheet */
+@mdl-button-color: rgb(68,138,255);  /* copied from MDL stylesheet */
+
+/* The default color from MDL is too low-contrast on a white background. */
+.mdl-button--accent.mdl-button--accent {
+  color: darken(@mdl-button-color, 20%);
+}
 
 /* This is a less mixin only, rather than a CSS class. MDL has an equivalent
  * class with the same name, which can be used in the application directly. */
@@ -260,13 +266,18 @@ footer li {
   list-style: square outside;
 }
 
-footer a {
-  color: @footer-link-color;
-}
-
-footer a[disabled] {
-  color: @footer-link-color-disabled;
-  cursor: not-allowed;
+/* More specific selector than MDL's stylesheet uses. */
+footer .mdl-mega-footer__link-list {
+  a {
+    /* The default color was low-contrast on this dark background. */
+    color: lighten(@mdl-footer-link-color, 20%);
+  }
+  a[disabled] {
+    /* Making the disabled version even darker would be even worse in terms of
+     * contrast, so use a strikethrough style instead. */
+    text-decoration: line-through;
+    cursor: not-allowed;
+  }
 }
 
 /* Style the container that contains the "add custom assets" button. */

diff --git a/demo/index.html b/demo/index.html
@@ -34,15 +34,15 @@
 
     <script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
     <!-- transmuxing support is enabled by including this: -->
-    <script defer src="../node_modules/mux.js/dist/mux.js"></script>
+    <script defer src="../node_modules/mux.js/dist/mux.min.js"></script>
     <!-- MDL is enabled by including this: -->
     <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
     <!-- MDL modal dialogs are enabled by including these: -->
     <script defer src="../node_modules/dialog-polyfill/dialog-polyfill.js"></script>
     <link rel="stylesheet" href="../node_modules/dialog-polyfill/dialog-polyfill.css">
     <!-- Datalist-like fields are enabled by including these: -->
     <link rel="stylesheet" href="../node_modules/awesomplete/awesomplete.css" />
-    <script src="../node_modules/awesomplete/awesomplete.js" async></script>
+    <script src="../node_modules/awesomplete/awesomplete.min.js" async></script>
 
     <script>
 COMPILED_JS = [
@@ -127,18 +127,18 @@
             <div class="mdl-mega-footer__drop-down-section">
               <h1 class="mdl-mega-footer__heading">PROJECT LINKS</h1>
               <ul class="mdl-mega-footer__link-list">
-                <li><a href="../docs/api/index.html" target="_blank">Documentation</a></li>
-                <li><a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License</a></li>
-                <li><a href="https://github.com/google/shaka-player" target="_blank">Source on GitHub</a></li>
-                <li><a href="https://www.npmjs.com/package/shaka-player" target="_blank">Package on NPM</a></li>
+                <li><a rel="noopener" target="_blank" href="../docs/api/index.html">Documentation</a></li>
+                <li><a rel="noopener" target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0">Apache License</a></li>
+                <li><a rel="noopener" target="_blank" href="https://github.com/google/shaka-player">Source on GitHub</a></li>
+                <li><a rel="noopener" target="_blank" href="https://www.npmjs.com/package/shaka-player">Package on NPM</a></li>
               </ul>
             </div>
             <div class="mdl-mega-footer__drop-down-section">
               <h1 class="mdl-mega-footer__heading">CDN</h1>
               <ul class="mdl-mega-footer__link-list">
-                <li><a href="https://developers.google.com/speed/libraries/#shaka-player" target="_blank">Google Hosted Libraries</a></li>
-                <li><a href="https://www.jsdelivr.com/package/npm/shaka-player" target="_blank">jsDelivr</a></li>
-                <li><a href="https://cdnjs.com/libraries/shaka-player" target="_blank">CDNJS</a></li>
+                <li><a rel="noopener" target="_blank" href="https://developers.google.com/speed/libraries/#shaka-player">Google Hosted Libraries</a></li>
+                <li><a rel="noopener" target="_blank" href="https://www.jsdelivr.com/package/npm/shaka-player">jsDelivr</a></li>
+                <li><a rel="noopener" target="_blank" href="https://cdnjs.com/libraries/shaka-player">CDNJS</a></li>
               </ul>
             </div>
             <div class="mdl-mega-footer__drop-down-section">

diff --git a/demo/service_worker.js b/demo/service_worker.js
@@ -87,7 +87,7 @@ const CRITICAL_RESOURCES = [
 
   // Datalist-like fields are enabled by including these:
   '../node_modules/awesomplete/awesomplete.css',
-  '../node_modules/awesomplete/awesomplete.js',
+  '../node_modules/awesomplete/awesomplete.min.js',
 ];
 
 
@@ -107,7 +107,7 @@ const OPTIONAL_RESOURCES = [
   'https://shaka-player-demo.appspot.com/assets/audioOnly.gif',
 
   // The mux.js transmuxing library for MPEG-2 TS and CEA support.
-  '../node_modules/mux.js/dist/mux.js',
+  '../node_modules/mux.js/dist/mux.min.js',
 
   // The cast sender SDK.
   'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js',