[Next.js] Lighthouse 웹 사이트 성능 개선 (100으로 만들기)

성능 개선 결과

 

시작하며...

"우주윗미" 프로젝트 개발을 다 마치고 리팩토링 기간 때, Lighthouse 를 돌려봤는데 74, 64 라는 처참한 결과가 나왔다 😅

 

오히려 좋아 웹 사이트의 성능을 개선할 수 있는 좋은 기회인데 완전 럭키비키자낭~🤭🍀

 

럭키비키~~

그래서 성능을 개선하기 위해 적용한 내용이나 수정한 내용에 대한 여정을 글로 작성하게 되었다.

 

(참고로 dev 환경 아니고 빌드환경에서 시크릿 모드창을 켜서 Lighthouse 돌렸다.)

 

자유게시판 페이지 - 성능 개선하기 📈

1. 데이터 패칭 CSR → SSR 로 변경

CSR 은 브라우저에서 자바스크립트가 실행돼야 페이지에 내용이 렌더링이 되는 방식이다. 그래서 초기 로딩 시간이 길다.

 

반면 SSR 은 서버에서 HTML 을 완성하여 클라이언트한테 전달하는 방식으로 서버가 미리 HTML 을 생성해 전달하기 때문에 자바스크립트가 로드되기 전에도 내용을 볼 수 있다.

 

Lighthouse 를 돌려보았을 때, 확실히 CSR 이 초기 로딩 시간이 길고 SSR 이 짧은 것을 확인할 수 있다.

(좌) CSR (우) SSR

 

처음에는 자유게시판 페이지가 사용자의 상호작용이 많은 페이지니깐 CSR 로 해야지 생각을 해서 CSR 로 구현을 했던 것이었다.

 

그래서 성능 향상을 위해 초기 렌더링은 SSR 로 변경하였다.

 

SSR + TanStack Query

 

2. 복잡한 SVG → 이미지 변경

"과도한 DOM 크기 지양하기" 라는 진단 결과가 있었다. 자세히 보니 SVG 가 복잡해서 Path 가 깊었다.

 

SVG 를 사용하면 무조건 이미지보다 좋을 줄 알았는데 너무 복잡하면 별로라는 걸 알게 되었다...

 

ㅋㅋㅋㅋ복잡...

  그래서 복잡한 SVG 를 모두 png 로 변환시켜 Next.js 의 Image 컴포넌트를 사용해서 렌더링 하였다.

 

이미지로 바꿈

 

게시물 상세 페이지 - 성능 개선하기 📈

1. 이미지 최적화

게시물 상세 페이지의 이미지가 바로 나타나지 않고 한 번 깜박이듯이 이미지가 나타난다.

 

그러면 이게 사용자 경험성 측면에도 좋지 않고, Lighthouse 에서도 이미지가 천천히 로드되기 때문에 아래 요소들이 이미지로 인해 레이아웃이 크게 바뀌어 "대규모 레이아웃 변경 피하기" 라는 진단이 나왔다.

 

그래서 이를 해결하기 위해 Next.js Image 컴포넌트의 priority 를 사용하였다.

 

priority 속성

Next.js Image 컴포넌트의 prioity 자세히 알아보기

Components: <Image> | Next.js

 

이미지의 로딩 우선순위를 설정하여, 중요하고 사용자에게 가장 먼저 보여햐 할 이미지를 더 빨리 로드하기 위한 기능이다.

그러면 lazy-loading 기능을 비활성화하고 즉시 이미지를 로딩하게 된다.

 

priority 추가

 

+)  조회수 CSR → SSR + CSR 로 변경

게시물의 상세 데이터는 SSR 을 통해 가져온다.

 

그런데 조회수 기능을 Firebase 를 통해 추가 구현하면서, 페이지가 렌더링 될 때마다 실행돼야 된다고 생각을 하여 useEffect 를 사용하여 CSR 로 구현하였다.

 

그래서 게시물 상세 데이터는 이미 화면에 렌더링 되었는데 조회수만 깜박거리면서 화면에 생기는 현상이 있었다.

(Lighthouse 성능상으로는 문제없음)

 

SSR 로 수정 - ❌

이러한 문제를 해결하기 위해 처음에 SSR 을 통해 수정을 했으나... 조회수가 업데이트되지 않는 이슈가 있었다.

 

리뷰 남겨주신 팀원분 감사해요

SSR + CSR 로 수정 - ⭕️

고민을 하다가 초기 데이터를 가져오는 건 SSR 으로, 이후 업데이트 된 값을 보여주는 건 CSR 로 수정하기로 했다.

그러면 게시물 상세 데이터와 동시에 조회수가 나타났다가, 현재 조회수에 맞게 알맞게 업데이트된다.

 

서버컴포넌트 - SSR

클라이언트 컴포넌트 - CSR

 

마치며...

아직 성능을 더 개선할 부분도 있지만 최소한의 노력으로 성능을 크게 향상시켰고, 코드 수정으로 수치상의 결과가 나타나서 더욱 성취감이 느껴진다!!