lighthouse ranking improvement

components/cards/card.tsx

@@ -9,6 +9,7 @@ import {
  CardContent,
  Card,
 } from "@mui/material";
+import Image from "next/image";
 
 interface FoodCardProps {
  videoId: string;
@@ -19,6 +20,7 @@ interface FoodCardProps {
  displacement: number;
  hasVeg: boolean;
  useLocation: boolean;
+ index: number;
  setUseLocation: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -30,12 +32,23 @@ export default function FoodCard(props: FoodCardProps): JSX.Element {
  sx={{ textAlign: "center", marginBottom: "0.5rem" }}
  >
  <CardActionArea href={`/fldb/${props.videoId}`}>
- <CardMedia
- component="img"
- height={props.height}
- image={props.thumbnail}
- alt={props.title ? props.title : "No image found"}
- />
+ <CardMedia>
+ <div
+ style={{
+ position: "relative",
+ width: "100%",
+ height: props.height,
+ }}
+ >
+ <Image
+ src={props.thumbnail}
+ alt={props.title ? props.title : "No image found"}
+ layout="fill"
+ objectFit="cover"
+ priority={props.index < 3 ? true : false}
+ />
+ </div>
+ </CardMedia>
  <CardContent>
  <Typography gutterBottom variant="h6" component="div">
  {props.title ? props.title : "No title"}

next.config.js

@@ -1,3 +1,6 @@
 module.exports = {
  reactStrictMode: true,
+ images: {
+ domains: ["i.ytimg.com"],
+ },
 };

pages/index.tsx

@@ -285,7 +285,7 @@ function Home(props: HomeProps): JSX.Element {
  <Accordion expanded sx={{ mb: "1rem" }}>
  <AccordionSummary
  expandIcon={<TuneIcon />}
- aria-controls="filters"
+ aria-controls="filter-controls"
  id="filters"
  >
  <Typography
@@ -406,7 +406,7 @@ function Home(props: HomeProps): JSX.Element {
  </Accordion>
  {currentVideos.length ? (
  currentPageVideos.reduce(
- (oldRecord: JSX.Element[], newRecord) => {
+ (oldRecord: JSX.Element[], newRecord, currentIndex) => {
  if (newRecord.name) {
  oldRecord.push(
  <FoodCard
@@ -424,6 +424,7 @@ function Home(props: HomeProps): JSX.Element {
  }
  useLocation={useLocation}
  setUseLocation={setUseLocation}
+ index={currentIndex}
  />
  );
  }

public/robots.txt

@@ -1,3 +1,3 @@
 User-agent: *
-Sitemap: /sitemap.xml
+Sitemap: https://foodloversdatabase.com/sitemap.xml
 Disallow: