[Not done] Optimizing the performance of Surge Website

next.config.mjs

@@ -6,6 +6,7 @@ const nextConfig = {images: {
         hostname: "images.ctfassets.net",
       },
     ],
+    formats: ['image/avif', 'image/webp'],
   },};
 
 export default nextConfig;

src/app/join/OpenRolesSection.tsx

@@ -18,10 +18,12 @@ export default function OpenRolesSection({ jobs }: OpenRolesSectionProps) {
     jobMap.set(job.team, (jobMap.get(job.team) || 0) + 1);
   });
 
+  /*
   const totalJobCount = Array.from(jobMap.values()).reduce(
     (total, count) => total + count,
     0
   );
+  */
 
   useEffect(() => {
     const selectedJobTeam = localStorage.getItem("selectedJobTeam") || "All";

src/app/join/page.tsx

@@ -4,10 +4,10 @@ import Card from "@/components/Card";
 import OpenRolesSection from "./OpenRolesSection";
 import ButtonScroll from "@/components/ButtonScroll";
 import InfoItem from "@/components/InfoItem";
-import skills from "/public/join/skills.png";
-import experience from "/public/join/experience.png";
-import friends from "/public/join/friends.png";
-import rocket from "/public/join/rocket.png";
+import skills from "/public/join/skills.webp";
+import experience from "/public/join/experience.webp";
+import friends from "/public/join/friends.webp";
+import rocket from "/public/join/rocket.webp";
 
 import text_content from "@/lib/content/text_content.json";
 import { getJobListingsCollection } from "@/lib/content/contentfulQueries";

src/app/sections/UnderConstruction.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import StormHacksImage from "/public/stormhacks.png";
+import StormHacksImage from "/public/stormhacks.webp";
 import Link from "next/link";
 
 import text_content from "@/lib/content/text_content.json";

src/app/sections/events/EventsHero/index.tsx

@@ -1,6 +1,6 @@
 import ButtonScroll from "@/components/ButtonScroll";
 import Image from "next/image";
-import workshop from "/public/workshop.png"
+import workshop from "/public/workshop.webp"
 import { Work_Sans } from "next/font/google";
 
 export default function EventsHero() {
@@ -31,7 +31,7 @@ export default function EventsHero() {
     //   <section className="flex  md:flex-row  w-full gap-16 lg:gap-12 flex-col-reverse items-center justify-center ">
     //     <div className="flex md:justify-center h-full md:w-[40%]   ">
     //       <Image
-    //         src={"/events.png"}
+    //         src={"/events.avif"}
     //         width={1659}
     //         height={1421}
     //         alt={"hello"}

src/app/sections/home/Events/index.jsx

@@ -1,6 +1,6 @@
-import StormHacksImage from "/public/stormhacks.png";
-import JourneyHacksImage from "/public/journeyhacks.png";
-import WorkshopsImage from "/public/workshops.png";
+import StormHacksImage from "/public/stormhacks.webp";
+import JourneyHacksImage from "/public/journeyhacks.webp";
+import WorkshopsImage from "/public/workshops.webp";
 import Image from "next/image";
 import HomeCard from "@/components/HomeCard";
 
@@ -52,6 +52,7 @@ const EventSection = () => {
   );
 };
 
+/*
 const SurgeEvent = ({ heading, subheading, image, description }) => {
   return (
     <>
@@ -74,6 +75,7 @@ const SurgeEvent = ({ heading, subheading, image, description }) => {
     </>
   );
 };
+*/
 
 const InfoSection = () => {
   return (

src/app/sections/home/Landing/index.jsx

@@ -1,8 +1,8 @@
 "use client";
 
-import Background from "/public/assets/landing.png";
-import BodyImage from "/public/about us.png";
-import Rocket from "/public/rocket-no-elements.png";
+import Background from "/public/assets/landing.webp";
+import BodyImage from "/public/aboutus.webp";
+import Rocket from "/public/rocket-no-elements.webp";
 import Image from "next/image";
 
 import text_content from "@/lib/content/text_content.json";
@@ -22,166 +22,161 @@ function Landing() {
         </div>
 
         <div className="relative w-full">
-          {/* <Image
+          <Image
             src={Rocket}
-            alt="Background Image"
+            alt="Rocket without elements"
+            layout="responsive"
             width={2498}
             height={1255}
-            objectFit="contain"
-            className=" h-full w-full  lg:w-[50%] mx-auto "
-            quality={100}
-            className="w-full"
-          /> */}
-          <img
-            src="rocket-no-elements.png"
             className="w-full max-w-[90rem]"
-          ></img>
+            quality={100}
+          />
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="green star 1.png"
+            <Image
+              src="/green star 1.png"
+              alt="Green Star"
+              width={52}
+              height={52}
               className="w-[5.2785%] h-auto relative left-[1.672%] top-[4.28%] animate-bounce"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="purple star 1.png"
+            <Image
+              src="/purple star 1.png"
+              alt="Purple Star"
+              width={65}
+              height={65}
               className="w-[6.403%] h-auto relative left-[16.67%] top-[7.521%] animate-spin"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="yellow star 1.png"
+            <Image
+              src="/yellow star 1.png"
+              alt="Yellow Star"
+              width={66}
+              height={66}
               className="w-[6.635%] h-auto relative top-[16.69%] animate-pulse"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="small purple star 1.png"
+            <Image
+              src="/small purple star 1.png"
+              alt="Small Purple Star"
+              width={39}
+              height={39}
               className="w-[3.9105%] h-auto relative left-[4.424%] top-[29.5%]"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="stars.png"
+            <Image
+              src="/stars.png"
+              alt="Stars"
+              width={544}
+              height={544}
               className="w-[54.47%] h-auto relative left-[17.3565%] top-[25.797%]"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="large pink star 1.png"
+            <Image
+              src="/large pink star 1.png"
+              alt="Large Pink Star"
+              width={59}
+              height={59}
               className="w-[5.933%] h-auto relative left-[85.683%] top-[42.37%] animate-bounce"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="large pink star 2.png"
+            <Image
+              src="/large pink star 2.png"
+              alt="Large Pink Star 2"
+              width={42}
+              height={42}
               className="w-[4.279%] h-auto relative left-[83.2225%] top-[78.778%] animate-spin"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="large purple star.png"
+            <Image
+              src="/large purple star.png"
+              alt="Large Purple Star"
+              width={63}
+              height={63}
               className="w-[6.269%] h-auto relative left-[80.508%] top-[54.25477%] animate-pulse"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="small green star.png"
+            <Image
+              src="/small green star.png"
+              alt="Small Green Star"
+              width={33}
+              height={33}
               className="w-[3.2925%] h-auto relative left-[89.5885%] top-[64.897%] animate-pulse"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="glasses.png"
+            <Image
+              src="/glasses.png"
+              alt="Glasses"
+              width={72}
+              height={72}
               className="w-[7.291%] h-auto relative left-[37.18%] top-[8.71%]"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="big-bubble.png"
+            <Image
+              src="/big-bubble.png"
+              alt="Big Bubble"
+              width={64}
+              height={64}
               className="w-[6.4065%] h-auto relative left-[25%] top-[68.83%] animate-ping"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="small-bubble.png"
+            <Image
+              src="/small-bubble.png"
+              alt="Small Bubble"
+              width={14}
+              height={14}
               className="w-[1.368%] h-auto relative left-[24.09%] top-[81.85%] animate-ping"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="bubble.png"
+            <Image
+              src="/bubble.png"
+              alt="Bubble"
+              width={28}
+              height={28}
               className="w-[2.8285%] h-auto relative left-[30.489%] top-[80.01%] animate-ping"
-            ></img>
+            />
           </div>
 
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
-              src="light-bubble.png"
+            <Image
+              src="/light-bubble.png"
+              alt="Light Bubble"
+              width={24}
+              height={24}
               className="w-[2.434%] h-auto relative left-[32.112%] top-[75.84%] animate-ping"
-            ></img>
-          </div>
-
-          {/* <div className="absolute top-0 left-0 w-full h-full">
-            {" "}
-            <img
-              src="s key cap.png"
-              className="w-[6.51%] h-auto relative left-[6.96%] top-[10.46%] animate-"
-            ></img>
-          </div> */}
-
-          {/* <div className="absolute top-0 left-0 w-full h-full">
-            {" "}
-            <img
-              src="u key cap.png"
-              className="w-[5.99%] h-auto relative left-[17.91%] top-[10.95%]"
-            ></img>
-          </div>
-
-          <div className="absolute top-0 left-0 w-full h-full">
-            {" "}
-            <img
-              src="r key cap.png"
-              className="w-[6.42%] h-auto relative left-[62.35%] top-[75.54%]"
-            ></img>
+            />
           </div>
-
-          <div className="absolute top-0 left-0 w-full h-full">
-            {" "}
-            <img
-              src="g key cap.png"
-              className="w-[5.78%] h-auto relative left-[75.28%] top-[80.63%]"
-            ></img>
-          </div>
-
-          <div className="absolute top-0 left-0 w-full h-full">
-            {" "}
-            <img
-              src="e key cap.png"
-              className="w-[5.687%] h-auto relative left-[88.84%] top-[73.8%]"
-            ></img>
-          </div> */}
         </div>
       </div>
 
       <div className="flex flex-col-reverse lg:flex-row pb-5 mt-16 md:mt-20 justify-between px-5 md:px-10 md:py-8 rounded-custom-radius items-center gap-8 lg:gap-8 bg-surface">
         <div className="lg:m-4">
-          <h2 className="text-caption">
-            {text_content.homepage.about.callout}
-          </h2>
+          <h2 className="text-caption">{text_content.homepage.about.callout}</h2>
           <h1 className="title-2 emphasized mb-4 mt-3">
             {text_content.homepage.about.heading}
           </h1>
@@ -190,7 +185,14 @@ function Landing() {
             {text_content.homepage.about.cta}
           </button>
         </div>
-        <img src="about us.png" className="w-full md:w-3/4 lg:w-1/2" />
+
+        <Image
+          src={BodyImage}
+          alt="About us"
+          width={500} 
+          height={500} 
+          className="w-full md:w-3/4 lg:w-1/2"
+        />
       </div>
     </>
   );

src/components/JoinDiscord.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import text_content from "@/lib/content/text_content.json";
-import InvolvementImage from "/public/Discord image.png";
+import InvolvementImage from "/public/Discord-image.webp";
 
 export default function JoinDiscord() {
   return (

src/components/Nav.tsx

@@ -2,8 +2,6 @@
 import Link from "next/link";
 import { useState, useEffect, useRef } from "react";
 import { usePathname } from "next/navigation";
-import path from "path";
-
 
 export default function NavBar() {
   const [isOpen, setIsOpen] = useState<boolean>(false);