Web Performance Optimization

웹 성능 최적화

목차

• 웹에서 성능이란?
• 성능은 중요한가?
• 홈에서 성능?
• 홈에서 매끄럽지 않는 부분 (버벅임)
• 버벅이는 게 왜?
• 버벅임 (Jank)
• 왜 버벅일까?
• 버벅임에 영향 주는 요인
• 개선 내용
• 결론

웹 성능이란?

• 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 개선 (구조 개선)
• 병행되어야 학습된 경험을 해치지 않고 성능을 개선 할 수 있다.