웹(Web)이란?

웹(Web)

: 하이퍼텍스트를 바탕으로 관련 있는 문서끼리 연결한 문서의 집합체라고 정의 할 수 있습니다. 하이퍼텍스트는 단어의 뜻 그대로 텍스트(문자)를 뛰어넘는 다양한 콘텐츠를 아우르는 형식. 웹서버는 TCP/IP 기술에서 고전적인 서버의 역할을 하며 문서 형식의 콘텐츠 정보를 전달.

 

웹의 요소 3가지

1) URL(Uniform Resource Locator)

: 클라이언트와 서버가 어떤 방식으로 데이터를 주고 받을지 결정하는 프로토콜, 해당 서비스의 이름을 대표하는 도메인 영역, 해당 자원이 위치하는 장소를 구조적으로 나눈 디렉터리 그리고 실제 자원이 존재하는 파일 확장자를 포함하는 자원의 경로로 이루어짐.

 

URL의 구성과 의미

ex)

https://cnd.webfrontend.org/wp-content/uploads/2020/06/book2.png

프로토콜 // 서브 도메인 // 톱 레벨 도메인 // 디렉터리 // 최종 경로

 

2) 네트워크 프로토콜

: URL을 통해 알게 된 웹의 자원 위치에서 접근하는 방식. 웹에서는 대부분 HTTP를 사용하는데 HTTP는 정보를 주고 받는 헤더(header)부분과 실제 데이터를 주고 받는 페이로드(payload) 부분으로 나뉘어져 있음.

 

웹 페이지의 내용에 해당하는 부분을 페이로드 또는 바디(body)라고 부름. HTTP 프로토콜은 웹에서 클라이언트(브라우저)와 서버 사이에 필요한 정보는 헤더로 주고 받고, HTML이나 이미지 같은 실제 데이터는 페이로드 부분에 받을 수 있도록 설계되어있음.

 

3) HTML(HyperText Mark-up Language)

: 다양한 웹상의 콘텐츠를 브라우저를 통해 태그(tag)라는 명령어로 웹의 목적에 맞는 여러 기능을 수행. 태그를 사용하여 문서의 내용과 구조를 나타내는 언어를 마크업(markup) 언어라고 하는데, HTML도 마크업 언어의 일종이며, HTML로 작성된 웹 페이지는 HTTP기반 네트워크를 통해 웹 서버에서 웹 브라우저로 전달되고, 웹 브라우저는 HTML을 해석하여 웹 페이지 화면을 만들어 사용자에게 제공.

 

브라우저와 웹 서버간 통신과 데이터 전달

HTTL과 콘텐츠는 브라우저와 웹 서버간 요청, 전달, 해석의 과정을 거쳐 사용자 화면에 나타남. 따라서 웹 서버와 브라우저는 정해진 HTTP프로토콜대로 작동하도록 설계되었으며, HTML을 이해하고 그에 맞게 콘텐츠를 나타낼 수 있도록 개발되었음.

 

웹 성능(web performance)란?

: 웹 사이트의 기능이나 내용을 의미하는것이 아니라, 콘텐츠가 신속하게 전달되어 사용자가 원하는 서비스를 빠르게 전달 받을 수 있도록 하는 시스템들의 성능을 의미. 쉽게 이해하자면, 브라우저 주소창에 도메인 주소를 입력하여 해당 사이트로 접속하고 웹 페이지가 로딩되어 내용을 볼 수  있을때까지 걸린 시간. 즉, 웹 로딩(web loading time)이라고도 볼 수 있다. -> 웹 페이지 로딩이 빠른것을 의미.

 

※ 웹 성능에 영향을 주는 환경

: 사용자 환경(프론트엔드), 전달 환경(네트워크), 공급자 환경(백엔드), 네트워크 디바이스 브라우저, 전용선 유선망 모바일망, 백엔드 프런트엔드

 

웹 성능 테스트 수단

- WebPageTest(www.webpagetest.org)

- 구글PageSpeed

 

 

웹 최적화 기법

최 적 화	내 용
Back-End	1) Expires 헤더를 추가한다. 2) gzip으로 압축한다. 3) 페이지 재전송(redirection)을 피한다. 4) ETag를 설정한다. 5) 캐시를 지원하는 AJAX를 만든다.
Front-End	1) HTTP 요청을 줄인다. 2) 스타일 시트는 상단에 넣는다. 3) 스크립트는 하단에 넣는다. 4) CSS 표현식은 피한다. 5) JavaScript와 CSS는 외부 파일에 넣는다. 6) JavaScript는 작게 한다. 7) 중복 스크립트는 제거한다.
Network	1) 콘텐츠 전송 네트워크(CDN)를 사용한다. 2) DNS 조회를 줄인다.

+(야후에서 만든 YSSlow 2.0에 의거)

1) AJAX는 캐시가 가능하도록 만듬

2) GET 메소드로 XHR을 사용

3) DOM 개체 수를 줄인다.

4) 404 Not Found를 없앤다.

5) 쿠키 크키를 줄인다.

6) 쿠키와 상관없는 정적 콘텐츠를 만든다.

7) AplhalmageLoader를 사용하지 않는다.

8) HTML에 이미지 크기를 지정하지 않는다.

9) 파비콘(favicon)은 작게 그리고 캐시 할 수 있도록 만든다.

 

웹 성능 예산의 3가지 분류

1) 정량 기반 지표(quantity based metrics)

: 이미지, 스크립트, 폰트 등 웹 페이지 제작에 필요한 요소들에 대한 한곗값.

  - 이미지 파일의 최대 크기

  - 최대 웹 폰트 파일 개수

  - 자바스크립트 파일 크기 합

  - 타사 스크립트 개수 합

 

2) 시간 기반 지표(timing bases metrics)

: 정량 기반 지표의 단점을 보완하는 성능 예산(파일 크기를 줄이고 파일 개수를 줄였다해서 웹 성능이 좋아진다는 보장은 없음)

DOMContentLoade, Load와 같이 브라우저에서 실제로 발생하는 다양한 웹 성능 이벤트 값을 측정하여 사용주가 느끼는 웹 성능에 대한 목표치를 설정하는 방식.

대표적인 시간 기반 지표

 - FCP(First Contentful Paint) : 텍스트 또는 이미지와 같이 DOM의 첫 번째 비트를 표시하는 시점

 - TTI(Time to Interactive) : 페이지가 사용자 입력에 안정적으로 응답하는 데 걸리는 시간

 

3) 규칙 기반 지표(rule bases metrics)

: 웹 성능 측정 도구들은 자체적으로 웹 성능 지표를 측정하여 각 사이트의 성능 점수를 매기는 알고리즘을 갖고 있음.

대표적인 규칙 기반 지표

 - WebPageTest의 성능 점수

 - 구글 Lighthouse의 성능 점수

 

→ 정량 기반 지표와 시간 기반 지표를 개선 할 수록 규칙 기반 점수는 높아짐.

---

출처 : 웹 성능 최적화 기법