1. 웹

웹의 대표적인 요소

1. URL: 리소스 위치 확인
   1. protocol
   2. domain
   3. directory
   4. path
2. 네트워크 프로토콜: 리소스 위치에 접근하는 방식
   1. header: 클라이언트와 서버 사이에 필요한 정보
   2. payload(body): 실제로 주고 받는 데이터
3. HTML: 콘텐츠 표현 (태그로 구성하는 마크업 언어)

💡 마크업 언어
태그를 사용하여 문서의 내용과 구조를 나타내는 언어

2. 웹 성능이 중요한 이유

• 웹 성능: 일련의 주소를 가지는 사이트에 접속하여 웹 페이지가 로딩되어 내용을 볼 수 있을 때까지 소요되는 시간 (= 웹 로딩 시간)
• 구매율이나 기업의 이미지에 큰 영향을 끼치기 때문
• 구글의 조사 자료에 따르면 페이지가 3초 안에 로딩되지 않으면 평균적으로 53%의 사용자가 떠나고 로딩 시간이 길어질수록 이탈률 증가

3. 웹 성능 측정 방법

웹 성능에 영향을 주는 요소

동일한 웹 콘텐츠를 전달하더라도 환경에 따라 로딩 시간이 달라질 수 있음

1. 사용자 환경
   1. 거주 지역
   2. 4G, 5G, Wi-fi 등의 네트워크 장비
   3. 브라우저를 사용하는지 등의 환경
2. 공급자 환경
   1. DNS 네임 서버 응답 속도
   2. 웹 서버 응답 속도
   3. 웹 사이트의 백엔드 처리 속도
   4. 프론트엔드 최적화 여부
3. 전달 환경: 사용자나 공급자의 전달 환경
   1. 웹 서버가 위치한 데이터 센터가 자체 전용선을 보유하고 있는지
   2. 유선망과 모바일망에 각각의 서버를 배포했는지 등

웹 성능 측정 서비스

크롬 브라우저의 개발자 도구

• Network 탭을 통해 기본적인 정량 지표 확인 가능
  • HTTP 요청 및 응답 수
  • 콘텐츠 파일 크기
  • DOMContentLoaded 시간
  • 로드 시간
  • 로딩 완료 시간 등
  • waterfall 차트

WebPageTest(WPT)

• 세계 여러 위치에서 웹 사이트 로딩 속도를 테스트할 수 있는 무료 서비스
• 실제 유선망 및 모바일망의 네트워크, 다양한 디바이스 및 브라우저를 세계 곳곳에 설치하여 실제 사용자 환경에서 테스트할 수 있도록 서비스 제공

WebPageTest의 6가지 평가 항목

1. First Byte Time: 웹 서버에서 받은 콘텐츠의 첫 번째 바이트가 얼마 만에 도착했는가?
2. Keep-Alive Enabled: TCP 연결을 재사용하기 위한 Keep-Alive가 설정되어 있었는가?
3. Compress Transfer: 스크립트 파일이 Content-Encoding으로 압축되어 있었는가?
4. Compress Image: 이미지를 압축해 최적화했는가?
5. Cache Static Content: 정적 파일에 브라우저 캐시가 설정되어 있었는가?
6. Effective use of CDN: CDN을 효과적으로 적용했는가?

구글 PageSpeed

구글이 개발한 서비스로 여러가지 모듈을 제공하고 있음

FCP(First Contentful Paint)와 DCL(DOM Content Loaded) 두 개 메트릭스를 사용해 성능을 알려주며, 데이터들의 중간값을 통해 빠른 영역, 중간 영역, 느린 영역이 전체 콘텐츠 대비 몇 %인지 비교 가능

Mod_pagespeed

• Apache나 Nginx 등의 웹 서버에 추가할 수 있는 오픈 소스 모듈
• CSS, Javascript, HTML 파일, 이미지 등의 성능 최적화를 도움
• 원본 콘텐츠를 별도로 가공하여 저장할 필요 없이 최적화된 모듈을 웹상에서 클라이언트에게 실시간으로 제공
• 설치 이후 자동으로 최적화 실행

PSI(PageSpeed Insights)

• 웹 사이트의 성능 최적화 요소 평가 서비스 제공

4. 웹 성능을 만드는 지표

스티브 사우더스의 14가지 웹 성능 최적화 기법

백엔드

1. Expires 헤더 추가
2. gzip으로 압축
3. 페이지 재전송(redirection) 피하기
4. Etag 설정
5. 캐시를 지원하는 AJAX 만들기

프론트엔드

1. HTTP 요청 수 줄이기
2. 스타일 시트는 상단에
3. 스크립트는 하단에
4. CSS 표현식 피하기
5. 자바스크립트와 CSS는 외부 파일에 넣기
6. 자바스크립트 작게
7. 중복 스크립트 제거

네트워크

1. CDN(콘텐츠 전송 네트워크) 사용
2. DNS 조회 줄이기

사용자 환경 - 프론트엔드

빠르고 보기 쉽게 사용자에게 콘텐츠를 전달하는 영역

공급자 환경 - 백엔드

콘텐츠를 실제로 생산하고 저장하여 네트워크를 통해 전달하는 영역

백엔드 요소

1. 물리적 통신을 할 수 있는 프로그래밍 언어로 개발된 서비스
2. 데이터베이스
3. 라우터
4. 네트워크 스위치 등

전달 환경 - 네트워크

네트워크는 장소 및 시간에 따라 속도가 변하기 때문에 성능 측정이 어려움

네트워크 성능을 저하시키는 요소

1. 대역폭(bandwidth): 일정 시간 동안 처리할 수 있는 트래픽 양
2. 지연시간(latency): 기술적인 이유로 사용자에게 콘텐츠를 전달하지 못하고 지연되는 시간

5. 웹 성능과 프론트엔드

브라우저 렌더링

브라우저 렌더링 성능 지표

• FCP(First Contentful Paint): 첫 번째 텍스트 또는 이미지가 표시되는 데 걸린 시간
• SI(Speed Index): 페이지 콘텐츠가 얼마나 빨리 표시되는지에 대한 정보
• LCP(Largest Contentful Paint): 가장 큰 텍스트 또는 이미지가 표시된 시간
• TTI(Time to Interactive): 사용자와 페이지가 상호 작용할 수 있게 된 시간
• TBT(Total Blocking Time): FCP와 TTI 사이 모든 시간의 합.
• CLS(Cumulative Layout Shift): 표시 영역 안에 보이는 요소들이 얼마나 이동하는지에 대한 정보

6. 웹 성능 예산

💡 성능 예산
웹 성능에 영향을 미치는 다양한 요소를 제어하는 한계값으로, 웹 성능을 계량할 수 있도록 수치화하여 목표로 삼을 때 많이 사용하는 방법
웹 페이지의 파일 크기, 페이지를 로딩하는 데 걸리는 시간, 페이지에 포함된 이미지 파일 수 등의 다양한 값 존재

성능 예산의 세 가지 분류

정량 기반 지표 (quantity based metrics)

• 이미지, 스크립트, 폰트 등 웹 페이지 제작에 필요한 요소들에 대한 한계값
• 단, 크기를 줄이고 개수를 줄인다고 해서 반드시 웹 성능이 좋아지는 것은 아니며, 다양한 변수를 고려해야 함
• 대표적인 지표
  • 이미지 파일의 최대 크기
  • 최대 웹 폰트 파일 개수
  • 자바스크립트 파일 크기 합
  • 타사 스크립트 개수 합

시간 기반 지표 (timing based metrics)

• mileston timing이라고도 부름
• 정량 기반 지표의 단점을 보완하는 성능 예산
• 브라우저에서 실제로 발생하는 다양한 웹 성능 이벤트 값 측정 → 사용자가 느끼는 웹 성능에 대한 목표치를 설정하는 방식
• 대표적인 지표
  • FCP
  • TTI

규칙 기반 지표 (rule based metrics)

• 대부분의 웹 성능 측정 도구는 자체적으로 지표를 측정하여 성능 점수를 매기는 알고리즘 보유
• 어떻게 최적화해야 하는지 기술적인 첨언 제공
• 대표적인 지표
  • WebPageTest의 성능 점수
  • 구글 Lighthouse의 성능 점수