chore: minor changes per lighthouse checks

public/index.html

@@ -26,6 +26,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="preload"
+      fetchpriority="high"
+      as="image"
+      href="/static/dataset-detail.webp"
+      type="image/webp"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <title>Dataxplorer, empowering the impact of data</title>

src/app/modules/common/newsletterForm/index.tsx

@@ -108,6 +108,7 @@ export default function NewsletterForm(
         ref={inputRef}
         onFocus={inputRefFocus}
         onBlur={inputRefBlur}
+        autoComplete="email"
       />
       <button type="submit">SUBSCRIBE</button>
     </form>

src/app/modules/home-module/components/Filter/index.tsx

@@ -81,6 +81,8 @@ export default function Filter(
               onChange={handleSearch}
               data-cy="filter-search-input"
               aria-label="search"
+              name="search"
+              autoComplete="search"
             />
             <IconButton
               onClick={() => {

src/app/modules/home-module/index.tsx

@@ -8,18 +8,13 @@ import { useRecoilState } from "recoil";
 import { Box, Grid, Container } from "@material-ui/core";
 /* project */
 import HomeFooter from "app/modules/home-module/components/Footer";
-import DatasetDetailImage from "app/modules/home-module/assets/dataset-detail.png";
 import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
 import { ReactComponent as MicrosoftIcon } from "app/modules/onboarding-module/asset/microsoft-img.svg";
 import HeroEllipses from "app/modules/home-module/assets/hero-ellipses.svg";
 
 import { homeDisplayAtom } from "app/state/recoil/atoms";
-import {
-  datsetDetailImgcss,
-  rowFlexCss,
-  turnsDataCss,
-} from "app/modules/home-module/style";
+import { rowFlexCss, turnsDataCss } from "app/modules/home-module/style";
 import AssetsCollection from "./components/AssetCollection";
 
 export default function HomeModule() {
@@ -177,12 +172,31 @@ export default function HomeModule() {
                   @media screen and (max-width: 1290px) {
                     justify-content: center;
                   }
+                  @media (max-width: 1240px) {
+                    > img {
+                      width: 70%;
+                      height: 100%;
+                      object-fit: contain;
+                    }
+                  }
+                  @media (max-width: 700px) {
+                    > img {
+                      width: 95%;
+                      height: 100%;
+                      object-fit: contain;
+                    }
+                  }
                 `}
               >
                 <img
-                  src={DatasetDetailImage}
+                  width={710}
+                  height={428}
+                  fetchPriority="high"
                   alt="dataset-detail-img"
-                  css={datsetDetailImgcss}
+                  src="/static/dataset-detail.webp"
+                  style={{
+                    borderRadius: "14px",
+                  }}
                 />
               </Grid>
             </Grid>

src/app/modules/home-module/style.ts

@@ -85,22 +85,6 @@ export const featuredAssetsCss = css`
   }
 `;
 
-export const datsetDetailImgcss = css`
-  width: 710px;
-  height: 428px;
-  border-radius: 14px;
-  @media (max-width: 1240px) {
-    width: 70%;
-    object-fit: contain;
-    height: 100%;
-  }
-  @media (max-width: 700px) {
-    width: 95%;
-    object-fit: contain;
-    height: 100%;
-  }
-`;
-
 export const rowFlexCss = css`
   display: flex;
   justify-content: center;

src/react-app-env.d.ts

@@ -5,38 +5,38 @@
 
 declare namespace NodeJS {
   interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly NODE_ENV: "development" | "production" | "test";
     readonly PUBLIC_URL: string;
   }
 }
 
-declare module '*.gif' {
+declare module "*.gif" {
   const src: string;
   export default src;
 }
 
-declare module '*.jpg' {
+declare module "*.jpg" {
   const src: string;
   export default src;
 }
 
-declare module '*.jpeg' {
+declare module "*.jpeg" {
   const src: string;
   export default src;
 }
 
-declare module '*.png' {
+declare module "*.png" {
   const src: string;
   export default src;
 }
 
-declare module '*.webp' {
+declare module "*.webp" {
   const src: string;
   export default src;
 }
 
-declare module '*.svg' {
-  import * as React from 'react';
+declare module "*.svg" {
+  import * as React from "react";
 
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement>
@@ -45,3 +45,11 @@ declare module '*.svg' {
   const src: string;
   export default src;
 }
+
+declare module "react" {
+  import React from "react";
+
+  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    fetchPriority?: "high" | "low" | "auto";
+  }
+}