Лагает сайт когда меняю фотографию?

Question

[Рамазан Ахриев]

Доброй ночи.
Появилась такая необычная проблема, делаю портфолио для друга дизайнера по ютубу и дошёл до того момента где указаны его работы, использую я Sanity и импортирую эти фотографии из неё, когда использую фотографии как из видео то всё работает чётко, но когда я ставлю фотографии его работ, сайт уже на 3 разделе( Его работ) начинает лагать и анимация зависает. С учётом того что фотографии которые использую я они меньше размером и одного формата и несмотря на это он лагает, пытался использовать онлайн оптимизаторы фотографий.

import React, { useState, useEffect } from "react";
import { AiFillEye} from "react-icons/ai";
import { motion } from "framer-motion";
import { AppWrap } from "../../wrapper";
import { urlFor, client } from "../../client";
import "./Work.scss";

import React, { useState, useEffect } from "react";
import { AiFillEye} from "react-icons/ai";
import { motion } from "framer-motion";
import { AppWrap } from "../../wrapper";
import { urlFor, client } from "../../client";
import "./Work.scss";

const WorkCard = React.memo(({ work }) => {
  const [pdfUrl, setPdfUrl] = useState(null)

  const handleClick = () => {
    if (work.pdfFile) {
      setPdfUrl(work.pdfFile.asset.url);
    }
  };

  return (
    <div className="app__work-item app__flex">
      <div className="app__work-img app__flex">
          <img src={urlFor(work.imgUrl)} alt={work.title}></img>
        <motion.div
          whileHover={{ opacity: [0, 1] }}
          initial={{ opacity: 0 }}
          transition={{
            duration: 0.25,
            ease: "easeInOut",
            staggerChildren: 0.5,
          }}
          className="app__work-hover app__flex"
        >
          {work.pdfFile ? (
            <a
              href={pdfUrl ? pdfUrl : "#"}
              target="_blank"
              rel="noreferrer"
              onClick={handleClick}
            >
              <motion.div
                whileInView={{ scale: [0, 1] }}
                whileHover={{ scale: [1, 0.9] }}
                transition={{ duration: 0.25 }}
                className="app__flex"
              >
                <AiFillEye />
              </motion.div>
            </a>
          ) : (
            <a href={work.projectLink} target="_blank" rel="noreferrer">
              <motion.div
                whileInView={{ scale: [0, 1] }}
                whileHover={{ scale: [1, 0.9] }}
                transition={{ duration: 0.25 }}
                className="app__flex"
              >
                <AiFillEye />
              </motion.div>
            </a>
          )}
        </motion.div>
      </div>

      <div className="app__work-content app__flex">
        <h4 className="bold-text"> {work.title}</h4>
        <p className="p-text" style={{ marginTop: 10 }}>
          {work.description}
        </p>
        <div className="app__work-tag app__flex">
          <p className="p-text">{work.tags[0]}</p>
        </div>
      </div>
    </div>
  );
});

const Work = () => {
  const [activeFilter, setActiveFilter] = useState("Все");
  const [AnimateCard, setAnimateCard] = useState({ y: 0, opacity: 1 });
  const [works, setWorks] = useState([]);
  const [filterWork, setfilterWork] = useState([]);

  useEffect(() => {
    const query = '*[_type == "works"]{..., pdfFile{asset->{_id, url}}}';

    client.fetch(query).then((data) => {
      setWorks(data);
      setfilterWork(data);
    });
  }, []);

  const handleWorkFilter = (item) => {
    setActiveFilter(item);
    setAnimateCard([{ y: 100, opacity: 0 }]);

    setTimeout(() => {
      setAnimateCard([{ y: 0, opacity: 1 }]);

      if (item === "Все") {
        setfilterWork(works);
      } else {
        setfilterWork(works.filter((work) => work.tags.includes(item)));
      }
    }, 500);
  };

  return (
    <>
      <h2 className="head-text">
        Моё <span>Портфолио</span>
        <div className="app__work-filter">
          {["Постеры и баннеры", "Товарные карточки", "Логотипы", "Визитные карточки", "Все"].map((item, index) => (
            <div
              key={index}
              onClick={() => handleWorkFilter(item)}
              className={`app__work-filter-item app__flex p-text ${activeFilter === item ? "item-active" : ""}`}
            >
              {item}
            </div>
          ))}
        </div>
      </h2>

      <motion.div
        animate={AnimateCard}
        transition={{ duration: 0.5, delayChildren: 0.4 }}
        className="app__work-portfolio"
      >
        {filterWork.map((work, index) => (
          <WorkCard key={index} work={work} />
        ))}
      </motion.div>
    </>
  );
};

export default AppWrap(Work, "work");

Comments

[rPman]

Не смотрел код, ты бы лучше оформил бы это на какой либо онлайн песочнице типа jsfiddle, поставив те фото что лагают.

Если лаги при смене фото, значит проблема в них?

[Александр]

Вот чтобы узнать почему лагает, открываете девтулзы на разделе performance и записываете его.

[Рамазан Ахриев]

Александр, Да спасибо, оказывается Sanity плохо работает с высоким качеством изображение или же сказать с очень высоким.