[올림픽 통계 서비스] 웹 성능 최적화까지 해보자-6

이번에는 올림픽 통계 서비스를 최적화해 볼 것이다.

해당 서비스는 리우 올림픽과 런던 올림픽 정보와 사진을 비교해서 보여 주고, 하단에는 그에 대한 설문조사 결과를 보여준다.

 

설문조사 결과는 막대 그래프로 나타내는데, 항목을 클릭하면 해당 항목에 대해 필터링돼서 그래프가 애니메이션과 함께 변한다.

 

이 장에서 학습할 최적화 기법은 다음과 같다.

• CSS 애니메이션 최적화
• 컴포넌트 지연 로딩
• 컴포넌트 사전 로딩
• 이미지 사전 로딩

 

컴포넌트 지연 로딩

이 서비스에서는 페이지 코드 자체를 분할하는 대신 단일 컴포넌트를 분할해서 컴포넌트가 쓰이는 순간에 불러오도록 만들 것이다.

 

컴포넌트 사전 로딩

컴포넌트 코드를 분할해서 지연 로딩을 적용하면 첫 화면 진입 시 분할된 코드 중 당장 필요한 코드만 다운로드하기 때문에 첫 화면을 더 빠르게 그릴 수 있게 된다.

하지만 서비스 이용 과정에서 분할된 컴포넌트를 사용하려고 할 때, 다운로드되어 있지 않은 코드를 추가로 다운로드하는 시간만큼 서비스 이용에 지연이 발생하게 된다.

그래서 코드를 분할해서 첫 화면 진입 시에는 다운로드하지 않지만, 이후 해당 코드가 필요한 시점보다는 먼저 코드를 로드해서 해당 코드를 지연 없이 사용할 수 있도록 해보자.

 

이미지 사전 로딩

이미지도 컴포넌트와 유사하게 필요한 시점에 로드하면 이미지가 로드되는 시간만큼 기다려야 하니, 필요한 시점보다 먼저 다운로드해주고 필요할 때 바로 이미지를 보여줄 수 있도록 해보자.

 

서비스 탐색

해당 서비스의 페이지들을 살펴보자.

이 페이지에서 올림픽 사진 보기 버튼을 누르게 되면 모달이 뜨면서 올림픽 사진을 캐러셀 형태로 보여 준다.

 

하지만 이 사진이 로드되기 전에는 모달이 이상한 형태로 깨져 있다.

이는 사진 사이즈가 너무 커서 늦게 로드되는 것으로 추측할 수 있는데, 이런 현상은 서비스 이용에 불편을 줄 수 있기 때문에 반드시 최적화해야 한다.

 

아래로 스크롤하게 되면 설문 결과 항목이 있다.

설문 결과는 막대 그래프로 표시되어 있고 하나의 항목을 클릭하면 해당 답변에 응답한 사람들에 대해서만 필터링을 해서 그래프를 다시 보여준다.

하지만 새로운 결과를 보여줄 때 막대 길이가 애니메이션을 통해 변화하는데 뚝뚝 끊기는 듯한 느낌이 든다.

이 애니메이션이 조금 더 부드럽다면 더 좋을 것 같아 최적화 포인트로 다뤄보자.