[웹 성능 최적화] 웹 성능이란?

1. 웹이란?

 

(1) 웹 : 오늘날 인터넷에 연결된 컴퓨터를 통해 정보를 공유할 수 있는 인터넷 대표적 서비스이다.

 

(2) 웹 3요소 :

 

- URL(Uniform Resource Locator) : 웹 자원이 인터넷상 어느 위치에 존재하고 있는지 알려주는 방법.

구성 요소로는

클라이언트와 서버가 어떤 방식으로 주고받을지 결정하는 프로토콜,

서비스의 이름을 대표하는 도메인 영역,      

해당 자원이 위치하는 장소를 구조적으로 나눈 디렉터리

실제 자원이 존재하는 파일 확장자를 포함하는 자원의 결로

- 네트워크 프로토콜 : URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식이다.

웹에서는 대부분 HTTP를 사용한다.  HTTP는 정보를(클라이언트와 서버 사이에 필요한 정보) 주고받는 헤더 부분과 실제 데이터를(HTML이나 이미지) 주고받는 페이로드(Body) 부분으로 나뉜다.

 

- HTML : 웹 페이지에 실제로 나타낼 데이터를 정의, 하이퍼 텍스트 기반으로 페이지 연결, 멀티미디어를 포함한다. 마크업 언어로써 HTTP 기반 네트워크를 통해 웹 서버 에서 웹 브라우저로 전달된다. 브라우저와 웹 서버 간 요청, 전달, 해석의 과정을 거쳐 사용자 화면에 나타난다.

 

 

 

2. 웹 성능이 중요한 이유?

 

(1) 웹 성능 : 콘텐츠가 신속하게 전달되어 사용자가 원하는 서비스를 빠르게 전달받을 수 있도록 하는 시스템들의 성능. 즉 주소창에 도메인 주소를 입력하여 사이트에 접속하고 웹페이지가 로딩되어 내용을 볼 수 있을 때까지 걸린 시간이다.(웹 로딩 시간.)

 

(2) 웹 성능이 좋다 : 콘텐츠가 빠르게 전달되어 보이는 상태.

 

(3) 웹 성능이 나쁘다 : 이탈률이 높아진다.

 

(4) 3초의 법칙 : 3초 안에 로딩되지 않으면 사용자 53%가 떠난다.

 

 

 

3. 웹 성능 측정법

 

(1) 웹 성능 영향 요소 :

 

- 사용자 환경 : 거주지역, 네트워크 장비, 브라우저마다 환경이 다르다.

- 공급자 환경 : DNS 네임 서버 응답 속도, 웹 서버 응답 속도, 백엔드 처리 속도, 프런트엔드 최적화 여부

- 전달 환경 : 전용선 여부, 유선망과 모바일 망 등등.

 

(2) 크롬 개발자 도구 : 작업별로 얼마나 많은 시간이 소요되었는지 나타내는 기능이 있다.

 

(3) WebPageTest : www.webpagetest.org/

WebPageTest - Website Performance and Optimization Test

웹 성능에 영향을 주는 6개 항목이 잘 지켜지고 있는지 등급으로 알려준다.

 

(4) 구글 PageSpeed : developers.google.com/speed/pagespeed/insights/?hl=ko

PageSpeed Insights

-PSI라는 모듈을 이용해 웹 사이트의 성능 최적화 요소를 평가하는 서비스를 제공한다.

FCP(first contentful paint), DCL(DOM Content loaded) 두 개의 메트릭스를 이용해 페이지 성능을 알려준다.

- FCP : 웹 페이지가 사용자에게 시각적 응답을 보인 시간

- DCL : 브라우저가 HTML 문서를 로딩 및 해석하는 시간을 측정한 값. 

 

 

 

 

4. 웹 성능 (프런트 엔드)

 

(1)

-웹 성능 밀접한 부분 : 프론트 엔드이다. 대다수 웹 사이트의 웹 성능을 측정하면 로딩할 때 프런트엔드에서 가장 많은 시간을 소요한다.(약 80%~90%)

 

-이유 : 사용자 관점에서 콘텐츠를 전달받았는지가 중요 기준이고, 웹 서버가 콘텐츠를 생산하는 시간보다 원하는 콘텐츠를 가져다 렌더링 하는 데 시간이 더 소요된다.

 

(2) 브라우저 렌더링 :

 

-FCP : 첫 텍스트, 이미지 표시되는데 걸린 시간

-SI : 페이지 콘텐츠가 얼마나 빨리 표시되는지 

-LCP : 가장 큰 텍스트, 이미지 표시 시간

-TTI : 사용자와 상호 작용할 수 있게 된 시간

-TBT : FCP와 TTI사이 모든 시간의 합

-CLS : 요소들이 얼마나 이동하는지에 대한 정보

 

 

 

4. 웹 성능 예산

 

(1) 성능 예산 : 웹 성능에 영향을 미치는 다양한 요소를 제어하는 한계값.