Web Performance Optimization

웹 성능 최적화

웹 성능이란?

Loading Performance

웹 사이트 방문 시 빨리 뜨나?

Rendering Performance

입력에 따른 움직임이 부드럽게 표현되나?

홈에서 성능?

~~Loading Performance = 화면이 뜨는 데 까지 걸리는 시간~~
Rendering Perfomance = 매끄러운 움직임 = 조작에 따른 반응

성능은 중요한가?

Pinterest 사례

인지 대기 시간을 40% 감소, 검색 엔진 유입 트래픽/가입 15% 증가

BBC 사례

웹 사이트가 로드되는 데 1초 더 걸릴 때 마다 10% 사용자 이탈

웹 성능 → 사용자 유지/증가 → 구매/전환율 → 서비스 호응도, 매출

셋탑 UI 성능 → 컨텐츠 탐색 유지/증가 → 구매/전환율 → 서비스 호응도, 매출

홈에서 매끄럽지 않은 부분 (버벅임)

~~리모컨 조작 시 지연~~
상하 이동
탑 배너 루핑
생략된 포커스 이동 모션
- 선택 상태를 알려주는 주요 인터랙션

버벅이는 게 왜?

0:10 ~

버벅임(Jank)?

낮은 FPS
프래임 누락

왜 버벅일까?

1s = 1000ms

1s 에 60 번 그리려면? 1000 / 60 = 16ms

목표는 30FPS

버벅이지 않으려면 32ms 동안 일을 CPU 가 처리해야함

상하 이동 시 CPU가 처리하는 일 (실제 상용홈 보여주기)

- 입력 키 처리

- 히스토리 관리를 위해서 포커스 정보 저장

- 전체 판 이동

- 포커스 이동

- 이동할 수 있는 컨텐츠 블록 추가

버벅임에 영향을 주는 요인

셋탑 성능
구현 방식 (WebGL, CSS, Javascript)
구조의 복잡함 (aka. 구현 방식, 홈 layer 보여줌)
이미지 품질, 갯수

개선 내용

~~셋탑 성능~~
- ~~Full UI 시 실시간, VOD 에 사용되는 CPU를 웹으로 할당~~
- ~~불필요한 프로세스 정리~~
구현 방식 변경
- Document -> Canvas webGL
구조 복잡함
- 포스터 모서리 처리
- 포스터 그림자 단순화
- 레이어 구조 단순화
이미지 품질, 갯수
- 서비스에 영향을 받지 않게끔 품질 낮춤
- 화면이 안보이는 이미지 예외 처리

결론

렌더링 성능을 개선하기 위해
기술적인 시도 + UI/UX 개선 (구조 개선)
병행되어야 학습된 경험을 해치지 않고 성능을 개선 할 수 있다.