웹 성능 측정과 최적화 (2)

개선 결과

레이지 로딩 이미지, 이미지 우선 순위 조정 - LCP 4.2% 감소, TTI 5.1% 감소

자바스크립트 최적화 - LCP 2,9% 감소, TTI 2.2% 감소

스크립트 우선 순위 조정, 스크립트 조건부 요청 - LCP 10.7% 감소, TTI 3.7% 감소

첫 번째 그래프가 rAF 적용 전, 두 번째 그래프가 rAF 적용 후 모습이다. 브라우저가 16ms마다 콜백 함수를 실행시키려는 노력을 하므로 훨씬 일정한 애니메이션 지속 시간을 볼 수 있다.

LCP 21.4% 감소, TTI 10.7% 감소의 결과를 얻고 이번 프로젝트는 마무리할 수 있었다.

이번 프로젝트에서는 LCP를 줄여서 유저가 느끼는 속도를 최대한 줄이는 것이 목표였다. 페이지의 히어로 컨텐츠를 빨리 로드하기 위해 우선 순위를 높이고, 이 외의 불필요한 요청의 횟수와 사이즈를 줄였다.

걱정되는 것은 우선순위에서 밀려있던 요청들이 히어로 컨텐츠 로드 이후에 이어지며 사용자가 인터랙션 할 수 있는 시기가 늦춰질 수 있다는 것이다.

LCP가 빨라지면서 FCP와 TTI 간격이 줄어들어야 더 좋은 최적화가 된다는 것을 꼭 기억하자.

올해 회사에서 한 프로젝트 중 가장 기억에 남는 것을 하나 꼽으라면 바로 이 '웹 성능 최적화'이다. 아직 실력이 부족해 여전히 옆 동료에게 질문하지만 그래도 처음으로 내가 직접 프로젝트의 시작과 끝을 장식한 느낌이다.

그리고 이번 기회를 통해 웹이 더 좋아졌다. 웹에 대해 모르는 것을 알게 되는 기쁨도 상당했고 다양한 웹 API들을 지원하는 브라우저가 늘어가는 것을 확인하며 웹의 미래가 더욱 기대되었다. 이에 앞서 빠르게 성장해야지!

내가 이 프로젝트를 진행한 이유는 웹사이트 사용자에게 좋은 경험을 주기 위해서다. 좋은 경험을 측정하는 방법은 무엇일까? 아마도 평균 페이지 로딩 시간과 이탈률일 것 같다. 주기적으로 이 두 가지의 변화를 살피며 이 프로젝트가 성공인지, 실패인지를 판단해봐야겠다.

마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩, (2021.09.24), https://medium.com/myrealtrip-product/fe-website-perf-part1-6ae5b10e3433