기존의 프로젝트를 진행하다가
vite로 개발된 프로젝트를 Next Js로 마이그레이션 하기로 했다.
왜 마이그레이션을 했나요?
웹뷰 프로젝트이기 때문에 사용자경험을 더 높이기 위해서 NextJs로 마이그레이션 하였습니다.
- 초기로딩을 빠르게 잡기 위해 코드 스플리팅이 자동으로 지원된다.
- SSR 기능을 이용하여 로드 속도를 높일 수 있다.
이 과정을 통해서 Lighthouse의 점수를 측정하면서 성능을 개선해보자.
Lighthouse란?
Lighthouse는 구글에서 제공하는 웹 페이지 품질 개선을 위한 오픈 소스로 자동화 도구입니다. 일반 퍼블릭 웹 페이지 또는 인증이 필요한 페이지 등 모든 웹 페이지에 실행할 수 있습니다. Lighthouse는 사이트의 성능, 접근성, SEO 등에 대한 전반적인 진단을 해줍니다.
각 카테고리가 측정하는 내용은 아래와 같습니다.
- Performance 웹 페이지의 로딩 속도 등 실제 성능을 측정
- Best practices Best practices를 따라 개발되었는지 확인
- Accessibility 접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정
- SEO 검색 엔진 수집 최적화 측정
Lighthouse 사용방법
Lighthouse 크롬 확장 프로그램을 설치하여 시작할 수 있습니다.
설치가 완료된 후 개발자 모드(f12)를 클릭 한 뒤 해당 아래 사진부분을 클릭하면 바로 사용 할 수 있다!
vite 기준 Lighthouse 점수
처참하다.. vite로만든 빌드된 도메인에서 확인해본 결과 위 점수가 나왔다.
여기서 점수를 개선하려면 아래 방안들을 개선해볼 필요가 있다.
하지만 주 목적은 Next js로 마이그레이션 하면서 Lighthouse점수를 개선하는 것이니까 걱정하지 말자.
(여기서 vite+ts -> Next js 마이그레이션 하는 과정은 생략합니다.)
1차 Next js 점수
Nexj js는 html을 직접 내려주기 때문에 검색엔진이 확실히 개선된 것을 볼 수 있다.하지만 어? 이상하다 성능 점수가 더 떨어졌는데? 할 수 있다.
이 이유는 next js가 빌드되면 빌드타임에 맞춰서 더욱 최적화 해주는데 지금 사진은 dev단계이기 때문이다.
해당 사진에서 아래 사진들이 진단 사항이었는데
사용하지 않는 CSS를 줄이는게 가장 간단 할 것 같아서 아래 문제를 해결해 보았다.
사용하지 않는 css 개선하기
검색해본 결과
global.scss 속 아래 font css를 전역으로 import 하는데 아래처럼 사용하지 말고
사용하는 곳에서 font-family 속성을 통해서 하나씩 가져오면 해결이 된다고 해서 아래 코드로 전역으로 받아오는 부분을 제거 했습니다.
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');1차 Next js 개선 점수
성능 점수가 10점 오른 것을 확인할 수 있다.
물론 지금도 dev환경이라서 충분히 높은 점수이다. 빌드를 거치면 성능점수가 오를 것 같다.
마무리 build 후 점수 체크
성능 점수가 거의 만점에 이르렀다...
(이럴때 보면 진짜 next js가 개발 뿐만아니라 많은 것들을 도움을 주고 있다고 생각이든다..)
마무리하면서
말로만 맨날 최적화해야지 해야지 하는데 드디어 lighthouse로 성능테스트를 진행했다.
프로젝트 규모가 커질수록 lighthouse와 devtools를 참고하면서 작업하면
성능을 보다 최적화 할 수 있을 것이다.
