[Web] 사용자 경험과 성능 개선 방법

서비스 사용자 경험은 매우 중요

 - 전환율이나 서비스의 지속적인 사용에 밀접하게 관련

 - 심지어 매출에도 영향을 미침

 

사례

 - 핀터레스트는 페이지 로드 시간을 40% 감소시켜서 검색엔진을 통해유입된 트래픽 및 가입자 전환율이 15%증가

 - BBC는 사이트가 로딩하는 데 걸리는 매 초마다 10%의 사용자들이 감소

 - 로딩 속도 1초가 빨라지면 아마존 판매량의 1%, 구글 검색량의 0.2%, 월마트의 전환율이 2% 증가 

   -> 작은 숫자로 보이지만, 돈으로 환산하면 수억에서 수십억 달러 정도

 

SSR cache

정적 페이지를 제공하는 것보다 분명 느림

트래픽이 몰리는 상황에서 렌더링 작업은 웹서버 부하 발생

 

이슈: 캐시 만료 시 무효화 하고 다시 렌더링해서 캐싱과 응답 주도록 했지만, 렌더링 발생시킨 요청을 포함해 완료 전까지 들어온 요청들은 그만큼 지연이 발생됨.

 

해결: 그래서 캐쉬를 바로 무효화하는 대신 갱신 요청만 발생시키고 완료 시점에 캐시를 갱신함.  

 

성과: 렌더링 여부와 상관없이 모든 요청에 대해 즉각 응답을 줄 수 있었음

 

최적화된 리소스 사용

이미지: picture 태그를 사용하면 간단히 브라우저가 지원하는 이미지 포맷을 선택해서 사용할 수 있음

<picture>
  <source srcset="img.webp" type="image/webp" />
  <img src="img.png" alt="alt text" />
</picture>

 

영상: video 태그

<video>
  <source src="video.webm" type="video/webm" />
  <source src="video.mov" type="video/quicktime" />
</video>

 

Passive 이벤트 리스너

브라우저에서 렌더링하는 과정 중 레이아웃과 페인트, 그리고 합성 과정이 있음

여기서 합성은 메인 스레드에서 처리되는 이전의 다른 과정들과는 다르게 컴포지터라고 하는 별도의 스레드에서 처리.

 

컴포지터

 - 레이어 트리나 페인트 순서 등 어떻게 그려야 하는지 수집된 정보들을 사용해서 각 레이어들을 그리고 이를 다시 하나의 웹페이지로 합성하는 과정

 - 사용자의 이벤트를 받아 메인 쓰레드로 넘겨주는 역할, 이때 각 레이어를 어떻게 그려야 하는지 판단 후 넘겨줘야하는데, 레이어가 기존 대비 변경되지 않았으면, 합성만 거쳐서 빠르게 화면을 갱신할 수 있다. 예) 스크롤

 

스크롤 같은 이벤트 리스너가 등록되어 있다면 preventDefault()호출을 통해 기본 동작인 스크롤을 막을 수 있다. 그렇기 때문에 컴포지터는 바로 합성을 하지 않고 메인 스레드로부터 해당 정보가 올때까지 기다리게 됨. 

만약 이벤트 리스너가 preventDefault()를 호출하지 않는 다는것을 컴포지터가 알 수 있다면 기다릴 필요 없이 바로 처리 가능. 

 

이런 힌트를 주는 역할을 하는 것이 바로 passive 옵션

 

 

라이트(lite) 모드

성능이 낮은 기기나 OS버전이 낮은 기기일경우 무거운 모션이나 영상 등 일부 기능이 동작하지 않도록 가벼운 기능으로 대체함

 

 

https://fe-developers.kakaoent.com/2022/220120-ux-and-perf-in-kakaowebtoon/

사용자 경험과 성능 개선 방법 in 카카오웹툰 | 카카오엔터테인먼트 FE 기술블로그