Slow loading web page

Question

Hi there I'm working on a site and I don't why one of my pages loads very slowly and with lag. Is that because of my on scroll listeners or so many references? Any Problem in my code? Or is it because my host is so slow I don't understand what's the problem.

My website: http://bakhshnameyab.ir/researchPrograms

import React, { FC, RefObject, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import DropdownMenu from "../DropdownMenu";
import HandleStyle from "../HandleJumpStyleResearch";
import Swipper from "../Swiper";
import ScrollAnimation from "react-animate-on-scroll";
import "../css/ResearchPrograms.css";
import "animate.css/animate.min.css";

export const secondHeader = [
  {
    id: 1,
    name: "Basic, Clinical and Translational Research",
    url: "#firstParag",
  },
  {
    id: 2,
    name: "Medicinal Cannabis for Animals",
    url: "#secondParag",
  },
  {
    id: 3,
    name: "Collaborations",
    url: "#thirdParag",
  },
];

export const handleJumpTo = (
  ref: RefObject<HTMLDivElement>,
  mobile: boolean
) => {
  if (ref.current?.offsetTop) {
    if (mobile) {
      window.scrollTo({
        left: 0,
        top: ref.current?.offsetTop - 60,
        behavior: "smooth",
      });
    } else {
      window.scrollTo({
        left: 0,
        top: ref.current?.offsetTop - 49,
        behavior: "smooth",
      });
    }
  }
};

export const handleTitleFade = (ref: RefObject<HTMLDivElement>) => {
  if (
    ref.current &&
    window.pageYOffset + window.innerHeight >= ref.current.offsetTop + 100
  ) {
    ref.current.style.opacity = "1";
  } else {
    if (ref.current) {
      ref.current.style.opacity = "0";
    }
  }
};

export const handleMarginAnimation = (
  ref: RefObject<HTMLDivElement>,
  elementName: string
) => {
  const element = document.getElementById(elementName)?.style;
  if (
    ref.current &&
    element &&
    window.pageYOffset + window.innerHeight >= ref.current.offsetTop + 130
  ) {
    ref.current.style.opacity = "1";
    element.marginRight = window.innerWidth < 1160 ? "30px" : "60px";
  } else {
    if (ref.current && element) {
      ref.current.style.opacity = "0";
      element.marginRight = "500px";
    }
  }
};

const handleMarginLeftTrans = (
  ref: RefObject<HTMLDivElement>,
  elementName1: string,
  elementName2: string
) => {
  const element1 = document.getElementById(elementName1);
  const element2 = document.getElementById(elementName2);
  console.log(element1?.offsetTop);
  if (
    element1 &&
    element2 &&
    ref.current &&
    window.pageYOffset + window.innerHeight >= ref.current.offsetTop + 130
  ) {
    ref.current.style.opacity = "1";
    element1.style.opacity = "1";
    element2.style.opacity = "1";
  } else {
    if (element1 && element2 && ref.current) {
      ref.current.style.opacity = "0";
      element1.style.opacity = "0";
      element2.style.opacity = "0";
    }
  }
};

const ResearchPrograms: FC = ({ children }) => {
  const firstParag = useRef<HTMLDivElement>(null);
  const secondParag = useRef<HTMLDivElement>(null);
  const thirdParag = useRef<HTMLDivElement>(null);
  const fourthParag = useRef<HTMLDivElement>(null);
  const fifthParag = useRef<HTMLDivElement>(null);
  const sixthParag = useRef<HTMLDivElement>(null);
  const firstParagColumn = useRef<HTMLDivElement>(null);
  const secondParagColumn = useRef<HTMLDivElement>(null);
  const thirdParagColumn = useRef<HTMLDivElement>(null);
  useEffect(() => {
    document.addEventListener(
      "scroll",
      () => {
        if (window.innerWidth > 930) {
          handleTitleFade(firstParag);
          handleTitleFade(thirdParag);
          handleTitleFade(fifthParag);
          handleMarginAnimation(secondParag, "firstRPText");
          handleMarginAnimation(fourthParag, "secondRPText");
          handleMarginAnimation(sixthParag, "thirdRPText");
        } else {
          handleMarginLeftTrans(
            firstParagColumn,
            "firstColumnPic",
            "firstColumnText"
          );
          handleMarginLeftTrans(
            secondParagColumn,
            "secondColumnPic",
            "secondColumnText"
          );
          handleMarginLeftTrans(
            thirdParagColumn,
            "thirdColumnPic",
            "thirdColumnText"
          );
        }
      },
      true
    );
    return () =>
      document.removeEventListener(
        "scroll",
        () => {
          if (window.innerWidth > 930) {
            handleTitleFade(firstParag);
            handleTitleFade(thirdParag);
            handleTitleFade(fifthParag);
            handleMarginAnimation(secondParag, "firstRPText");
            handleMarginAnimation(fourthParag, "secondRPText");
            handleMarginAnimation(sixthParag, "thirdRPText");
          } else {
            handleMarginLeftTrans(
              firstParagColumn,
              "firstColumnPic",
              "firstColumnText"
            );
            handleMarginLeftTrans(
              secondParagColumn,
              "secondColumnPic",
              "secondColumnText"
            );
            handleMarginLeftTrans(
              thirdParagColumn,
              "thirdColumnPic",
              "thirdColumnText"
            );
          }
        },
        true
      );
  }, []);
  return (
    <div style={{ marginBottom: 40 }}>
      <img
        className="research-image"
        src={require("../../media/sample.jpg")}
        alt="main-wallpaper"
      />
      <div className="double-sided-container">
        <div>
          <div className="main-container-research">
            <b ref={firstParag} className="researchTitle">
              Basic, Clinical and Translational Research
            </b>
            <div className="research-text-pic" ref={secondParag}>
              <div id="firstRPText" className="leftTextRP">
                <div className="leftDetailsRP">
                  At GICR we strive to develop scientific solutions to explore
                  and understand the mechanisms by which medicinal cannabis can
                  help and affect diseases and promote healthier life with
                  higher quality globally. Through a hybrid research program
                  including fundamental and clinical research across disciplines
                  such as immunology, microbiology, cell biology, pharmacology,
                  genetics and behavioral as well as clinical sciences we are
                  unraveling discoveries to advance treatments for numerous
                  diseases and vastly improve patient outcomes.
                </div>
              </div>
              <img
                className="firstRPPic"
                src={require("../../media/BasicResearch.jpg")}
                alt="basicP"
              />
            </div>
          </div>
        </div>
        <div>
          <div className="main-container-research">
            <b ref={thirdParag} className="researchTitle">
              Medicinal Cannabis for Animals
            </b>
            <div className="research-text-pic" ref={fourthParag}>
              <div id="secondRPText" className="leftTextRP">
                <div className="leftDetailsRP">
                  Similar to human counterparts, cannabis-derived products have
                  been demonstrated to have potentials as therapeutic agents for
                  use in animals.
                  <br />
                  At Medicinal Cannabis of Georgia and Georgia Institute for
                  Cannabis research we have established a research program to
                  further investigate the effects of medicinal cannabis in
                  animals with very special focus on horse and equine
                  endocannibals system.
                  <br />
                  We are working with local organizations and veterinarians to
                  explore and provide quality scientific data to support
                  therapeutic evidence of medicinal cannabis in animals.
                </div>
              </div>
              <img
                className="secondRPPic"
                src={require("../../media/AnimalResearch.jpg")}
                alt="basicP"
              />
            </div>
          </div>
        </div>
        <div>
          <div className="main-container-research">
            <b ref={fifthParag} className="researchTitle">
              Collaborations
            </b>
            <div className="research-text-pic" ref={sixthParag}>
              <div id="thirdRPText" className="leftTextRP">
                <div className="leftDetailsRP">
                  At Medicinal Cannabis of Georgia and GICR we strongly believe
                  that only through a comprehensive and collaborative scientific
                  endeavor the potentials of medicinal cannabis can be
                  unraveled, tackled and to be utilized. Our central strategy is
                  to understand and use the medical effects of cannabis,
                  endocannabinoid system and cannabinoid treatments through a
                  transdisciplinary approach and mutual communication via
                  collaborative research. Therefore, at Medicinal Cannabis of
                  Georgia we are actively promoting collaborative research by
                  inviting and seeking organizations and research institutes to
                  share our scientific technologies, technical foundations, and
                  knowledge. Please feel free to contact us and we will make
                  every possible effort to provide the best format for
                  collaborations and joint scientific approach.
                </div>
              </div>
              <img
                className="thirdRPPic"
                src={require("../../media/CollabResearch.jpg")}
                alt="basicP"
              />
            </div>
          </div>
        </div>
      </div>
      <div className="column-RP">
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <b className="researchTitle" ref={firstParagColumn}>
            Basic, Clinical and Translational Research
          </b>
          <img
            id="firstColumnPic"
            className="basicPic"
            src={require("../../media/BasicResearch.jpg")}
            alt="CollabPic"
          />
          <div id="firstColumnText" className="firstColumnRPText">
            At GICR we strive to develop scientific solutions to explore and
            understand the mechanisms by which medicinal cannabis can help and
            affect diseases and promote healthier life with higher quality
            globally. Through a hybrid research program including fundamental
            and clinical research across disciplines such as immunology,
            microbiology, cell biology, pharmacology, genetics and behavioral as
            well as clinical sciences we are unraveling discoveries to advance
            treatments for numerous diseases and vastly improve patient
            outcomes.
          </div>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <b className="researchTitle" ref={secondParagColumn}>
            Medicinal Cannabis for Animals
          </b>
          <img
            id="secondColumnPic"
            className="basicPic"
            src={require("../../media/AnimalResearch.jpg")}
            alt="CollabPic"
          />
          <div id="secondColumnText" className="firstColumnRPText">
            Similar to human counterparts, cannabis-derived products have been
            demonstrated to have potentials as therapeutic agents for use in
            animals.
            <br />
            At Medicinal Cannabis of Georgia and Georgia Institute for Cannabis
            research we have established a research program to further
            investigate the effects of medicinal cannabis in animals with very
            special focus on horse and equine endocannibals system.
            <br />
            We are working with local organizations and veterinarians to explore
            and provide quality scientific data to support therapeutic evidence
            of medicinal cannabis in animals.
          </div>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <b className="researchTitle" ref={thirdParagColumn}>
            Collaborations
          </b>
          <img
            id="thirdColumnPic"
            className="basicPic"
            src={require("../../media/CollabResearch.jpg")}
            alt="CollabPic"
          />
          <div id="thirdColumnText" className="firstColumnRPText">
            At Medicinal Cannabis of Georgia and GICR we strongly believe that
            only through a comprehensive and collaborative scientific endeavor
            the potentials of medicinal cannabis can be unraveled, tackled and
            to be utilized. Our central strategy is to understand and use the
            medical effects of cannabis, endocannabinoid system and cannabinoid
            treatments through a transdisciplinary approach and mutual
            communication via collaborative research. Therefore, at Medicinal
            Cannabis of Georgia we are actively promoting collaborative research
            by inviting and seeking organizations and research institutes to
            share our scientific technologies, technical foundations, and
            knowledge. Please feel free to contact us and we will make every
            possible effort to provide the best format for collaborations and
            joint scientific approach.
          </div>
        </div>
      </div>
    </div>
  );
};

export default ResearchPrograms;

const styles = {
  secondNavTitle: {
    textDecoration: "none",
    color: "black",
    fontFamily: "serif",
    fontSize: "17px",
    fontWeight: "bold" as "bold",
    marginBottom: 2,
  },
  details: {
    boxSizing: "border-box" as "border-box",
    width: "100%",
    margin: "auto auto auto auto",
    maxWidth: "100%",
    padding: "0 25vw 0 25vw",
    fontFamily: "AlegreyaRegular",
  },
  titles: {
    fontSize: 37,
    display: "flex",
    fontFamily: "OldStandardTTRegular",
    justifyContent: "center",
    marginBottom: "10px",
    marginTop: "30px",
    padding: "0 10px 0 10px",
  },
};

Answer 1

You should definitely work on dividing the component into smaller reusable components. This already can help react to optimize the render process better. Additionally, document.removeEventListener() will do nothing because you are not passing the function you used to register but a new one. Keep in mind, every time you use an arrow function, it creates a new function. Better would be:

const onScroll = () => {
    // code to update
}
React.useEffect(() => {
    document.addEventListener("scroll", onScroll)
    return () => {
        document.removeEventListener("scroll", onScroll);
    }
});

But these are all peanuts compared to what is actually slowing down your page. You are using images that are 8mb+ in size. Every time you scroll down and a new image gets loaded, the browser has to decode those (needs 250ms on my machine) and skips all frames in between. That's why it stutters every time you scroll down. Users with slow internet connections will have to wait several seconds or even minutes before using the site. You must reduce the size significantly.