Page Load

페이지 로딩

페이지 로딩 시간이 3s가 넘어가면 사용자들의 이탈율이 32% 증가하게 된다.

페이지 로드 성능 요인

• 비디오, 이미지 등의 에셋 파일들

• SPA - 동적 JS 렌더링

• API 네트워크 호출

  • 수 많은 API 호출로 인해 리소스 로딩에 대한 waterfall로 페이지 로드가 늦어짐

• CSS 스타일 및 폰트

• 거대한 페이지

페이지 로딩 속도 개선

심리적 개선

사용자가 페이지 로딩 속도를 보다 빠르게 느껴지게 할 수 있도록 개선

• 로딩 인디케이터 적용

  • 페이지 로딩 속도가 동일하더라도 사용자들은 적용된 로딩 타입에 따라 로딩 속도를 다르게 느끼게 된다.

  • Skeleton > Spinner > Blank

  • 스켈레톤의 장점으로는 페이지가 로드되기 전에 어떤 모습일지 미리 알 수 있게 해줌

스켈레톤 컴포넌트

웹 페이지가 로딩하는 동안 실제 컨텐츠가 보여지기 전 사용자에게 보여지는 placeholder

대표적인 라이브러리로는 material ui, react-content-loader, react-loading-skeleton 등이 있다.

Content placeholder

Color placeholder

• 이미지 기반의 웹사이트들이 자주 사용 (ex: 핀터레스트)

• 로딩 중에 이미지의 기본색상을 표시함으로써 페이지를 그레이스케일로 표현한것보다 미학적으로 더 좋게 표현

Animated placeholder

• 스켈레톤 화면에 애니메이션을 적용하여 체감 로딩시간을 더 줄일 수 있다.

• 사용자가 컨텐츠를 읽는것처럼 좌 -> 우 방향으로 애니메이션이 진행됨

기술적 개선

• 이미지 크기 리사이징, 사용자가 보고있는 스크린 영역 외 이미지는 나중에 렌더하도록 Lazy load 적용

• 번들 사이즈 최적화, 여러 chunk로 쪼개기

• 텍스트 압축 및 이미지 포맷 변경

• 웹 폰트 로드될 동안 텍스트 표시

• 대규모 레이아웃 변경 피하기

• 서드파티 리소스는 레이지 로딩 적용

• 리소스 제공 서버 변경

• SSG, SSR 초기 페이지 로딩 속도 개선

• 웹 워커를 활용한 백그라운드 작업 수행

컴포넌트의 목적은 어떤 UI를 렌더링할지에 집중 외부 데이터 패칭과, 로딩에 관한 상태를 컴포넌트와 분리하여 관리해서 의존성을 분리시키는 것이 좋다.