[No 테크] Next.js에서 Lighhouse의 Performance 점수 개선은 정말 어렵다

이전에 Next.js 프로젝트인 `Quick-News`의 `Lighthouse` 점수 개선을 시도한 적이 있었다.

다행히, `Performace` 점수를 제외한 나머지 세 개 점수는 모두 100점으로 개선할 수 있었다. 그러나, 가장 중요한 `Performance` 점수를 개선하는 데 굉장히 많은 어려움을 겪고 있었다. (이는 현재 진행형이다)

 

`Lighthouse`에서 어떤 점이 문제이고, 어떻게 개선하면 좋을지에 대해 나타난 정보들을 모두 확인하여 많은 개선 시도를 했음에도 불구하고, 점수는 크게 개선되지 않았다.

`Quick-News`의 Lighthouse 점수

 

한 가지, 현 컴퓨터의 성능이 굉장히 오래된 컴퓨터이기 때문에, 성능 상 문제로 인해 `Performance` 점수에 영향을 줄 수 있다는 것을 고려해도, 위의 점수는 굉장히 낮다. 나는 70점을 목표로 `BFCache`를 개선하거나, 이미지 크기를 `Webp`로 변경하여 최적화를 하거나, 중복된 컴포넌트 또는 불필요한 코드들을 제거하여 비효율적인 부분을 줄이는 등 여러가지 시도를 했다. 그렇게 해서 나온 점수가 위의 점수이다.

 

페이지 로드가 느려서 발생한 문제는 컴퓨터 성능과 관련이 있기 때문에 어쩔 수 없다고 생각해도, 도저히 다른 부분은 이해가 안 된다. 아직 어떤 해결 방법을 찾지 못했다.

 

그러다가, 구독 중인 `개발바닥` 채널의 최신 영상을 보게 됐다. (`개발바닥` 채널을 운영하는 두 분은 배달의민족인 우아한형제들에서 서버 개발자였던 `향로`님과 반려생활에서 서버 개발자로 근무하고 계시는 `호돌맨`님이다.)

 

바로, 반려생활의 웹 서비스를 `Next.js`로 구현했다는 내용이었다.

 

"반려생활 앱만 있었는데, 웹 서비스로 만들었다고?", "그것도 Next.js로?"

 

궁금했다. 반려생활의 웹 서비스 성능이 어떤지 말이다. 그래서 반려생활에 접속하여 `Lighthouse`를 실행해봤다.

 

`반려생활`의 Lighthouse 점수

 

점수를 확인하고 나서 깜짝 놀랐다. 예상 외로 점수가 낮아서 말이다. 위의 `Quick-News` 프로젝트의 점수보다 더 낮다는 것에 오히려 당황했다.

 

물론, 프로젝트의 규모에서 큰 차이가 있겠지만, 내 실력과 반려생활 개발자 분들의 실력 차이도 크기 때문에 좋은 성능으로 구현했을 것이라고 생각했다.

 

이 결과를 보고 나니, 성능을 개선하는 게 얼마나 어려운 일인지 크게 깨닫게 됐다.

 

"이것을 수정하면 되겠지.", "저것만 고치면 되겠지."

 

이런 단순한 생각으로 성능을 개선할 수 있다고 생각한 것이 민망했다. 조금 더 진지하게, 더 깊게 고민하여 성능 개선에 다가가야 할 필요성을 느꼈다.