웹 사이트 성능 측정 또는 최적화

이성은·2023년 5월 21일

1. HTML, CSS 코드 최적화하기

HTML 최적화 방법
- DOM 트리 가볍게 만들기
  - DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커집니다. 즉 복잡도가 클수록 돔트리가 변경되었을때 계산해야 하는게 많아져서, HTML 요소들의 관계를 잘 살펴보고, 불필요하게 깊이를 증가시키는 요소가 있다면 삭제합니다.
- 인라인 스타일 사용하지 않기
  - 인라인 스타일은 개별 요소에 스타일 속성을 작성해 주는 것이기 때문에, 클래스로 묶어서 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생깁니다. 이처럼 불필요한 코드 중복은 가독성을 떨어뜨릴 뿐 아니라 파일 크기를 증가시킵니다. 또한 CSS 파일을 따로 작성하면 단 한 번의 리플로우만 발생하는 것과 달리, 인라인 스타일은 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춥니다. 애초에 인라인 스타일은 웹 표준에 맞지 않으므로 지양해야 합니다.
CSS 최적화 방법
- 사용하지 않는 CSS 제거하기
  - CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성됩니다. 그만큼 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어집니다. 따라서 사용하지 않는 CSS 코드가 있다면 제거하는 것이 좋습니다.
- 간결한 선택자 사용하기
  - 선택자가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 됩니다. 따라서 최대한 간결한 CSS 선택자를 사용하는 것이 좋습니다.

2. 리소스 로딩 최적화하기

CSS 파일 불러올때, HTML 문서 최상단에 배치하기
- 화면을 렌더링할 때는 DOM 트리와 CSSOM 트리가 필요한데, DOM 트리는 HTML 코드를 한 줄 한 줄 읽으면서 순차적으로 구성할 수 있지만, CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있습니다. 따라서 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋습니다.
```
// CSS 파일은 HTML 파일 상단의 head 요소 안에서 불러오는 것이 좋습니다.
<head>
	<link href="style.css" rel="stylesheet" />
</head>
```
JavaScript 파일 불러올때, DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하기
- HTML 코드 파싱 중에 <script> 요소를 만나는 순간 해당 스크립트가 실행되며, <script> 요소 이전까지 생성된 DOM까지만 접근할 수 있습니다. <script> 요소를 HTML 코드 중간에 넣는다면, 해당 요소 이후에 생성될 DOM을 수정하는 코드가 있는 경우에는 화면이 의도한 대로 표시되지 않게 됩니다.
- 또한 스크립트 실행이 완료되기 전까지 DOM 트리 생성이 중단됩니다. JavaScript 파일을 다운로드해서 사용하는 경우에는 다운로드 및 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단됩니다. DOM 트리 생성이 중단된 시간만큼 렌더링 완료 시간은 늦춰지게 됩니다. 이러한 이유로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋습니다.
```
<body>
	<div>...</div>
	...

	// JavsScript 파일은 body 요소가 닫히기 직전에 작성하는 것이 가장 좋습니다. 
	<script src="script.js" type="text/javascript"></script>
</body>
```

3. 브라우저 이미지 최적화하기

페이지의 대부분의 용량은 HTML/CSS/JS와 같은 코드 데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지합니다. (전체 페이지 용량의 약 51% 차지)그래서 이미지의 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려할 시, 사용자 경험을 빠르게 개선할 수 있습니다.

웹 페이지를 로드하는 데 필요한 서버 요청 수를 줄이기 위해 이미지 스프라이트 기법을 사용
- 이미지 스프라이트 기법은 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법입니다.
- 해당 기법을 이용하면 한 번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있습니다.
아이콘 폰트 사용하기
- 아이콘 사용이 많을 때에는, 모든 아이콘을 이미지로 사용하는 것이 아니라 아이콘 폰트를 사용하여 용량을 줄일 수 있습니다. 대표적인 아이콘 글꼴 서비스로는 Font Awesome이 있습니다. Font Awesome의 사용 방법에는 두 가지가 있습니다.
  - CDN으로 사용하기
  - Font Awesome 모듈 설치하기 ⇒ React 환경에서 사용할 경우
WebP 또는 AVIF 이미지 포맷 사용하기
- 이미지 최적화를 위해 전통적으로 사용하는 JPEG 또는 PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있습니다.

4. CDN 사용하기

CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었습니다. 네트워크 지연(latency)은 유저와 호스팅 서버 간의 물리적 거리의 한계가 존재하기 때문에 발생할 수밖에 없습니다. 유저와 서버의 거리가 멀다면 지연(latency) 또한 늘어납니다. CDN은 이를 해결하고자 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장합니다.
간단히 말해, CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져옵니다. 그러므로 데이터가 전달되기 위해 거쳐야 하는 서버의 개수가 크게 줄기 때문에 로딩 속도가 빨라집니다.

5. 캐시 사용하기

브라우저 캐시를 활용하면
- 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있음
- 파일을 다시 받아올 필요가 없기 때문에 브라우저 로딩이 빨라짐
- 로딩이 빨라진 만큼 빠른 사용자 경험 제공 가능

6. 웹팩사용

실제로 JavaScript 파일의 크기가 커진 만큼, 파일의 실행 시간 또한 증가한 것을 알 수 있다.
⇒ 웹팩사용시 자바스크립트 트리쉐이킹을 제공
- 필요한 모듈만 import 하기 ⇒ 필요한 모듈만 불러오면 번들링 과정에서 사용하는 부분의 코드만 포함시키기 때문에 트리쉐이킹이 가능해집니다.
- Babelrc(바벨알씨) 파일 설정하기
- Barbelrc 파일에 다음과 같은 코드를 작성해 주면 ES5로 변환하는 것을 막을 수 있습니다.
⇒ ES5문법은 import를 지원하지 않기 때문에, 트리쉐이킹에 큰 걸림돌이 됩니다.

        {
  “presets”: [
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]
}

이성은

함께 일하는 프론트엔드 개발자 이성은입니다🐥

이전 포스트

기술면접 스터디(3)

다음 포스트

웹 사이트 성능 측정 또는 최적화

1. HTML, CSS 코드 최적화하기

2. 리소스 로딩 최적화하기

3. 브라우저 이미지 최적화하기

4. CDN 사용하기

5. 캐시 사용하기

6. 웹팩사용

기술면접 스터디(3)

Next.js 포트폴리오 만들기(1)

0개의 댓글