웹 성능 최적화 기법: chapter2 웹 최적화

 

 

웹 최적화 가이드

최적화란

알맞은 상황으로 맞춘다

IT시스템의 최적화란?

같은 비용과 시스템을 사용했더라도 어떻게 설계하고 구현했는지에 따라 성능과 시스템의 신뢰성이 다르다.

1. 성능 최적화

1.1 HTTP 요청 최소화

• CSS와 JavaScript 파일을 결합하여 요청 수를 줄인다.
• 아이콘 및 이미지를 위해 CSS 스프라이트를 사용한다.
• 비핵심 자산(이미지 등)은 **지연 로드(Lazy Load)** 처리한다.

1.2 압축을 활성화한다

• Gzip 또는 Brotli 압축을 사용하여 데이터 전송 크기를 줄인다.
• HTML, CSS, JavaScript 코드를 축소(Minify)한다.

1.3 캐시를 활용한다

• 정적 자산에 적절한 캐시 만료 헤더를 설정한다.
• 서비스 워커(Service Worker)를 사용하여 오프라인 캐싱을 구현한다.

2. SEO 최적화

2.1 메타 태그를 설정한다

• <title> 태그에 페이지 목적을 명확히 작성한다.
• <meta name="description">에 키워드를 포함하여 페이지 요약을 작성한다.

2.2 URL 구조를 개선한다

• 짧고 의미 있는 URL을 작성한다.
• 하이픈(-)으로 단어를 구분하고 키워드를 포함한다.

3. 사용자 경험(UX) 최적화

3.1 반응형 디자인을 적용한다

• 모든 화면 크기에서 잘 작동하도록 CSS 미디어 쿼리를 사용한다.
• 모바일 기기를 위한 터치 친화적인 버튼 크기와 간격을 유지한다.

3.2 페이지 로드 속도를 최적화한다

• 초기 콘텐츠 로드를 빠르게 하기 위해 중요 CSS를 인라인으로 작성한다.
• JavaScript 파일은 defer 또는 async 속성을 사용한다.

4. 접근성(Accessibility)을 개선한다

4.1 ARIA 태그를 활용한다

• 스크린 리더가 올바르게 작동하도록 ARIA 속성을 추가한다.
• 중요 요소에 적절한 role 및 aria-label을 추가한다.

4.2 대체 텍스트를 작성한다

• 이미지에 의미 있는 alt 텍스트를 작성한다.
• 장식용 이미지에는 비어 있는 alt=""를 설정한다.

5. 보안 최적화

5.1 HTTPS를 적용한다

• SSL/TLS 인증서를 설치하고 HTTPS를 강제 적용한다.

5.2 콘텐츠 보안 정책(CSP)을 설정한다

• 신뢰할 수 있는 출처만 로드되도록 CSP를 설정한다.

프론트엔드에서 신경 써야 할 부분

- 스크립트를 병합하여 브라우저 호출 개수 줄이기

- 스크립트 크기를 최소화해 바이트 자체를 줄이기

- 스크립트를 GZIP 등으로 합축하여 전달하기

- webP 등으로 브라우저 이미지 형식을 최적화하기

- 이미지 손실, 무손실 압축하기

- Cache-Control 응답 헤더를 통해 브라우저 캐시를 충실히 사용하기

- 도메인 수를 줄여 DNS 조회를 초소화하기

- DNS 정보 미리 읽어오기

- CSS를 HTML 상단에, JAVASCRIPT를 HTML 하단에 위치시키기

- 페이지 미리 읽어오기 (page prefetching)

- 타사 스크립트가 웹 성능을 방해하지 않도록 조정화기 

 

1. 번들 크기 최적화

• 코드 스플리팅을 적용하여 필요한 코드만 로드한다.
• 필요 없는 라이브러리를 제거하고 경량화된 대안을 선택한다.

2. 이미지 최적화

• 웹용 최적화된 포맷(WebP, AVIF)을 사용한다.
• 필요한 해상도에 맞는 이미지 크기를 제공한다.

3. 사용자 상호작용 최적화

• 로딩 상태와 피드백을 제공하여 사용자 경험을 개선한다.
• 스무스 스크롤링 및 애니메이션에 GPU를 활용한다.

4. 데이터 페칭 최적화

• 필요한 데이터만 요청하고 불필요한 네트워크 요청을 피한다.
• GraphQL 또는 REST API 최적화를 통해 응답 크기를 줄인다.

 

 

패킷(Packet): 컴퓨터 네트워크에서 데이터를 전송하기 위해 작게 나눈 데이터 단위.

인터넷이나 네트워크에서 정보가 이동할 때, 큰 데이터는 작은 패킷으로 쪼개져 전송되고, 수신 측에서 이를 다시 조립하여 원래의 데이터를 복구한다.

패킷의 구성 요소

패킷은 크게 헤더(Header), 페이로드(Payload), 그리고 경우에 따라 **트레일러(Trailer)**로 구성.

1. 헤더(Header)
   패킷의 시작 부분으로, 데이터 전송에 필요한 메타 정보를 포함.
   • 출발지 주소: 데이터를 보낸 장치의 IP 주소.
   • 목적지 주소: 데이터를 받을 장치의 IP 주소.
   • 프로토콜 정보: TCP, UDP 등 어떤 통신 프로토콜을 사용하는지 표시.
   • 패킷 번호: 패킷이 순서대로 재조립될 수 있도록 번호를 지정.
   • 오류 검출 코드: 데이터 손상 여부를 확인하기 위한 정보.
2. 페이로드(Payload)
   실제 전송되는 데이터 내용. 예를 들어, 이메일 본문, 웹페이지 데이터, 또는 파일 조각이 포함.
3. 트레일러(Trailer) (선택적)
   데이터 무결성을 확인하기 위해 사용되는 정보. 헤더의 오류 검출 코드와 비슷한 기능 수행 가능.

---

패킷 통신의 과정

1. 분할:
   큰 데이터를 네트워크를 통해 전송하기 쉽게 작은 패킷으로 나눈다.
2. 전송:
   나뉜 패킷은 인터넷이나 네트워크를 통해 목적지로 전달된다. 이 과정에서 여러 경로를 거칠 수 있다.
3. 조립:
   수신 측에서 패킷을 원래의 순서대로 재조립하여 데이터를 복원한다.

---

패킷 기반 통신의 장점

1. 효율성:
   네트워크 대역폭을 효율적으로 사용하고, 다수의 사용자가 동시에 네트워크를 사용할 수 있음.
2. 신뢰성:
   손실된 패킷은 재전송할 수 있어 데이터 손상 가능성이 낮음.
3. 유연성:
   서로 다른 경로를 통해 데이터를 전송할 수 있어 네트워크 혼잡을 줄임.

---

패킷과 관련된 기술

• TCP/IP(Transmission Control Protocol/Internet Protocol): 패킷 기반으로 데이터를 전송하는 인터넷의 핵심 프로토콜.
• 라우터: 패킷을 목적지로 효율적으로 전달하는 장치.
• MTU(Maximum Transmission Unit): 한 번에 전송 가능한 최대 패킷 크기.