Performance and Loading Speed Enhancements for the Website 🏎 (#652)

microsoft · Oct 27, 2023 · 0a8f965 · 0a8f965
1 parent 8330187
commit 0a8f965
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/website/src/components/DeviceCard/index.tsx b/website/src/components/DeviceCard/index.tsx
@@ -17,6 +17,7 @@ export default function DeviceCard(props: {
                 className={`avatar__photo-link avatar__photo avatar__photo--xl ${styles.device__photo}`}
                 alt={imageAlt || `photograph of ${title}`}
                 src={image}
+                decoding="async"
             />
             <div className="avatar__intro">
                 <div className="avatar__name">{title}</div>

diff --git a/website/src/components/HeroImage/index.tsx b/website/src/components/HeroImage/index.tsx
@@ -12,6 +12,7 @@ export default function HeroImage() {
                     loading="lazy"
                     src={hero}
                     alt="screenshot of the visual studio integration"
+                    decoding="async"
                 />
             </div>
             <div className={styles["mid-grid"]}>💖</div>
@@ -25,7 +26,7 @@ export default function HeroImage() {
                     }))
                     .filter(({ img, url }) => !!img && !!url)
                     .map(({ id, img, devName }) => (
-                        <img key={id} src={img} alt={devName} title={devName} />
+                        <img key={id} src={img} alt={devName} title={devName} decoding="async" />
                     ))}
             </div>
         </div>

diff --git a/website/src/components/KeyGenerator/index.tsx b/website/src/components/KeyGenerator/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useCallback } from "react"
 
 function toHex(bytes: Uint8Array) {
     let r = ""
@@ -9,14 +9,14 @@ function toHex(bytes: Uint8Array) {
 }
 
 export default function KeyGenerator() {
-    const compute = () => {
+    const compute = useCallback(() => {
         if (typeof window === "undefined")
             return "00000000000000000000000000000000"
 
         const array = new Uint8Array(32) // Create a Uint8Array with 32 elements.
         window.crypto.getRandomValues(array) // Fill the array with cryptographically strong random values.
         return toHex(array)
-    }
+    }, [])
 
     const [value, setValue] = useState(compute())