[NOTE] if(kakao)dev2022 카카오 개발자 컨퍼런스 - 웹반응성 개선하기

 

2022년 12월 7일(수)~9일(금), 3일간 개최했던 if(kakao)dev2022 카카오 개발자 컨퍼런스를 듣고

정리한 내용을 이제야 올리네요 ㅎㅎ

기술섹션 프론트엔드에서 웹 반응성 개선을 주제로 발표하신 내용입니다~

저의 공부 삼아 올리는 내용이지만, 참고하시면 좋을 거 같아요!

 

1. 웹 성능이란?

웹에서 성능을 이야기할 때는 로딩 성능을 말한다. 웹 로딩 성능은 링크 클릭 후 사용자가 기본적인 동작을 시작할때까지의 시간을 의미한다.
빠르게 로드되지 않는 페이지는 사용자들은 기다리지 않고 떠나기 때문에 로드 성능을 최적화하는 것은 매우 중요한 일이다.
그러나 웹앱이 점점 복잡해지고, 사용자가 웹 안에서 더 많은 일을 하기 때문에 웹성능의 초점이 로드에서 로드 이후로 이동하기 시작했다. 블로그와 같이 이동이 많은 페이지와 지도와 같이 오래 머무는 페이지까지 다양한 스펙트럼을 가지기 때문에, 사용자들은 로딩 지연 시간보다 반응성 지연시간을 더 많이 경험하게 되고 있다.

2. 웹 반응성

웹 반응성은 클릭, 탭, 키 입력과 같은 사용자 인터페이스가 상호작용해 반응하는 속도를 말하는 것으로
즉, 웹페이지 내에서 사용자의 행동에 얼마나 빠르게 반응하는지에 대한 것이다.

• 웹 반응성 현황
  • 사용자의 70%이상이 일주일에 한번 이상 끔찍한 반응성(웹에 입력했을 때 반응이 없는)을 경험
  • 반응성이 나쁜 페이지보다 좋은 페이지 사용량이 2배이상

 

3. 웹 반응성지표

• TBT(Total Blocking Time) : 인터렉션 동안에 발생한 모든 Blocking Time의 총 합을 의미
• INP(Interaction to Next Point) : 사용자 입력이 발생하고 화면의 변화가 생길때 까지의 시간
• CLS(Cumulative Layout Shift) : 페이지 전체 수명동안 발생하는 예기치 않은 레이아웃 이동 점수

4. 웹 반응성 측정 방법

많은 방법이 있지만, Lighthouse Userflow를 통해 특정환경을 구성해두고 동일한 시나리오를 측정해서 Lighthouse에서 정의한 성능 리포트를 확인 할 수 있다. 세가지 모드가 있다.

• navigation모드 : 단일 페이지 로드를 분석
• snapshot모드 : 사용자 인터렉션 이후 특정 상태의 페이지를 분석하며, SPA나 복잡한 폼의 접근성 이슈를 확인 할 수 있다.
• Timespan모드 : 임의의 시간동안 사용자 인터렉션을 분석해주며, 수명이 긴 페이지나 SPA에서 성능 개선 포인트를 제공한다.

5. 웹 반응성 개선사례

• 블로킹 타임 발생시 강제 리플로우 확인
• 전체화면 업데이트 발생시 중요한 부분 우선 업데이트 진행
• 레이아웃 시프트는 간단한 작업만으로 쉽게 개선 가능

대체로 로드 성능에 초점을 두었던 것 같은데 반응성에 대한 고려도 굉장히 중요함을 배웠고, 생각보다 개선하는 방법은 그리 어렵지 않으니 조금만 생각을 전환한다면 사용자에게 더 좋은 서비스를 제공할 수 있을 거 같다는 생각을 했습니다.

 

제가 느끼는 것과는 다른 것을 느끼실 수도 있으니, 아래 링크에 방문하셔서 직접 들어보시는것도 좋을 듯 합니다~

 

if(kakao)dev2022 카카오 개발자 컨퍼런스 - 웹반응성 개선하기 바로가기