티스토리 뷰

최적화

주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정.

주어진 조건으로 최대 효율을 낼 수 있다.

 

컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미

 

웹 개발에서의 최적화는 바로 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것

 

최적화의 필요성 및 효과

이탈률 감소

로딩이 오래 걸리면 이탈을 하게 된다.

전환율 증가

이탈률 감소 -> 전환율 증가

전환율이란, 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미

수익 증대

이탈률 감소, 전환율 증가 -> 수익 증대

사용자 경험(UX) 향상

페이지 로딩이 빠를수록 UX는 향상


HTML, CSS 코드 최적화

HTML 최적화 방법

DOM 트리 간단하게 만들기

//<div>
<ol>
	<li> 첫 번째 </li>
	<li> 두 번째 </li>
	<li> 세 번째 </li>
</ol>
//</div>

인라인 스타일 사용X

<div style="margin: 30px;"> 마진 10px </div>
<div style="margin: 30px;"> 마진2 10px </div>

인라인 스타일 작성 -> 리플로우 계속 발생

CSS 파일 따로 작성 -> 한번의 리플로우

 

CSS 최적화 방법

사용하지 않는 CSS 제거

간결한 셀렉터 사용

.cart { ... }

리소스 로딩 최적화

CSS 파일 불러오기

DOM 트리는 HTML 코드를 한줄씩 읽으면서 순차적으로 구성하지만 

CSSOM 트리는 CSS코드를 모두 해석해야 구성

 

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

JavaScript 파일 불러오기

JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있다.

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

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

JavaScript 파일을 다운로드해서 사용하는 경우에는 다운로드 및 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단

그만큼 렌더링 완료 시간 늦쳐짐

DOM 트리 생성 완료 시점인 하단에 작성

브라우저 이미지 최적화

이미지 스프라이트

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

 

한번의 이미지 요청으로 개별 이미지 사용 -> 로딩 사용 줄인다.

특정 스프라이트 이미지 파일만을 관리

 

아이콘 폰트 사용

아이폰 폰트를 사용하여 용량을 줄인다.

Font Awesome

두가지 방법

CDN으로 사용하기

가입하면 키트 발급 이 키트를 HTML파일에서 <head>요소에 넣어준다.

Font Awesome 모듈 설치

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

// 아이콘 패키지 설치 (해당 코드는 무료 아이콘들입니다. 유료 아이콘을 사용할 경우 추가로 설치가 필요)
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

WebP 또는 AVIF 이미지 포맷 사용

HTML의 <picture> 태그를 이용하면 각 브라우저의 호환에 맞도록 분기를 대체

<picture>: img 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용

 

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

 

CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져온다.


캐시 사용

캐시(Cache)는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소

 

사용하는 경우

데이터에 접근하는 시간이 오래 걸리는 경우

데이터에 접근하는 시간이 오래 걸리는 경우

 

첫번째 요청 -응답 결과를 캐시에 저장

서버에서응답을 보내줄때 이미지 파일과 함께 헤더에 Cache - Control을 작성해서 보내준다.

Cache-Control : max-age=60

해당이미지 파일 60초 동안 유효 

 

두번째 요청 - 캐시 유효시간 검증 -> 캐시에서 조회 -> 브라우저에 렌더링 

캐시를 우선조회 - 60초가 지나지 않았으면 데이터를 가져와 사용

 

세번째 요청 

60초가 지났다 -> 서버에서 다시 이미지를 받아옴 

 

효과 

캐시 유효시간동안 네트워크 리소스 아낀다.

브라우저 로딩이 빨라진다.-> 빠른 사용자 경험 제공 가능 

 

캐시 검증 헤더와 조건부 요청

캐시 검증 헤더 :캐시에 저장된 데이터와 서버의 데이터가 동일한지 확인하기 위한 정보를 담은 응답 헤더

Last-Modified : 데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더

Etag : 데이터의 버전을 의미하는 응답 헤더

 

 

조건부 요청 헤더 :캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더

 

If-Modified-Since : 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용

 

첫번째 요청 

서버의 파일이 마지막으로 수정된 시간을 의미하는 Last-Modified 헤더에 담긴 내용도 캐시에 함께 저장

 

두번째 요청 - 60초 초과 

if -Modified-Since를 작성하고 캐시에 함께 저장해놓앗던 Last-Modified값을 담아 요청을 보낸다.

서버 데이터의 최종 수정일과 캐시에 저장된 데이터의 수정일이 동일한 데이터라면 304 Not Modified라는 응답을 보내준다.

=>캐시 데이터 갱신

 

If-None-Match : 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용

 

첫번째 요청 

서버의 파일 버전을 의미하는 Etag 헤더에 담긴 내용도 캐시에 함께 저장

 

두번째 요청 - 60초 초과 

If-None-Match 를 작성하고 캐시에 함께 저장해놓았던 Etag 값을 담아 요청을 보낸다.

이 값을 이용해 서버 데이터의 Etag 와 캐시에 저장된 데이터의 Etag이 동일한 데이터라면 304 Not Modified 라는 응답을 보내준다.

=> 캐시 데이터 재사용

 

트리쉐이킹(Tree Shaking)

불필요한 코드를 제거

JavaScript 파일의 크기 줄이기 

JavaScript 파일 크기의 증가, 요청 횟수의 증가로 화면 표시 느려짐 , 네트워크 속도 느린 환경에서 병목현상

 

JavaScript 파일의 실행 시간 줄이기

JavaScript 코드를 파싱하여 DOM 트리를 생성 -> 파싱이 끝나면 컴파일하여 컴퓨터가 이해할 수 있는 언어로 바꿔줌

시간이 많이 소모된다.

JavaScript 파일의 실행은 CPU에 크게 영향

 

JavaScript 트리쉐이킹

필요한 모듈만 import 하기

 

//import React from 'react' 대신
import { useState, useEffect } from 'react'

Babelrc 파일 설정하기

Bsbel는 자바스크립트 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리

ES5문법은 import X , require O

하지만 requireexport 되는 모든 모듈을 불러온다.

{
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]
}
//false로 ES5로 변환하는것을 막는다.

 

sideEffects 설정하기

웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않아도 트리쉐이킹대상에서 제외

package.json파일에서

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
}
//false로 사이드 이펙트가 발생하지 않을 거라고 전달한다.
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": ["./src/components/NoSideEffect.js"]
}
//특정파일에서는 사이드 이펙트가 발생하지 않을 거라고 알린다.

ES6 문법을 사용하는 모듈 사용

ES6 문법을 사용하는 모듈을 사용하면 해당 모듈에서도 필요한 부분만 import 해서 사용하지 않는 코드는 빌드할 때 제외한다.


Lighthouse

사이트를 검사하여 성능 측정을 할 수 있는 도구인 Lighthouse

구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴

 

Chrome 개발자 도구에서 실행

Node CLI에서 실행

npm install -g lighthouse
lighthouse <url>
lighthouse --help 

Performance

웹 성능을 측정

Accessibility

웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인

Best Practices

웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인

SEO

웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인

PWA (Progressive Web App)

해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인

 

성능 지표를 추적

First Contentful Pain

FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정

Largest Contentful Paint

LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정

 

Speed Index

페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정

 

Time to interactive

TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정

 

Total Blocking Time

TBT는 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정

 

Cumulative Layout Shift

CLS는 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표

'codestates > section4' 카테고리의 다른 글

Unit9 - [Deploy] Amazon Web Service  (0) 2023.03.31
Performance의 Opportunities 항목 해결방법  (0) 2023.03.30
과제 - Test Builder  (0) 2023.03.29
Unit7 - [Testing] TDD  (0) 2023.03.29
Github GraphQL API로 Live Data 받아오기  (0) 2023.03.28
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함