웹 성능 최적화 (1)

deli-ght·7일 전
1

CS

목록 보기
7/9
post-thumbnail

참고 : https://ui.toast.com/fe-guide/ko_PERFORMANCE

성능 최적화에 필요한 이론과 측정 도구

브라우저의 로딩 과정

브라우저의 로딩 과정은 크게 6가지로 이뤄진다.
다운로드 -> 파싱 -> 스타일 -> 레이아웃 -> 페인트 -> 합성

각 단계별로 살펴보자면

다운로드 / 파싱

제일 먼저 HTML 파일을 다운로드. 다운로드된 html파일을 파싱하는데, 파싱 도중 <script/> <link/> <img/> 발견시 리소스를 요청하고 다운로드
-> critical rendering path (주요 렌더링 경로) 최적화 필요

  • 파싱 : 다운로드한 HTML을 해석해 DOM 트리 구성

DOM 트리 구성

html을 해석해 DOM을 생성 후 각 DOM객체를 트리구조로 연결해 부모-자식 관계를 갖도록 만듦.

CSSOM 트리 구성

스타일시트 파일이 포함되어있는 경우, css를 해석해 cssom 트리를 구상

스타일

파싱 단계에서 생성된 DOM, CSSOM 트리를 가지고 스타일을 매칭시켜주는 과정을 거침 -> 렌더트리 구성

레이아웃

노드의 정확한 위치와 크기 계산
루트로 부터 노드를 순회하며 계산
픽셀값으로 렌더트리에 반영

페인트

렌더트리의 각 노드를 화면상의 실제 픽셀로 변환 -> 위치가 관계없는 css 속성을 적용한다.
변환된 결과는 포토샵의 레이어처럼 생성됨
모든 엘리먼트가 레이어화(X) transform 속성이 사용된 엘리먼트가 레이어화

합성 & 렌더

완료시 웹페이지를 볼 수 있음
페인트에서 생성된 레이어를 합성해 스크린을 업데이트

레이아웃과 리페인트

스타일 이후의 과정을 렌더링이라고 함.
(스타일 -> 레이아웃 -> 페인트 -> 합성)

상황에 따라 반복하여 실행
스타일 단계에서 구성되는 렌더트리

  • 자바스크립트에 의해 DOM, CSSOM트리가 변경될 때 다시 재구성
    = DOM의 노드가 추가, 삭제되거나 요소에 기하적인 영향을 주는 CSS 속성값을 변경하는 경우 (height, width, left, right, font-size, line-height 등)
    레이아웃이 발생하면 그만큼 렌더링 시간도 증가함.
    - js -> style -> layout -> paint -> composite

  • 영향을 주지 않는 css 속성값 변경
    (background-color, color, visibility, text-decoration)
    - js -> style -> paint -> composite

성능 개선 지표

웹 프론트엔드 성능 개선을 위해 웹 개발자는 최소한의 데이터로 가장 빠른 시간에 최적의 UX를 가진 화면을 띄워야함.

어떤 기준으로 로딩 속도가 느린지 판별해야함.
기준 ✔️
1. 브라우저 - 브라우저에서 발생하는 이벤트 상요
2. 사용자 경험 (UX)

브라우저

웹 페이지 로딩시, DOMContentLoaded, load 이벤트 발생
두 이벤트 발생시점이 빠를 수록, 두 이벤트의 발생 구간 폭이 좁을 수록 성능 증가

DOMContentLoaded

  • HTML과 CSS파싱이 끝나는 시점
  • 렌더 트리를 구성할 준비가 된 상황
    = DOM 및 CSSOM 구성이 끝난 상황

load

  • html상에 필요한 모든 리소스가 로드된 시점

두 이벤트를 확인하는 시점

  • 네비게이션 타이밍 API 사용
  • 크롬 개발자도구 사용

SPA의 경우, 적은 HTML양으로 DOMContentLoaded, load 이벤트가 일찍 발생할 수 있으나, 이벤트 발생 이후, 스크립트 실행이 많아짐.
-> 여전히 느린 속도, 새로운 측정 방식 필요

사용자 경험

성능 측정에서 가장 중요한 부분은 사용자가 어떻게 느끼느냐, 사용자 기준으로 성능을 측정한다.

  • FP(first paint) : 픽셀이 처음으로 사용자에게 표시되는 시점
  • FCP (first contentful paint) : 텍스트나 이미지를 그리기 시작 (요청 콘텐츠의 등장)
  • FMP (first Meaningful paint) : 의미있는 데이터 그리기 시작 (css, js로드)
    -> 의미 있는 콘텐츠가 먼저 보이기 때문에 사용자에게 긍정적인 영향을 줌.
  • TTI (time to interactive) : 사용자가 행동을 취할 수 있는 시점 js의 초기 실행이 완료

개발자 도구

performance

웹페이지 로딩 단계를 차트 형태로 살펴볼 수 있음

network

웹페이지가 로딩되는 동안 요청된 리소스의 상태를 차트 형태로 확인

audit -> 현재 lighthouse

사용자 기준 성능 측정 지표 확인

profile
PRE-FE에서 PRO-FE로🚀🪐!

0개의 댓글