React images loading all at once

I recently have noticed that my site has had some major performance issues on the very first load. After doing some digging, I've noticed it's due to my app loading every single image in the app even when it's not required. I thought I took care of this using react lazy

import React, { lazy, Suspense } from 'react';

import { Route, Switch } from 'react-router-dom';

import { ProtectedRoute } from './components/ConditionalRoute';

import Spinner from './components/Spinner';

import ErrorBoundary from './pages/ErrorBoundaryPage';

import { routesPropTypes } from './App.proptypes';

const AboutPage = lazy(() => import('./pages/AboutPage'));
const HomePage = lazy(() => import('./pages/HomePage'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Collections = lazy(() => import('./pages/CollectionsPage'));
const Collection = lazy(() => import('./pages/CollectionPage'));
const Legal = lazy(() => import('./pages/LegalPage'));
const Faqs = lazy(() => import('./pages/FAQsPage'));
const EmailVerification = lazy(() => import('./pages/EmailVerificationPage'));
const Profile = lazy(() => import('./pages/ProfilePage'));
const Shop = lazy(() => import('./pages/ShopPage'));
const BuyProduct = lazy(() => import('./pages/ProductPage'));
const ArtistsPage = lazy(() => import('./pages/Artists'));
const ReviewsPage = lazy(() => import('./pages/Reviews'));
const PayPalTestPage = lazy(() => import('./pages/PayPalTestPage'));
const ResetPasswordPage = lazy(() => import('./pages/ResetPasswordPage'));
const ShippingGuidelines = lazy(() => import('./pages/ShippingGuidelines'));
const ContactPage = lazy(() => import('./pages/ContactPage'));
const SearchPage = lazy(() => import('./pages/SearchPage'));

const AppRoutes = ({ match }) => {
  return (
    <Suspense fallback={<Spinner />}>
      <Switch>
        <ErrorBoundary>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/faqs" component={Faqs} />
          <Route exact path="/legal" component={Legal} />
          <Route exact path="/collections" component={Collections} />
          <Route path="/collections/:id" component={Collection} />
          <Route exact path="/shop" component={Shop} />
          <Route exact path="/shop/:category" component={Shop} />
          <Route exact path="/product/:id" component={BuyProduct} />
          <Route exact path="/artists/:id" component={ArtistsPage} />
          <Route exact path="/profile/:id" component={Profile} />
          <Route exact path="/reviews/:id" component={ReviewsPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route exact path="/contact" component={ContactPage} />
          <Route exact path="/paypal" component={PayPalTestPage} />
          <Route exact path="/search/:name" component={SearchPage} />
          <Route
            exact
            path="/shipping-guidelines"
            component={ShippingGuidelines}
          />
          <Route
            exact
            path="/reset-password/:id"
            component={ResetPasswordPage}
          />
          <Route
            exact
            path="/email-verification/:id"
            component={EmailVerification}
          />
          {/* <Route path="/dashboard" component={Dashboard} /> */}
          {/* <Dashboard path="/dashboard" match={match} /> */}

          <ProtectedRoute path="/dashboard" redirect="/">
            <Dashboard match={match} />
          </ProtectedRoute>
        </ErrorBoundary>
      </Switch>
    </Suspense>
  );
};

AppRoutes.propTypes = routesPropTypes;

export default AppRoutes;

But apparently react lazy only takes care of the component logic. Anything helps! I have posted some screenshots below with the loadtimes.

all of the pictures that have the word "step" in them are part of a completely different page.

Best regards, Adam!

The package react-lazyload helped me a lot with this issue. It basically works as a component which its children only load when they are visible inside the viewport