니플
33k
2019-05-10 16:15:35
0
1056

[펌] 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩


https://medium.com/myrealtrip-product/fe-website-perf-part1-6ae5b10e3433


마이리얼트립은 다양한 방식으로 여행 경험을 제공합니다.

현지 가이드와 생생한 로컬 경험을 함께 할 수도 있고, 즉시 이용 가능한 티켓들을 사서 간편하게 명소나 관광지에 입장할 수도 있습니다. 민박부터 호텔까지 취향에 맞는 숙소를 예약할 수도 있고, 항공권도 저렴하게 구입할 수 있습니다.

하지만 여행에 대한 부푼 마음을 갖고 방문한 페이지의 로딩이 답답할 정도로 느리다면 어떤 기분이 들까요? 관광 명소에 입장하기 위해 예약 내역 페이지를 확인하는데 몇십초가 걸린다면 어떨까요? 상품 상세 정보를 보려고 페이지를 내릴 때 스크롤이 버벅인다면 어떨까요?

여행자들의 소중한 시간이 낭비될 것입니다. 느린 서비스라는 인식이 생기고, 신뢰도도 떨어질 것입니다. 나아가 회사의 매출에도 악영향을 미치고 기업의 규모가 클수록 더 심각한 결과를 가져올 것입니다.


Help individuals experience the world

마이리얼트립의 미션입니다. 여행자의 경험을 돕기 위한 미션의 진입점인 웹사이트에서 불편함을 겪지 않도록 프론트엔드 팀은 지난 한 달간 성능을 측정하고, 개선 방안을 찾아 적용했습니다.

이번 글에서는 리소스 로딩 관련 개선 사례를 다루고자 합니다. 이후 아래와 같은 주제로 성능 개선 과정을 공유드릴 예정입니다.

렌더링 최적화: 리소스 로딩 이후 유의미한 콘텐츠가 화면에 그려지기까지의 과정을 주요 렌더링 경로 분석과 React Profiler를 통해 개선합니다.

메모리 관리: 사용자의 텍스트 입력, 마우스 클릭과 같은 상호 작용 간에 발생하는 메모리 누수를 찾아 개선합니다.

개선 작업에 아래 링크의 교육, 기술 문서, 블로그가 큰 도움이 됐습니다. NHN 엔터테인먼트의 유동식 책임님, 크롬 브라우저 팀의 Addy Osmani님을 포함한 개발자 분들 감사합니다! 👍


관심있는 분은 참고바랍니다.

5
2
  • 댓글 0

  • 로그인을 하시면 댓글을 등록할 수 있습니다.