웹 성능

→ 웹페이지가 로딩되고 작동하는 속도와 효율성을 측정한 것.

1. 브라우저는 어떻게 작동하는가?

렌더링

• 브라우저는 HTML 문서를 받고 파싱 처리를 진행한다. 파서는 받은 문서를 읽어 문서 객체 모델 트리를 생성한다. 돔은 문서의 구조를 나타낸다.

• 브라우저는 이 돔트리를 사용해 콘텐츠를 렌더링하고 CSS를 처리해 CSS객체 모델을 만든다.

• 렌더링은 그저 콘텐츠를 화면에 표시하는 것만이 아닌 레이아웃과 페인트 두 가지 주요 단계가 있다.

  • 레이아웃 단계에서는 페이지에서 각 요소의 크기와 위치를 계산한다
  • 페인트 단계에서는 각 요소를 화면에 그린다

  수많은 요소들이 있을 때 브라우저는 레이아웃을 계산하는 데 많은 시간을 소요할 수 있다. 페이지의 요소 수를 최소화 하거나 flex, grid를 사용해 레이아웃을 단순화함으로써 성능을 개선할 수 있다

로딩

• 브라우저는 HTML 문서를 받으면 문서에 참조된 리소스(이미지,스타일시트,스크립트)를 로딩하기 시작한다. 이 프로세스는 특히 로딩해야 할 리소스가 매우 많을 경우 병목이 될 수 있다.
• 리소스 힌트(Resource Hints)
  • 레이지 로딩 (Lazy Loading)
    • 필요한 시점에 리소스를 불러오는 방식. 실제로 필요한 순간까지 로딩을 미룬다. → 초기 DOM에 필요 없는 리소스를 불러오지 않아 초기 로딩속도 개선
      
  • 프리패칭(Pre-fetching)
    • 앞으로 필요할 수 있는 리소스를 미리 받아두는 방식. → 이후 페이지 이동시 거의 즉각적으로 로드됨(UX) 향상
      
  • 프리로딩(Pre-loading)
    • 초기에 꼭 필요한 리소스를 미리 로딩하는 방식 → 중요한 리소스의 로딩을 앞당겨 퍼포먼스 최적화
      

2. 자바스크립트에서의 비용 이해와 줄이기

다운로드 시간(네트워크 전송)

• JS 다운로드 시간을 최적화하려면 자바스크립트 번들의 크기를 작게(특히 모바일 기기를 위해) 유지해야한다.
• 하나의 거대한 번들의 사용을 피해야 한다.
  • http/2 멀티플렉싱을 사용하면 복수의 요청과 응답 메시지를 동시에 전송할 수 있고 이를 통해 추가적인 요청의 오버헤드를 줄일 수 있다.

실행 시간

• 다운로드 후에는 스크립트 실행 시간이 대다수의 비용을 차지. 스크립트 실행 시간과 네트워크 관련 병목을 최적화 하는 것이 영향을 미칠 수 있다.
  • 메인 스레드를 바쁘게 유지시킬 수 있는 긴 태스크를 피하라. → 코드를 분할하고 로드되는 순서의 우선순위를 지정하기.
    
  • 거대한 인라인 스크립트를 피하라.

파싱과 컴파일

• 지난 몇 년간 JS 관련 비용의 가장 주목할 만한 변화는 브라우저의 스크립트 파싱 및 컴파일 속도가 크게 향상되었다는 점이다. 구글의 JS 엔진 V8은 크롬 60 이후로 계속 빨라졌다.
  V8에서는 메인 스레드를 중지시키지 않고 JS를 파싱 및 컴파일할 수 있다.

3. 상호작용 최적화

상호작용 대비

→ 사용자의 상호작용에 대해 웹페이지가 얼마나 빠르게 반응할 수 있는지를 평가하는 웹 성능 지표

• 사용자가 자신의 입력(클릭,스크롤,타이핑)에 즉각적인 반응을 원하기에 웹페이지가 느리가 응답하면 사용자는 답답함을 느껴 사이트를 떠난다
• 상호작용 대비를 다양한 측면에서 측정하는 여러 지표를 찾을 수 있다.
  • 상호작용 시작 시간(TTI)
  • TBT 지표

4. 서드파티 의존성의 영향 줄이기

→ 서드파티 의존성은 성능 병목에 가장 큰 영향을 주는 요소가 될 수 있다. 이들은 중요한 기능을 제공하고 개발 시간을 줄여줄 수 있지만 추가적인 오버헤드를 야기하기도 한다.

리액트 서드파티 의존성의 영향을 줄이는 것은 도전적인 태스크이지만 의존성을 사용하는 비용을 줄이기 위해 따를 수 있는 몇가지 단계가 있다.

가장 비싼(느린) 의존성을 식별하라

• Chrome DevTools나 Lighthouse, WebPageTest 같은 도구를 활용해 느리게 로딩되는 의존성을 식별한다.

각 의존성의 필요성을 평가하라

• 필수인지, 대체 가능인지, 평가해 성능 비용에 적합한지 결정해야 한다.

대체 라이브러리를 고려하라

의존성 로딩을 최적화하라

• 지연로딩, 코드 분할, 트리 셰이킹같은 기법을 사용해 의존성의 로딩을 최적화한다.
• 트리 셰이킹은 번들러와 Vite,Webpack 같은 빌드 도구들이 사용하는 기법으로 죽은코드, 최종 번들에서 사용되지 않는 익스포트를 제거한다

5. 인지된 성능 최적화하기

인지된 성능

→ 웹사이트 혹은 애플리케이션의 로딩 및 응답. 속도와 관련된 주관적인 경험이며, 실제 로딩(or 실행)되는 정확한 시간과 대비된다.

• 인지된 성능을 개선함으로써 실제 로딩 시간이 느리더라도 종종 보다 나은 사용자 경험을 만들 수 있다.

스켈레톤 스크린과 플레이스홀더 UI

• 웹 애플리케이션의 인지된 성능을 개선하기 위해 사용하는 설계 패턴이다. 콘텐츠를 지금 당장 사용할 수는 없지만 현재 로딩하고 있다는 즉각적인 시각적 피드백을 주는 것이다.
• 장점
  • 인지된 성능 개선: 인지된 대기 시간을 줄이고 인지된 성능을 전반적으로 개선할 수 있다.
  • 보다 나은 참여: 전체 페이지가 로딩될 때까지 기다리는 대신 콘텐츠에 참여하고 흥미를 가질 수 있도록 유지하는 데 도움을 준다
• 단점
  • 복잡성 증가: 종종 보다 복잡한 코딩과 설계가 필요할 수 있으며 구현과 유지보수에 부담을 줄 수 있다. → 최종 콘텐츠를 정확하게 반영하기가 쉽지 않기에
  • 시각적 주의 산만 위험: 올바르게 구현하지 않으면 사용자의 주의를 산만하게 하거나 심지어 사용자를 혼란하게 함으로써 잠재적으로 나쁜 사용자 경험을 야기할 수 있다

6. 성능 문화

성능문화

→ 조직이 웹 성능에 관해 갖는 태도나 접근법을 가리키며, 여기에서 성능은 비즈니스 성공을 위한 핵심적인 지표이다.

• 대규모 js 어플리케이션을 구축할 때 성능 문화에 효과적으로 접근하기 위해서는 성능 관리 성숙도 수준에 관해 명확하게 이해해야 한다.
  • 수준 0: 행복
    • 성능 관리 전략과 관련된 어떠한 문제나 결여를 깨닫지 못한다
  • 수준 1: 불끄기
    • 성능 문제를 깨닫고 이를 고치기 위해 시도한다
  • 수준 2: 글로벌 기준 & 지표
    • 성능을 평가하기 위해 글로벌 기준 지표와 벤치마크를 위해 움직인다
  • 수준 3: P75+, 사이트별 기준 & 지표
    • 사이트별 성능 지표에 관해 자세히 이해하고 자신들의 접근법에 과학적 방법론을 통합한다