트러블슈팅(Trouble Shooting)/아리아(ARIA)

[트러블슈팅] 첫 페이지 로딩 시간 지연 - 아리아

이승재(Frontend Developer) 2024. 3. 30. 00:37

💣 문제 발생

일러스트 학원이라는 특성 상, 이미지 자료가 많다 보니 처음 사이트를 입장할 때 첫 페이지 로딩 시간이 길어지는 문제가 발생했다.

 

 

 

🎯 개선 방향

React는 싱글 페이지 애플리케이션(SPA, Single Page Application) 방식이기 때문에 일반적으로는 모든 컴포넌트를 읽고 난 후에야 첫 페이지를 로드하는데 아마, 이것 때문에 로딩 속도가 늘어난게 아닐까 한다.

 

그래서 생각한 방법이 react-router-dom에 존재하는 lazy() 함수를 사용하기로 결정했다.

 

lazy() 함수는 컴포넌트를 동적으로 로드할 수 있게 도와주는 함수이다.

 

 

 

개선 결과

lazy() 함수를 사용함으로써 모든 페이지가 아닌 해당 컴포넌트만이 로드되게 하여 첫 페이지 입장 시 로딩 시간을 크게 단축시키면서 실제 Lighthouse 검사의 성능을 60에서 74로 향상시킬 수 있었다.

 

또한 Suspense 컴포넌트를 이용해 페이지 로드 시에 보여줄 로딩 이미지를 추가하면서 사이트 이탈율을 줄이는 효과도 있었다.

 

// lazy() 함수 사용
const Home = lazy(() => import('./pages/Home'));
const Check = lazy(() => import('./pages/Check'));
const Event = lazy(() => import('./pages/Event'));
const EventDetail = lazy(() => import('./pages/EventDetail'));
const Mentor = lazy(() => import('./pages/Mentor'));
const MentorDetail = lazy(() => import('./pages/MentorDetail'));
const Notice = lazy(() => import('./pages/Notice'));
const NoticeDetail = lazy(() => import('./pages/NoticeDetail'));
const Showcase = lazy(() => import('./pages/Showcase'));
const Counseling = lazy(() => import('./pages/Counseling'));
const Policy = lazy(() => import('./pages/Policy'));
const MentorUpload = lazy(() => import('./pages/MentorUpload'));
const MentorUpdate = lazy(() => import('./pages/MentorUpdate'));
const Certify = lazy(() => import('./pages/Certify'));
const NoticeUpload = lazy(() => import('./pages/NoticeUpload'));
const Payment = lazy(() => import('./pages/Payment'));
const Error = lazy(() => import('./pages/Error'));

// router 설정
<BrowserRouter>
	<Suspense fallback={<LoadingSpinner />}>
    	<ScrollTop />
        <Header />
        <Routes>
        	<Route path='/' element={<Home />} caseSensitive />
           	<Route element={<MainLayout />}>
                <Route path='/upload/mentor' element={<MentorUpload />} caseSensitive />
                <Route path='/upload/notice' element={<NoticeUpload />} caseSensitive />
                <Route path='/check' element={<Check />} caseSensitive />
                <Route path='/mentor' element={<Mentor />} caseSensitive />
                <Route path='/mentor/detail/:id' element={<MentorDetail />} caseSensitive />
                <Route path='/notice' element={<Notice />} caseSensitive />
                <Route path='/notice/detail/:id' element={<NoticeDetail />} caseSensitive />
                <Route path='/event/detail/:id' element={<EventDetail />} caseSensitive />
                <Route path='/showcase' element={<Showcase />} caseSensitive />
                <Route path='/support/counseling' element={<Counseling />} caseSensitive />
                <Route path='/support/policy' element={<Policy />} caseSensitive />
                <Route path='/event' element={<Event />} caseSensitive />
                <Route path='/update/mentor/:id' element={<MentorUpdate />} caseSensitive />
                <Route path='/certify/aria' element={<Certify />} caseSensitive />
                <Route path='/payment' element={<Payment />} caseSensitive />
         	</Route>
       	</Routes>
        <ScrollTopButton />
        <WorldTime />
        <AlertContainer />
        <Footer />
  	</Suspense>
</BrowserRouter>