How to optimize the visualization of animated pictures?

Question

JavaScript

Hello, I ran into the problem of optimizing a large number of .webp on the page, I thought something might be constantly being rendered, but no, here is my test site:
tyk
When you open it, it works fine, but it slows down when rendering images, here is the output code for the images themselves:

const Image = React.memo((props) => {
  let gif = props.gif;

  const [loader, setLoader] = useState(false);

  let clickCopy = (elem) => {
    navigator.clipboard.writeText(elem);
  };

  const loadImage = () => {
    setLoader(true);
  };

  return (
    <div className={s.wrapper} key={gif.id}>
      <div
        className={s.image}
        data-title="Нажмите чтобы скопировать ссылку на изображение"
      >
        <picture>
          <source type="image/webp" />
          <img
            src={gif.images.original.webp}
            alt={gif.slug}
            key={gif.id}
            className={!loader ? s.gifNone : s.gif}
            onClick={() => clickCopy(gif.images.original.url)}
            onLoad={() => loadImage()}
            crossOrigin="anonymous"
            width="361"
            height="203"
          />
        </picture>
      </div>

      {!loader && <div className={s.loader}></div>}
    </div>
  );
});