ページの読み込みがとても遅くて困っています

こんにちは。

フロントはReact（Vite)18.2.0、バックはExpress4.18.2で、
初めてドメインを取得してデプロイしたのですが、
読み込みに３０秒くらいかかるページがあり、とても困っています。
フロントはVercel、バックはrenderでデプロイしました。

画像が非常に多いページですが、各画像の解像度はかなり下げてどれも１００KB以下なので、画像の問題ではないと思います。
またエラーメッセージはなく、ローカル環境ではすぐに表示されます。

もしかするとコンパイルファイルが原因かもしれないのですが、
このファイルの読み方がわからないし、本当にこのファイルが原因なのかもわかりません。
何を試してもうまくいかないので、思い切って投稿させていただきました。

https://www.impermanencefilms.org/
上記トップページから、
右下にある「TOUS LES FILMS」をクリックして、ページ遷移した先の下記URLです。
https://www.impermanencefilms.org/films

２回目以降は、キャッシュのお陰ですぐに表示されますが、初回は必ず時間がかかります。

どなたか、原因とその解決法がわかる方がいらしたら、
教えていただけないでしょうか？
どうぞよろしくお願いします。

下記が該当ページのコード（FilmPage.jsx)です。

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import myApi from '../../service/service';
import Spinner from '../../components/Spinner/Spinner';
import './FilmPage.css';
import ScrollToTop from '../../components/ScrollToTop';

const FilmPage = () => {
  const [films, setFilms] = useState([]);
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await myApi.get(`/films`);
        setFilms(response.data);
        setLoading(false);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);

  if (loading) {
    return <Spinner />;
  }

  const groupedFilms = {};
  films.forEach((film) => {
    const category = film.category || 'defaultCategory';
    if (!groupedFilms[category]) {
      groupedFilms[category] = [];
    }
    groupedFilms[category].push(film);
  });

  const categoryOrder = ['encours', 'production', 'distribution', 'programmation'];

  for (const category in groupedFilms) {
    groupedFilms[category].sort((a, b) => {
      if (a.createdYear !== b.createdYear) {
        return b.createdYear - a.createdYear;
      } else {
        return a.title.localeCompare(b.title);
      }
    });
  }

  const displayCategory = (category) => {
    switch (category) {
      case 'encours':
        return 'en cours';
      case 'production':
        return 'production';
      case 'distribution':
        return 'distribution';
      case 'programmation':
        return 'programmation';
      default:
        return '';
    }
  };

  const formatDirectorName = (directorName) => {
    return /^[aeiou\u0153]/i.test(directorName) ? `d'${directorName}` : `de ${directorName}`;
  };

  return (
    // <FadeIn>
    <section className='FilmPage'>
      <div className='FilmPage-container'>
        {categoryOrder.map((category) => (
          <div key={category} id={category} className='category-section'>
            <h2 className='category-title'>{displayCategory(category)}</h2>
            <div className='FilmPage-category'>
              {groupedFilms[category]?.map((film) => (
                <div className='FilmPage-content' key={film._id}>
                  <Link to={`/films/${film._id}`}>
                    <div className='FilmPage-position'>
                      <picture>
                        <img
                          src={film.thumbnailImages[0]}
                          alt={film.title}
                          className='film-image'
                        /></picture>
                      <div className='film-title'>
                        <h4>{film.title.toUpperCase()}</h4>
                        <h6>{formatDirectorName(film.directedBy)}</h6>
                      </div>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <ScrollToTop />
    </section>
    // </FadeIn>
  );
};

export default FilmPage;

バックエンドは下記コードです。

router.get('/', async (req, res, next) => {
  try {
    const films = await FilmFr.find()
    res.json(films)
  } catch (error) {
    next(error)
  }
})