[CS]최적화(Optimization)/최적화 기법

Hannahhh·2022년 10월 7일
CSCSS3html5최적화
0

CS

목록 보기
1/6

🔍 최적화


주어진 조건으로 최대 효율을 낼 수 있도록 처리하는 과정으로, 가능한 적은 리소스를 소모하면서 빠르게 원하는 결과를 도출하는 것을 의미한다.

즉, 웹 개발에서의 최적화는 주어진 조건 아래에서 빠르게 화면을 표시하도록 만드는 것이다.

더 적은 비용(메모리, 연산 횟수)과 더 적은 시간을 소모할수록 효율적이고 최적화된 코드라고 할 수 있다.


최적화의 필요성과 최적화를 함으로써 얻게되는 효과는 다음과 같다.

  • 이탈률 감소
    웹 사이트의 성능 최적화를 통해 로딩 속도를 줄이면, 사용자의 이탈률을 줄일 수 있다.

  • 전환율 증가
    전환율이란, 웹 사이트를 방문한 사요자 중 회원가입, 상품구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미하며, 이탈률이 감소함에 따라 전환율이 높아질 확률이 크다.

  • 수익 증대
    위의 두 효과는 트래픽과 회원수 증가로 이어지며, 이후 수익 증가로 이어진다. 로딩 속도가 1초만 빨라져도 유의미한 수익 차이를 낼 수 있다.

  • 사용자 경험(UX) 향상




🔍 최적화 기법


👀 HTML, CSS 코드 최적화


✔ HTML 최적화


1. DOM 트리 가볍게 만들기

불필요하게 깊이를 증가시키는 요소가 있을 경우, 제거하여 DOM트리의 복잡도를 줄인다.

2. 인라인 스타일 사용 X

인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것으로, class로 묶어서 한 번에 작성할 수 있도록 css파일을 따로 작성하는 것과 달리, 스타일 속성을 중복으로 작성하게 되는 경우가 생기며, 리플로우를 계속 발생시켜 렌더링 완료 시점을 늦춘다. (css의 리플로우는 단 한 번!)



✔ CSS 최적화


1. 사용하지 않는 CSS 제거

CSS 파일의 모든 코드의 분석이 끝난 후, CSSOM 트리가 생성되므로, 불필요한 CSS 코드를 제거하여 CSSOM트리의 완성 속도를 높인다.

2. 간결한 셀렉터 사용

셀렉터가 복잡할 수록 스타일 계산과 레이아웃에 시간을 소모하게 되므로, 간결한 셀렉터를 사용한다.

// 복잡한 CSS 셀렉터
.cart_page .cart_item #firstItem { ... }

// 최대한 간결하게
.cart_item { ... }



👀 리소스 로딩 최적화


CSSOM 트리는 CSS 코드를 모두 분석해야 구성할 수 있으므로, 가능한 빠르게 구성할 수 있도록 CSS파일을 불러올 때, HTML 문서의 최상단에 배치하는 것이 좋다.

// head 요소 안에서 불러오는 것이 좋다.

<head>
	<link href="style.css" rel="stylesheet" />
</head>

또한, HTML 코드 파싱 중에 <script> 요소를 만나는 순간 스크립트가 실행되며 이전의 생성된 DOM까지만 접근할 수 있게 된다. 따라서, 스크립트 실행이 완료될 때 까지 DOM 트리 생성이 중단되므로 화면이 의도한 대로 표시되지 않을 수도 있고, 렌더링 시간이 늘어난다.

따라서, JavaScript 파일을 불러올 때, HTML 문서 최하단에 배치하는 것이 좋다.

<body>
	<div>...</div>
	...

	// body 요소가 닫히기 직전에 작성하는 것이 좋다.
	<script src="script.js" type="text/javascript"></script>
</body>



👀 브라우저 이미지 최적화


1. 이미지 스프라이트 사용

클라이언트에서 서버 요청이 증가할수록 로딩 시간이 늘어나기 때문에, 서버 요청 수를 줄이기 위해 이미지 스프라이트 방법을 사용할 수 있다.

이미지 스프라이트는 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고, CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.

  • 하나의 이미지를 배경 이미지로 사용하되, 표시하고 싶은 부분에 맞춰 width, height, background-position 속성을 주어 아이콘을 만든다.

한번의 이미지 요청으로 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있고, 많은 이미지 파일을 개별로 관리할 필요없이 특정 스프라이트 이미지 파일만을 관리하면 되므로 관리가 용이하다.



2. 아이콘 폰트 사용

대표적인 아이콘 글꼴 서비스로는 Font Awesome이 있으며, FontAwesome의 사용 방법은 아래와 같다.


2-1. CDN으로 사용

FontAwesome에 가입 시 발급받은 키트를 HTML 파일의 <head> 요소에 넣어준다.

이후, 사용할 환경에 맞는 코드를 복사하고 붙여넣기하여 사용한다.

2-2. 모듈 설치

// 핵심 패키지 설치
npm i --save @fortawesome/fontawesome-svg-core

// 아이콘 패키지 설치 (유료 아이콘을 사용할 경우 추가로 설치가 필요)
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

// Font Awesome React 구성 요소 설치
npm i --save @fortawesome/react-fontawesome@latest

패키지 설치 후, 사용하고 싶은 아이콘의 정보를 확인한 후에 아래와 같이 불러와서 사용한다.

import {fontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faReact} from @ from '@fortawesome/free-brands-svg-icons'

const element = <FontAwesome icon = {faReact} />



3. WebP 또는 AVIF 이미지 포맷 사용

새롭게 등장한 이미지 포맷으로, 해당 포맷들을 사용한다면 전통적으로 사용하는 JPEG, PNG에 비해 이미지 용량을 감소시킬 수 있다.

단, 모든 브라우저에서 호환되는 것은 아니기 때문에, HTML의 <picture> 태그를 이용해 사용한다.

// 접속한 브라우저에서 <source>태그 내의 srcset에 정의한 WebP 포맷을 지원하지 않는다면 해당 <source> 태그는 무시

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>



4. CDN(Content Delivery Network) 사용

CDN은 유저와 호스팅 서버 간의 물리적 거리에 의해 발생하는 네트워크 지연(latency)를 줄이기 위해 세계 곳곳에 분산된 서버에 콘텐츠를 저장하여 빠르고 효율적으로 제공할 수 있도록한다.

즉, 유저와 가까운 곳에 위치한 서버의 데이터를 가져오기 때문에 거쳐야 하는 서버의 갯수를 줄여 로딩 속도가 빨라질 수 있다.





Reference: 코드스테이츠

profile
Hannahhh
이전 포스트

[CS] 가비지 컬렉션

다음 포스트

[CS]최적화(Optimization)/캐시 관리

0개의 댓글