문제 인식

공동 편집과 화상회의 기능을 제공하여 팀 단위로 알고리즘 문제 풀이가 가능한 학습 플랫폼을 프로젝트로 진행할 때 겪었던 일입니다. 해당 프로젝트는 리액트 프로젝트를 Vite 개발 환경에서 빌드하고, 번들링된 결과 파일을 Nginx로 서빙하는 구조입니다. 첫 접속 시 다운받아야 하는 정적 파일의 크기가 커 첫 접속 시 로딩이 길어지는 문제가 있었고, 이를 해결하기 위한 방법을 찾아보게 되었습니다.

최적화 과정

개발자 도구의 네트워크 탭 확인

첫 접속 시 걸리는 시간

두번째 파일은 자바스크립트 파일로 다운로드에 걸리는 시간(90ms)이 큰 것을 확인할 수 있습니다. 이유는 파일의 크기가 1,234KB로 상당히 크기 때문입니다.

Lighthouse 탭을 통해 점검하기

Lighthouse를 사용하여 성능을 점검하였습니다. 그 결과 성능 점수에서 85점을 받은 것을 확인하였습니다. 자바스크립트 파일의 용량 자체가 너무 커서(1,234KB) 그것에 대한 해결이 필요해 보입니다.

gzip을 사용하여 압축하기

gzip으로 압축하여 리소스를 클라이언트로 제공하면 브라우저는 이것을 압축 해제하여 사용할 수 있습니다. Nginx의 내장 모듈을 사용하여 손쉽게 압축 설정을 할 수 있습니다.

Nginx에서 적용하기

gzip을 지원하지 않는 브라우저 버전을 제외해주고, CPU 사용량과 압축률을 절충해 압축레벨을 6으로 설정하였습니다. 또 너무 작은 파일들은 제외하고, 압축이 필요한 MIME 타입을 작성하였습니다.

압축 결과
1,234KB -> 390.0KB

압축 후 라이트 하우스 결과 및 다운로드 소요 시간

파일의 사이즈가 많이 줄어들고 라이트하우스의 성능 점수가 많이 오르게 되었습니다. 압축 전에는 90ms가 걸리던 것이 압축 후에는 53ms가 걸려 데이터를 받아올 수 있는 점을 확인할 수 있습니다.
하지만 초록색 부분인 서버로부터 요청에 대한 응답이 오기까지의 시간이 길어진 점을 확인할 수 있습니다. 이것은 응답할 때 마다 압축이 진행되어 빚어진 결과로 보입니다.

빌드 단계에서 압축으로 전환하기

빌드 단계에서 압축을 적용한다면 1회만 압축하면 되므로 더 효율적으로 동작할 것으로 생각하였습니다.(Next의 SSG 렌더링 방식과 비슷하게) Vite에서 빌드 단계에서 압축을 지원해주는 플러그인인 vite-plugin-compression2 를 사용하여 압축 설정을 해주었습니다.

이미 압축된 이미지 파일은 제외하고, 1400 바이트 이상의 소스 파일들만 압축하도록 하였습니다.

이는 MTU 사이즈가 1500바이트이므로, 1460 바이트 이하의 데이터는 압축을 하든, 하지 않든 하나의 패킷을 사용할 것으로 생각하였기 때문입니다. 만약 작은 데이터를 압축한다면 오히려 브라우저가 압축을 해제하는 과정이 오버헤드로 작용할 것 같아 threshold를 정하였습니다. 이후 Nginx에서 압축된 파일을 찾아 서빙할 수 있도록 설정 해주었습니다.

Nginx 기반 압축 결과

빌드 시 압축 결과

빌드 시 압축이 요청 시 압축에 비해 약 30ms 정도 소요 시간이 짧아진 점을 확인할 수 있었습니다.

최종 결과

추가적으로 이미지 포맷을 변경하고, SEO와 접근성 관련 개선을 통해 좋은 지표를 나타낼 수 있게 되었습니다.