HTTP(HyperText Transfer Protocol)

HTTP는 클라이언트와 서버가 서로 데이터를 주고받기 위해 사용되는 통신 규약이다.
클라이언트와 서버 간의 통신을 담당하며, 웹 브라우저와 웹 서버 간의 데이터 전송을 위해 주로 사용된다.

HTTP 특징

비연결성(Stateless)

• HTTP는 비연결성 프로토콜이다. 즉, 클라이언트와 서버 간의 각 요청은 독립적이며, 이전 요청과 상태를 공유하지 않는다. 예를 들어, 사용자가 한 페이지에서 다른 페이지로 이동할 때, 이전 페이지의 상태는 유지되지 않는다. 이로 인해 서버는 클라이언트의 각 요청을 별도로 처리한다.

무상태성(Stateless)

• HTTP는 무상태 프로토콜로, 각 요청 간의 상태를 유지하지 않는다. 즉, 각 HTTP 요청은 독립적이며, 서버는 이전 요청의 정보를 기억하지 않는다. 이를 해결하기 위해 쿠키나 세션과 같은 메커니즘이 사용된다.

표준 포트

• HTTP는 기본적으로 80번 포트를 사용한다 HTTPS(보안 HTTP)의 경우, 기본적으로 443번 포트를 사용한다.

HTTP 메시지 구조

• HTTP는 요청(Request)와 응답(Response)으로 이루어진 메시지를 사용한다.

• 요청 메시지: 클라이언트가 서버에 보내는 메시지로, 주로 메서드(GET, POST 등), URL, HTTP 버전, 헤더, 바디로 구성되어 있다.

• 응답 메시지: 서버가 클라이언트에 보내는 메시지로, 주로 상태 코드(예: 200, 404), HTTP 버전, 헤더, 바디로 구성된다.

Request-Response 모델

HTTP는 클라이언트가 요청을 보내고 서버가 응답을 반환하는 형태의 모델을 따른다. 클라이언트는 요청 메서드(GET, POST, PUT, DELETE 등)를 사용하여 원하는 동작을 서버에 전달하고, 서버는 상태 코드와 데이터를 포함한 응답을 반환한다.

URI(Uniform Resource Identifier)

HTTP는 리소스를 식별하기 위해 URI를 사용한다. 클라이언트는 URI를 통해 서버에 요청할 리소스를 지정한다. URI는 URL(Uniform Resource Locator)이라는 특정한 형태의 식별자로 표현된다.

HTTP 요청 메서드

HTTP는 다양한 요청 메서드를 통해 클라이언트가 서버에 수행할 작업을 정의고 있으며, 주요 메서드는 아래와 같다.

1. GET: 서버에서 리소스를 요청하고 주로 데이터를 가져오는 데 사용된다.

2. POST: 서버에 데이터를 전송하여 리소스를 생성하거나 업데이트 한다.

3. PUT: 서버에 데이터를 보내 특정 리소스를 업데이트할 때 사용한다.

4. DELETE: 서버에서 특정 리소스를 삭제한다

5. HEAD: GET 요청과 동일하지만, 응답에 본문을 포함하지 않으며 리소스의 메타데이터만 요청할 때 사용한다.

6. OPTIONS: 서버에서 사용할 수 있는 HTTP 메서드를 확인한다.

7. PATCH: 리소스의 부분적인 업데이트를 수행한다.

HTTP 상태 코드

HTTP 상태 코드는 클라이언트의 요청에 대한 서버의 응답 상태를 나타내며, 주요 상태 코드는 아래와 같다.

1. 1xx (정보): 요청을 받았으며 처리가 진행 중.

2. 2xx (성공): 요청이 성공적으로 처리된 경우

• 200 OK: 요청이 성공적으로 처리됨.

• 201 Created: 요청이 성공적으로 처리되었으며, 리소스가 생성됨.

3. 3xx (리다이렉션): 클라이언트는 요청을 완료하기 위해 추가적인 작업이 필요함.

• 301 Moved Permanently: 요청된 리소스가 영구적으로 이동됨.

• 302 Found: 요청된 리소스가 임시적으로 다른 위치에 있는 경우.

4. 4xx (클라이언트 오류): 클라이언트의 요청에 오류가 있는 경우

• 400 Bad Request: 잘못된 요청.

• 401 Unauthorized: 인증 필요.

• 403 Forbidden: 요청된 리소스에 접근할 권한이 없음.

• 404 Not Found: 요청된 리소스를 찾을 수 없음.

5. 5xx (서버 오류): 서버가 요청을 처리하는 도중 오류가 발생.

• 500 Internal Server Error: 서버 내부 오류.

• 503 Service Unavailable: 서버가 현재 요청을 처리할 수 없음.

HTTP 버전

1. HTTP/0.9: 초기 버전으로, 단순 텍스트만 데이터로 전송함.

2. HTTP/1.0: 첫 번째 공식 버전으로, 메타데이터를 포함한 메시지 헤더 도입.

3. HTTP/1.1: 가장 널리 사용되는 버전으로, 연결 지속(Keep-Alive) 및 파이프라이닝 기능 추가.

4. HTTP/2: 성능 개선을 위해 멀티플렉싱, 헤더 압축, 서버 푸시 등의 기능이 추가됨,.

5. HTTP/3: HTTP/2의 문제점을 해결하고, QUIC 프로토콜을 사용하여 성능을 크게 개선한 최신 버전.

HTTPS (HTTP Secure)

HTTPS는 HTTP에 SSL/TLS 프로토콜을 추가하여 데이터를 암호화하여 전송하는 방식이다. 이를 통해 데이터를 안전하게 전송할 수 있으며, 특히 금융 거래나 개인 정보가 포함된 통신에서 널리 사용된다.

프론트엔드 성능 최적화

프론트엔드 성능 최적화란 웹사이트나 앱의 로딩 속도와 렌더링 품질을 개선시키는 과정이다. 프론트엔드 성능 최적화를 통해 사용자 경험을 향상시키고, 검색엔진 최적화(SEO)를 도모하고, 비용을 절감할 수 있다. 성능 최적화를 통해 사용자 경험을 개선시킬 수 있고, 이는 곧 페이지 이탈률을 줄이기도 한다.

FP, FCP, FMP, TTI, CLS, FID, TBT, LCP 

FP, FCP, FMP, TTI는 웹 페이지의 성능을 측정하는 지표들이다.

• FP (First Paint) : 페이지가 로드되기 시작하고 첫 번째 픽셀이 화면에 그려지는 시간을 나타낸다. FP를 개선하기 위해서는 렌더링을 차단하는 리소스(CSS, JS)를 최소화하고, CDN을 사용하고, 캐시 정책을 적용하는 등의 방법이 있다.
• FCP (First Contentful Paint) : 페이지가 로드되기 시작하고 텍스트나 이미지 등의 컨텐츠가 화면에 그려지는 시간이다. FCP를 개선하기 위해서는 FP와 비슷한 방법을 사용할 수 있으며, 추가적으로 이미지 최적화, 웹 폰트 로드 최적화, 코드 스플리팅 등의 방법이 있다.
• FMP (First Meaningful Paint) : 페이지가 로드되기 시작하고 사용자에게 의미있는 컨텐츠가 화면에 그려지는 시간을 나타낸다. FMP는 페이지의 주요 컨텐츠가 어떤 것인지에 따라 달라질 수 있으며, 정확하게 측정하기 어려운 지표이다. FMP를 개선하기 위해서는 FCP와 비슷한 방법을 사용할 수 있으며, 추가적으로 중요한 컨텐츠를 우선적으로 로드하고, 레이아웃 변화를 최소화하는 등의 방법이 있다.
• TTI (Time To Interactive) : 페이지가 로드되기 시작하고 사용자의 입력에 응답할 수 있는 상태가 되는 시간을 나타낸다. TTI를 개선하기 위해서는 JS의 실행 시간을 줄이고, 메인 스레드를 차단하는 작업을 분할하고, 웹 워커를 사용하는 방법이 있다.

 이 외에도 cls, fid, tbt, lcp등의 웹페이지 성능을 측정하는 지표들이 있다.

• CLS (Cumulative Layout Shift) : 페이지의 레이아웃이 로딩 과정에서 얼마나 변화하는지를 나타낸다. 레이아웃의 변화는 사용자의 입력에 의한 것이 아니라, 리소스의 로드나 스타일의 적용 등에 의한 것이며, CLS가 높으면 사용자의 경험을 저해하고, 잘못된 클릭을 유발할 수 있다. CLS를 개선하기 위해서는 이미지, 광고, 프레임 등의 요소에 크기를 명시하고, 동적으로 삽입되는 컨텐츠를 공간을 확보하고, 웹 폰트의 로딩을 최적화하는 등의 방법이 있다.
• FID (First Input Delay) : 페이지가 사용자의 입력에 응답하는데 걸리는 시간을 나타낸다. 입력은 클릭, 탭, 키보드 입력 등이 될 수 있다. FID가 높으면 페이지의 반응성이 떨어지고, 사용자의 만족도가 감소한다. FID를 개선하기 위해서는 자바스크립트의 실행 시간을 줄이고, 메인 스레드를 차단하는 작업을 분할하고, 웹 워커를 사용하는 등 TTI 개선 방법과 비슷하다.
• TBT (Total Blocking Time) : FCP와 TTI 사이에 메인 스레드가 사용자의 입력에 응답할 수 없는 시간의 총합을 나타낸다. 50ms를 초과하는 작업의 차단 시간을 계산한다. TBT는 FID와 비슷한 개념이지만, 실제 사용자의 입력이 없어도 측정할 수 있으며  FID와 비슷한 방법으로 개선하면 된다.
• LCP (Largest Contentful Paint) : 페이지의 주요 컨텐츠가 화면에 표시되는데 걸리는 시간을 나타낸다. 주요 컨텐츠는 텍스트나 이미지 등이 될 수 있으며, LCP가 높으면 유저는 페이지의 로딩 속도가 느리다고 인식한다. LCP를 개선하기 위해서는 리소스의 크기와 수를 최소화하고, 우선순위를 결정하고 순차적으로 로드하고, CDN을 사용하면 된다.

또한 유저는 optimized rendering과 같은 점차적으로 보이게 되는 화면을 더 빠르다고 인식한다.

로딩 성능

로딩 성능이란 서버에 있는 웹페이지와 기타 리소스(JS 등) 을 다운로드할 때의 성능이다. 로딩 성능을 개선하면 사용자가 원하는 콘텐츠를 빠르게 보여줄 수 있다.

로딩 성능을 개선하는 방법은 다운로드해야하는 리소스의 크기와 요청 횟수를 줄이고, 우선순위에 따라 순차적으로 로드하는 방법 등이 있다. 로딩성능 최적화를 통해 웹페이지의 로딩 시간을 단축하고 사용자 대기시간을 줄일 수 있다. 이는 이탈률에 직접적으로 영향을 끼친다.

• 리소스의 크기와 수를 최소화 :
  • 웹페이지에서 사용되는 리소스(HTML, CSS, JS)크기를 줄이기 위해 압축, 미니파이(minify), 난독화, 지연로딩, 이미지 최적화 등의 방법을 사용한다.
  • 웹페이지에서 사용되는 리소스의 수를 줄이기 위해 코드 분할, 번들링, 스프라이트 이미지, 인라인 리소스 등의 방법을 사용한다. (인라인 리소스는 파일 요청 및 로드시간을 줄여주지만 코드품질을 저하시키기에 지양한다)

• 리소스의 우선순위 결정 및 순차적 로드 : 웹 페이지에 사용되는 모든 리소스는 동일한 중요도를 갖지 않는다. css는 레이아웃과 스타일을 결정하기에 JS 보다 높은 우선순위에 들어간다. 또한 유저가 처음 보는 화면에 필요한 리소스는 나중에 보게 될 화면의 리소스보다 높은 우선순위를 갖는다.
  • react helmet, webpack preload, prefetch 설정등을 통해 우선순위를 정한다.
  • webpack 설정, react-async-script-loader 라이브러리등을 사용하여 JS 우선순위를 정한다.
• CDN(Content Delivery Network) 사용 : CDN은 전세계에 분산된 서버 네트워크이며 사용자와 가장 가까운 서버에서 웹페이지 리소스를 제공한다.

렌더링 성능

렌더링 성능이란 웹페이지의 DOM, CSSOM, JS 등을 효율적으로 처리하고, 브라우저 레이아웃, 페인팅 등을 최소화하는 방법이다. 렌더링 성능이 향상되면 웹 페이지의 반응성을 높일 수 있다.

• DOM 조작 최소화 : DOM 조작은 필요한 경우에만 해야 하며, 한 번에 여러 개의 변경 사항을 같이 적용하고, Virture DOM이나 프레임워크등을 사용해 최소화시켜야 한다.
• CSS 애니메이션 사용 : CSS 속성 중 transfomr, opacity 속성은 CPU에서 동작하므로 CPU의 부하를 줄일 수 있다. layout과 paint를 발생시키는 속성은 피하는 것이 좋다.
• Reflow와 Repaint 방지 : 
  • Reflow는 브라우저가 웹 페이지의 요소들의 크기와 위치를 계산하는 과정이다.
  • Repaint는 브라우저가 웹 페이지 요소들의 색상, 스타일, 텍스트 등을 그리는 과정이다.
  • Reflow와 Repaint는 웹페이지 성능에 큰 영향을 미친다. 요소의 크기와 위치를 고정하고, 불필요한 스타일 변경을 피해야 한다.

Lighthoust

Lighthouse는 웹 페이지의 품질을 개선하기 위해 구글에서 제공하는 자동화 도구이다. Lighthouse는 성능, 접근성, SEO 등에 대한 전반적인 진단을 해준다. 

페이지 로드 분석을 클릭 후 성능(performance)을 보면 해당 페이지의 성능이 측정되어 있다.

Lighthouse는 속도 점수와 FCP, LCP, TBT, CLS 등의 다양한 지표를 표시한다.

Lighthouse로 웹페이지의 성능을 측정하고, 해당 부분에 대한 로직 수정, CDN 사용, 리소스 최소화 등을 통해 성능 최적화를 하면 된다.

개인 기록용입니다. 만약 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!