light house 사용해서 서비스 개선하기

서론

내가 개발하고 있던 서비스인 hello, gsm(광주소프트웨어마이스터고등학교 입학 지원 서비스)가 운영기간이 끝나고 나서 서비스 개발 당시 시간문제, 외적인 문제 등등으로 하지 못했던 리펙토링, 최적화 작업을 하면서 요즘 시간을 보내고 있다. 그러던 어느 날 어떤 한 선배님께서 light house를 사용해서도 서비스를 개선해 보라고 하셨다. 다른 서비스를 개선할 때는 light house를 적절히 사용한 것 같았는데 hello, gsm 서비스를 개선할 때는 이상하게도 한 번도 사용하지 않은 것 같다. 그래서 hello, gsm에 light house를 사용한 경험기?를 작성해보려 한다.

 

light house

일단 light house를 사용하려면 당연하게도 light house가 뭔지 알아야 한다. light house에 대한 설명은 다른 공식문서나 블로그에서도 찾아볼수 있기 때문에 간단하게 소개만 하고 넘어가도록 하겠다.

설치하기

light house 설치 링크에 접속해 크롬 익스텐션 추가를 해준다.

사용하기

hello, gsm(광주소프트웨어마이스터고등학교 입학 지원 서비스)에 접속해서 devtool을 켜 light house 탭을 클릭후 analyze page load 버튼을 클릭해 페이지 분석을 시작한다.

 

이렇게 분석 결과가 나온다.

이제 이 분석 결과를 바탕으로 서비스를 개선해 나가면 된다.

개선하기

나는 진단 리스트중에서 Eliminate render-blocking resources라는 문제를 해결하였다.

 

어떤 문제냐 아래의 리소스를 다운로드를 받아야해서 렌더링 시간이 더 걸리는 문제이다.

문제가 있는 리소스는 hello, gsm에서 사용하고 있는 pretendard font였다.

 

처음 생각해 봤을 때 개선 방법은 단순하게 font를 다운로드하여서 적용시키려고 했다. 하지만 더 찾아본 결과 next localFont 함수를 이용하여 next 환경에서 font를 최적화하는 방법이 있어 해당 방법을 도입하였다.

 

next localFont를 사용하면 아래와 같은 장점이 있다.

zero layout-shift

font의 사이즈가 같다고 해도 font마다 각각의 크기가 다른 경우가 있다. next에서는 크기가 다른 경우까지 계산하여 적용 전 font와 적용하려는 font의 사이즈가 다르지 않도록 조정한다.

pre-download

build 미리 font를 다운로드하여서 로컬에 저장해 두고 html 파일이 로컬 파일을 link 하도록 구현되어 있다. -> 렌더 속도 향상

 

PR

[feat] next local font 적용 by gaoooon · Pull Request #169 · themoment-team/hellogsm-front-24

마무리

현재 방학 기간인데 방학 기간 동안 hello, gsm light house 분석 결과를 가지고 계속 서비스 개선을 할 것 같다.