Performance is about retaining users
 

참고문서: develper.google.com

Pinterest reduced perceived wait times by 40% and this increased search engine traffic and sign-ups by 15%.

COOK reduced average page load time by 850 milliseconds which increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10%.

UX , conversions , money

웹

정보를 공유할 수 있는 인터넷의 대표적인 서비스 

웹의 역사

처음에 연구 결과를 공유하기 위해 팀버너스리 등과 함께 개발 

브라우저와 하이퍼 텍스트를 바탕으로 점차 발전 
웹서버 <-> HTML
음성과 영상 , VR , AR ... 점차 발전하고 있다. 

웹의 대표적인 요소 

1. URL (Uniform Resource Locator)


2. 프로토콜 (HTTP, HTTPS)
정보 header, 실제 data payload or body


3. HTML 

semantic tag , 목적에 맞는 tag 사용 

웹 성능이 중요한 이유 

웹 성능이 좋다 
- 웹 페이지 로딩이 빠르다.
- 컨텐츠가 빠르게 전달 
월마트 사례 로딩시간 1초 줄이면 구매율 2% 

구글 조사 결과 3초의 법칙: 3초안에 로딩이 되지 않으면 53% 빠짐 
- 3초안에 사용자의 관심을 끌어야 한다.
- 웹 사이트의 로딩이 빨라야 한다. 
- 머리말이 주목받을 수 있어야 한다. 
- 웹 페이지의 글이 눈에 띄어야 한다.
- 웹 페이지 내 사용자 행동이 필요한 부분은 명확히 전달해야 한다.

웹 성능 측정방법 

사용자 환경, 공급자 환경, 전달환경 

사용자 환경 다양한 환경 (네트워크 장비, 브라우저 ... ) 

공급자 DNS 응답속도, 웹 서버 응답속도 , 백엔드 처리 속도, 프론트엔드 최적화 여부

전달 환경 웹서버가 위치한 DATA 센터 전용선 보유여부, 유선망고 모바일망에 각각의 서버 배포 여부

브라우저 개발자 도구

브라우저 개발자 도구

여기

가장 많이 걸린 리소스 분석, 이미지 최적화 or CDN ...

WPT

여기

중간 용어 정리

FCP

First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed

 

중간 용어 정리

LCP

largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed 

PageSpeed

여기

심플하게 웹, 모바일 체크 가능

웹 성능을 만드는 지표

Frontend

Backend

스티브 사우더스 14가지 기법

Frontend

Backend

1. Expires 헤더를 추가한다.

2. gzip으로 압축한다. 

3. 페이지 재전송을 피한다. 

4. ETag를 설정한다. 

5. 캐시를 지원하는 Ajax를 만든다.

백엔드

Frontend

1. HTTP 요청수를 줄인다.

2. 스타일 시트는 상단에 넣는다.

3. 스크립트는 한단에 넣는다.

4. CSS 표현식은 피한다.

5. 캐시를 지원하는 Ajax를 만든다.

6. 자바스크립트를 작게 한다.
7. 중복 스크립트를 제거한다

프론트엔드

1. 컨텐츠 전송 네트워크(CDN)을 사용한다.

2. DNS 조회를 줄인다.

네트워크

네이버D2 정리: 여기 

프론트

html, css layout
image, video 

 

빠르고 보기 쉽게 전달 . rendering 최적화, js 최적화 ...

백엔드

전체 페이지 로딩 시간 평균 5.21
백엔드 domain lookup, server connection & response 1초를 넘지 않음  

이 이상 점검
서버처리량, 네트워크 스위치 처리량, query, 정규화, 

네트워크

FE , BE 와 달리 환경에 영향을 많이 받음 

대역폭과 지연시간 

인터넷 품질에 따라 대역폭과 지연시간이 달라집니다.

 

대역폭: 일정시간에 처리할 수 있는 트래픽 양

지연시간: 기술적 이유로 컨텐츠를 전달하지 못하고 지연되는 시간 

 

웹 성능과 FE

대다수 웹 사이트 로딩시간, 80~90 % 

사용자 기준 원하는 컨텐츠를 전달 받았는지 측정
웹서버 콘텐츠 생산 시간 <<<<<  상호작용 렌더링 시간

브라우저 렌더링

 LightHouse

웹 성능 예산

ex)
메인 페이지 파일 크기 10mb 제한 

각 페이지 js 1mb 제한 

LTE 환경 모바일 기기 Time to interactive 5초 미만

성능예산 이란 웹 성능에 영향을 미치는 요소를 제한하는 한계값을 의미

디자이너, 프론트, 백엔드, 인프라
 

정량 기반, 시간 기반, 규칙 기반

정량 기반
 

이미지 최대 크기
웹 폰트파일
js 파일크기
외부스크립트 개수 합 

사건 기반
 

FCP, LCP, TTI 등 

규칙 기반 지표
 

WebPageTest, Lighthouse 성능점수

규칙 기반 지표
경쟁사 사이트나 비슷한 산업군 대표 사이트와 비교
ex) LTE 환경 로딩 시간 5초미만

Lighthouse CI , Github action -> 리서치 적용?