[꼬랑지랑] next.js 사이트 개선기 (1)

gpt가 만들어준 로고

 

 

요약 : 

1. next.js로 만든 웹사이트의 성능을 개선하려고 했다.

2. next.js는 Image 태그를 사용하면 자동으로 최적화가 되는데 나는 안됐다. 어째서?

3. 나는 unoptimized 옵션으로 next.js의 최적화 기능을 사용 안하고 있었다 ^0^

 

1. Next.js로 만든 웹사이트 성능최적화를 해보자

 

주인공은 이 웹사이트다

프론트엔드로 지원간 프로젝트

2.결과 미리보기

 

처음엔 이랬다

 

개선 후 LCP가 확 줄어들었다

 

3. 개선기

1. 문제파악하기

 

구글의 Light House는 최적화를 위한 방법들을 분석하고 제안해 준다. 그 예로 우리 사이트는 이렇다

 

 

3.6초나 차지하는 LCP 요소가 무엇일까?

메인엔 이미지 밖에 없었다. 나는 이 이미지들을 로드하는데 시간이 많이 걸린다고 생각했다.

 

 

방법 1. 배너와 같은 관리자가 설정할 수 있는 페이지의 이미지 포맷을 최식 이미지 포맷인 webp, 또는 avif 로 바꾼다.

 

 

압축방식만 바꿨을 뿐인데 몇십배의 용량차이가 난다. 

 

ISSUE 1. 그런데 공식문서를 읽다가 중요한 점을 깨달았다 .

 

next/Image 태그를 쓰면 webp/avif로 자동으로 최적화 시킬 수 있다는데 왜 난 안됐을까?

 

이미지 최적화 옵션에서 unoptimized를 설정해주고 있었다... 오마이갓

위의 설정을

  images: ["image/avif", "image/webp"],

 

이렇게 설정해주면 avif 와 webp형식으로 최적화 해준다.

 

ISSUE 2. 

next/imgae 에 있는 이미지 옵티마이저와 output : “export”설정은 함께할수 없다고 한다.

 

output 옵션과 next/imgae 옵티마이저

• output 옵션: Next.js의 next.config.js 파일에서 output 옵션을 설정할 수 있다. output: 'export' 옵션은 애플리케이션을 정적 HTML 파일로 내보내는 설정이다. 이 모드에서는 서버 없이도 작동할 수 있도록 모든 페이지가 정적으로 생성되고 따라서 서버 사이드 기능이나 동적 페이지 생성을 사용할 수 없다.
• 이미지 최적화 (Image Optimization) : Next.js의 이미지 최적화 기능은 next/image 컴포넌트를 사용하여 이미지를 자동으로 최적화한다. 이 기능은 이미지 크기 조정, 형식 변경, 지연 로딩 등의 작업을 수행하여 성능을 개선한다. 이미지 최적화는 서버 사이드에서 작동하기 때문에 이미지 최적화를 위해서는 Next.js 서버가 필요하다. 서버는 요청에 따라 이미지를 동적으로 최적화하여 클라이언트에 제공하는 역할을 한다.

상충되는 점:

• output 옵션:  output: 'export' 옵션을 사용하면 모든 페이지가 정적 HTML 파일로 생성되어 서버가 필요하지 않다. 따라서 서버 사이드에서 이미지를 동적으로 최적화할 수 있는 환경이 사라진다.
• 이미지 최적화 (Image Optimization) : 이미지 최적화는 Next.js 서버가 필요하다. 이미지 요청이 들어올 때마다 서버가 이미지를 최적화하여 클라이언트에 전송한다. 하지만 output: 'export' 옵션을 사용하면 이러한 서버 사이드 로직을 사용할 수 없다.

해결방법

• 일반정적 next.js 배포방식으로 배포할 것 (export 쓰지말고 next.js 서버 써라)

 

export 옵션이 저런 설정이었는데 줄은 상상도 못했다. 

백엔드 파이프라인 설정 시 필요하다고 요청하셔서 설정했었는데, 모든페이지를 정적으로 만드는 코드였다. 

그러고 보니 unoptimized도 export 옵션을 설정했기 때문에 에러가 나서 설정했던 것 같다.


백엔드 분은 next로 서버로 안 하고 nginx로 랜더하려고 쓰셨다고 했다.
next.js의 최적화 기능으로 사용자의 UI/UX 를 상승시킬 수 있다는 이야기를 하면서 방법을 바꾸기로 했다.

백엔드에서 nginx를 앞단에 두고 next로 서버사이드를 수행하기로 했다!

 

그렇게 해결 되나 싶었으나!!

 

ISSUE 3. 이미지 엑박 문제 

이미지 엑박 왜?

 

 

 

자동으로 최적화 시킬 이미지 패턴을 적어주면 된다.

우리 서버의 s3주소를 입력해 주었다.

 

 

 

4.결과

LCP 3.6(Bad) ⇒ 0.9초로 성능 개선(Good)

 

이미지 최적화 기능을 켜니까 Layout Shift 현상도 발생하고 있었다. 이부분은 Suspense나 기타 방법을 통해 개선할 생각이다.

 

회고

설정 옵션 하나하나의 중요성을 알고, Next.js의 공식문서 세세히 하나하나 공부해야 할 필요성을 느꼈다.

이후 next.js의 이미지 최적화 공식문서를 읽었는데 최적화에 진심이구나를 느낄 수 있었다.

 

 

reference : 

https://github.com/yj-notebook/TIL-frontend/blob/main/nextjs/optimizing.md

TIL-frontend/nextjs/optimizing.md at main · yj-notebook/TIL-frontend

 

https://nextjs.org/docs/app/building-your-application/optimizing/images

Optimizing: Images | Next.js