lighthouse score optimizations

neuland · Jun 11, 2024 · d625f18 · d625f18
1 parent 502d342
commit d625f18
Show file tree

Hide file tree

Showing 17 changed files with 54 additions and 11 deletions.
diff --git a/src/checkout/components/Button.js b/src/checkout/components/Button.js
@@ -38,7 +38,6 @@ export default ({
     ${dataId ? `data-id="${dataId}"` : ""}
     ${title ? `title="${title}"` : ""}
     class="c_Button c_Button--${variant} ${className} ${rounded ? "c_Button--rounded" : ""} c_Button--size-${size}"
-    ontouchstart
   >
     <div class="c_Button__inner">${children}</div>
   </${tag}>`;

diff --git a/src/checkout/components/CompactHeader.css b/src/checkout/components/CompactHeader.css
@@ -18,4 +18,5 @@
 .c_CompactHeader__logo {
   display: block;
   width: 175px;
+  aspect-ratio: 3.5;
 }
diff --git a/src/checkout/components/MiniCart.js b/src/checkout/components/MiniCart.js
@@ -17,6 +17,7 @@ export default ({ c }) => {
       rounded: true,
       href: "/checkout/cart",
       className: "c_MiniCart__button",
+      title: "View Cart",
       children: html`
         <svg
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/checkout/components/Page.js b/src/checkout/components/Page.js
@@ -3,9 +3,14 @@ import Meta from "./Meta.js";
 
 export default ({ content }) => {
   return html`<!doctype html>
-    <html>
+    <html lang="en">
       <head>
+        <meta charset="utf-8" />
         <title>Tractor Store</title>
+        <meta
+          name="description"
+          content="a non-trivial micro frontends example project"
+        />
         <link rel="stylesheet" href="/explore/static/styles.css" />
         <link rel="stylesheet" href="/decide/static/styles.css" />
         <link rel="stylesheet" href="/checkout/static/styles.css" />

diff --git a/src/checkout/styles.css b/src/checkout/styles.css
@@ -13,6 +13,7 @@
     format("woff2");
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 * {

diff --git a/src/decide/pages/ProductPage.js b/src/decide/pages/ProductPage.js
@@ -24,9 +24,14 @@ export default ({ id, sku, c }) => {
   const variant = variants.find((v) => v.sku === sku) || variants[0];
 
   return html`<!doctype html>
-    <html>
+    <html lang="en">
       <head>
+        <meta charset="utf-8" />
         <title>Tractor Store</title>
+        <meta
+          name="description"
+          content="a non-trivial micro frontends example project"
+        />
         <link rel="stylesheet" href="/explore/static/styles.css" />
         <link rel="stylesheet" href="/decide/static/styles.css" />
         <link rel="stylesheet" href="/checkout/static/styles.css" />
@@ -43,6 +48,7 @@ export default ({ id, sku, c }) => {
               sizes="400px"
               width="400"
               height="400"
+              alt="${name} - ${variant.name}"
             />
             <div class="d_ProductPage__productInformation">
               <h2 class="d_ProductPage__title">${name}</h2>

diff --git a/src/decide/styles.css b/src/decide/styles.css
@@ -7,6 +7,7 @@
     format("woff2");
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 * {

diff --git a/src/explore/components/Button.js b/src/explore/components/Button.js
@@ -19,7 +19,6 @@ export default ({
     ${value ? `value="${value}"` : ""}
     ${dataId ? `data-id="${dataId}"` : ""}
     class="e_Button e_Button--${variant} ${className} ${rounded ? "e_Button--rounded" : ""}"
-    ontouchstart
   >
     <div class="e_Button__inner">${children}</div>
   </${tag}>`;

diff --git a/src/explore/components/Footer.css b/src/explore/components/Footer.css
@@ -121,7 +121,7 @@
   margin: 0;
 }
 
-.e_Footer__credits h4 {
+.e_Footer__credits h3 {
   margin: 0;
   font-size: 1em;
   font-weight: normal;

diff --git a/src/explore/components/Footer.js b/src/explore/components/Footer.js
@@ -9,6 +9,8 @@ export default () => {
           <img
             src="${IMAGE_SERVER}/cdn/img/neulandlogo.svg"
             alt="neuland - Büro für Informatik"
+            width="45"
+            height="40"
           />
           <p>
             based on
@@ -26,7 +28,7 @@ export default () => {
 
         <div class="e_Footer__credits">
           <!-- replace this details about your implementation and organization -->
-          <h4>techstack</h4>
+          <h3>techstack</h3>
           <p>
             ssr-only, modular monolith, template strings, esbuild, hono,
             cloudflare workers
@@ -36,6 +38,8 @@ export default () => {
             <img
               src="${IMAGE_SERVER}/cdn/img/neulandlogo.svg"
               alt="neuland - Büro für Informatik"
+              width="15"
+              height="13"
             />
             <a href="https://neuland-bfi.de" target="_blank">neuland</a>
             /

diff --git a/src/explore/components/Header.css b/src/explore/components/Header.css
@@ -111,6 +111,7 @@
   @media (min-width: 500px) {
     width: 270px;
   }
+  aspect-ratio: 3.5;
   display: block;
 }
 

diff --git a/src/explore/components/Recommendation.js b/src/explore/components/Recommendation.js
@@ -12,6 +12,7 @@ export default ({ image, url, name }) => {
         class="e_Recommendation_image"
         src="${src(image, 200)}"
         srcet="${srcset(image, [200, 400])}"
+        alt=""
         sizes="200px"
         width="200"
         height="200"

diff --git a/src/explore/pages/CategoryPage.js b/src/explore/pages/CategoryPage.js
@@ -32,9 +32,14 @@ export default ({ category, c }) => {
   ];
 
   return html`<!doctype html>
-    <html>
+    <html lang="en">
       <head>
+        <meta charset="utf-8" />
         <title>Tractor Store</title>
+        <meta
+          name="description"
+          content="a non-trivial micro frontends example project"
+        />
         <link rel="stylesheet" href="/explore/static/styles.css" />
         <link rel="stylesheet" href="/decide/static/styles.css" />
         <link rel="stylesheet" href="/checkout/static/styles.css" />

diff --git a/src/explore/pages/HomePage.js b/src/explore/pages/HomePage.js
@@ -13,9 +13,14 @@ import Meta from "../components/Meta.js";
  */
 export default ({ c }) => {
   return html`<!doctype html>
-    <html>
+    <html lang="en">
       <head>
+        <meta charset="utf-8" />
         <title>Tractor Store</title>
+        <meta
+          name="description"
+          content="a non-trivial micro frontends example project"
+        />
         <link rel="stylesheet" href="/explore/static/styles.css" />
         <link rel="stylesheet" href="/decide/static/styles.css" />
         <link rel="stylesheet" href="/checkout/static/styles.css" />
@@ -32,7 +37,7 @@ export default ({ c }) => {
                     src="${src(image, 500)}"
                     srcet="${srcset(image, [500, 1000])}"
                     sizes="100vw, (min-width: 500px) 50vw"
-                    alt="${title}"
+                    alt=""
                   />
                   ${title}
                 </a>`,

diff --git a/src/explore/pages/StoresPage.js b/src/explore/pages/StoresPage.js
@@ -14,9 +14,14 @@ import Meta from "../components/Meta.js";
  */
 export default ({ c }) => {
   return html`<!doctype html>
-    <html>
+    <html lang="en">
       <head>
+        <meta charset="utf-8" />
         <title>Tractor Store</title>
+        <meta
+          name="description"
+          content="a non-trivial micro frontends example project"
+        />
         <link rel="stylesheet" href="/explore/static/styles.css" />
         <link rel="stylesheet" href="/decide/static/styles.css" />
         <link rel="stylesheet" href="/checkout/static/styles.css" />

diff --git a/src/explore/styles.css b/src/explore/styles.css
@@ -17,6 +17,7 @@
     format("woff2");
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 
 * {

diff --git a/wrangler.toml b/wrangler.toml
@@ -3,4 +3,12 @@ main = "src/server.cloudflare.js"
 compatibility_date = "2024-03-12"
 
 [site]
-bucket = "./public"
+bucket = "./public"
+
+  [[site.headers]]
+  for = "*"
+  [site.headers.values]
+  Cache-Control = "public, max-age=3600"
+  Access-Control-Allow-Origin = "*"
+  Access-Control-Allow-Methods = "GET, POST, OPTIONS"
+  Access-Control-Allow-Headers = "*"