Update : Main Page Lazy Loading& Code Splitting & Memo 적용

[cmun2]

이런 기능

기존 코드의 lighthouse performance 개선을 위해 컴포넌트를 동적으로 불러오기위해 React의 lazy와 suspense method를 Code Splitting 방법으로 활용하며 컴포넌트의 재사용성을 위해 memo를 사용한다

작업 내용

전체적으로 First Contentful Paint 속도와 Time to Interactive 속도가 많이 줄어든 것을 확인할 수 있었습니다

const Comments = lazy(() => import("../pages/Comments"));
const Login = lazy(() => import("../pages/Login"));
const Landing = lazy(() => import("../pages/Landing"));
const Mypage = lazy(() => import("../pages/Mypage"));
const Recipe = lazy(() => import("../pages/Recipe"));
const RecipeCreate = lazy(() => import("../pages/RecipeCreate"));
const RecipeDetail = lazy(() => import("../pages/RecipeDetail"));
const Register = lazy(() => import("../pages/Register"));
const RegisterComplete = lazy(() => import("../pages/RegisterComplete"));
const ResetPassword = lazy(() => import("../pages/ResetPassword"));
const ProfileEdit = lazy(() => import("../pages/ProfileEdit"));
const NotFound = lazy(() => import("../pages/NotFound"));
const RecipeEdit = lazy(() => import("../pages/RecipeEdit"));

return (
    <>
      <Suspense fallback={null}>
        <Routes>
          <Route 부분>
        </Routes>
      </Suspense>
    </>

[cmun2]

먼저 눈에 띄는 enable text compression 부분은 서버에서 gzip이나 brotli 등로 압축된 응답을 받는 것을 제안하고 있다. 현재 로컬에서 동일한 api로 요청해서 압축된 response를 받고 있는데 해당 문제가 발생 된다. 하지만 deploy 환경에서는 해당 문제가 없으며 build를 하면서 file이 압축이되고 전달이 되어 해결되는 듯 하다.

위와 같이 0.15s로 확 낮아진 결과를 볼 수가 있다.

[cmun2]

다음으로 reduce unused CSS 점수를 낮추는 방법을 생각하였다. 렌더링을 방해하는 요소인 google fonts를 preload로 변환시키는 방법을 채택하였다.
https://web.dev/unused-css-rules/?utm_source=lighthouse&utm_medium=devtools

해당 방법으로

Reduce Unused CSS
0.9s -> 0.46s
Eliminate Render-Blocking Resources
0.77s -> 해결(없어짐)
결과를 알 수 있었다