웹 렌더링 성능관련 키워드

PAIL Performance Model(사용자 중심 성능 모델)

• 즉각적 반응
• 애니메이션/스크롤 시 10ms 이내
• Main thread의 유효 시간을 극대화
• 콘텐츠는 2s 이내 로딩, 사용자 입력 처리 가능 시점은 ~5s 이내

로딩과정

• 주소입력
• 리퀘스트 요청
• 데이터 처리
• 리스폰 받음
• HTML을 브라우적 ㅏ처리

수많은 자원들을 크롬 개발자의 Network 탭에서 확인할 수 있습니다.

요소의 로딩 과정(Request - > Connect -> Response)

• Stalled : Request를 보내기전에 대기하는 시간
• DNS Lookup : 도메인 명에 다른 주소를 조회하는 시간
• Initial Connection : 서버와 브라우저간의 연결 설정 시간
• Time to First Byte : 서버가 해당 요소의 첫 Byte 정보를 브라우저에 보내기 위해 걸린 시간
• Content Download : 요소를 다운로드 하는 시간

성능 지표의 이해

Web Citals (웹 활용성 / 생동성)

• LCP (Largest Contentful Paint) : 뷰포트 내에서 보여지는 가장 큰 요소의 렌더링 시간 로딩 성능을 측정하는 지표로, 좋은 사용자 경험을 위해 2.5내 로딩이 필요하다.
• FID(First Input Delay) : 페이징 로딩 동안 사용자가 첫 인터렉션(링크 클릭, 버튼 탭 등) 수행시 , 브라우저가 그 요청에 대한 응답과 처리를 시작하는 시간을 의미 (싱글스레드라서 먼저 들어온 작업을 처리하고 그다음 작업을 수행한다.)

Lighthouse Scoring Caclulator를 통해서 측정가능합니다.

 

크롬 개발자 도구 > Performance

performance.measureMemory API

• 메모리 성능지표를 체크할 수 있습니다.

  await performance.measureMemory

요청 수의 최소화

• HTTP Request 수를 줄임으로써 초기 로딩속도를 개선할 수 있습니다.
• Chrome의 경우 도메인당 6개의 connection이 존재How to
• 자원의 merge

요청 크기의 최소화

• HTTP Request 양을 줄임으로써 초기 로딩속도를 개선합니다.
• Minify(주석제거 공백제거)

이미지 최적화의 필요성

• 평균적으로 웹 페이지는 47%가 이미지로 구성됩니다.
• 적절한 이미지 포맷을 사용해야합니다.
• 이미지가 브라우저에 출력되기 우해선 decode 과정을 거쳐야 합니다.
• 원래이미지보다 두배의 해상도를 사용해서 사용자 체감 해상도늘 높인다.

HTTP 헤더에서 불필요한 값을 제거

• 모든 request에는 cookie가 같이 전달되어 network 오버헤드가 발생한다.
• 정적인 파일인 경우, cookie-free 도메인을 이용합니다.
• Tree-Shaing : ES6 모듈을 사용하는 경우, 사용되는 것만 import 합니다.

페이지 빠르게 렌더링 하기

• Reflow : 각 페이지 레이아웃에 따른 각 요소의 포매팅 처리(위치, 순서, 배치, 간격)을 의미합니다.
• defer : script 태그를 다운로드 하는 동안에도 HTML 파싱을 중단하지 않고, HTML 파싱이 완료된 이후 스크립트를 실행

사례로 살펴본 성능개선 방법

• 크롬 개발자모드에서 작업관리자에서 CPU사용률을 확인 할 수 있습니다.

초기 렌더링을 앞당겨 인지적 속도 향상을 전달

• 초기 화면에 무엇인가 되도록 빠른 시점(FCP)에 출력되록합니다.
• capture screenshot을 활용합니다.

DOM 캐싱

• DOM접근하는 코드는 그자체 만으로 많은 리소스를 필요로한다. (전역변수에 한번쓰는게 좋다.)
• jsbench.me 에서 확인
• DOM을 이용해서 Element를 사용하는것보단 innerHTML으로 접근하는게 훨씬 빠르다.
• 반복문에서 처리하는 것보단 마지막한번만 처리하는것이 훨씬 빠르다.

HTTP/1.1 , HTTP/2

• http2.akamai.com/demo
• 여기서 확인해보면 둘의 성능차이 예제를 알 수 잇습니다.

성능의 유효시간

• 40% 브랜드 사이트들의 웹 성능은 6개월 후 다시 퇴행하는 것이 관찰.

NALS(Naver Application page Loading System)

• http://nals.navercorp.com
  • Navigation Timing API를 통해서 측정된 사용자의 속도 데이터를 기반으로 한 페이지 로딩 모니터링 LCS 로그를 통해서 수집
• NALS 소개 : https://connect.navercorp.com/board/view/1341126

NSPEED

• https://nspeed.navercorp.com/
  • 웹 어플리케이션 성능을 측정하는 도구 Navigation Timing API 및 Web Vitals 지표를 측정
• NSPEED 사용방법:
  • https://yobi.navercorp.com/IT-service nSpeed/posts/48